How to Automatically Resize All Your Images to Extra Large on Blogger

I recently started on a journey to archive all my photos and work, and brain-dump my ideas. As an impulse purchase of my domain www.alokpradhan.com, I decided to use Blogger as my hosting platform. However, I realized during the first upload that Blogger automatically resizes images to "Medium." That’s okay if that's what you're looking for, but I am just dumping them straight from my folder into the post, and I want them all Extra Large.

I don't know why Blogger doesn't have a default setting for that feature. I did find a few forums on how it can be done using "find and replace," but I just didn't have the patience to go through all that pain. Thankfully, with my engineering background, I knew I could probably use a script since Blogger posts give you complete access to their HTML code. While I am not sure if I could have typed this code completely on my own (quite honestly, HTML isn't my strongest suit), I knew I could use an AI tool to help me create scripts like these. So, I used Google Gemini to help me write a script to get it done. Atleast pasting one script per post is better than a countless re-sizing (*imo).

I thought maybe someone out there is looking for a similar solution, so you can check it out and use the code I've made. You can also make a script to run in your theme shell but it will run globally so will turn every image Extra Large but if you don't care about it then you can use AI to make a global script which means you wont have to paste this script over and over again. I might add it later to this post at the end. 

Here is what you need to do, step by step:

1. Create a new post, or open an existing post where you have given up on manually resizing everything
   
   
   
2. On the left-hand menu tab of the editor, click the pencil icon and select HTML View.
   
   
   
3. Scroll to the very bottom of your post's code (right below the final </p> tag is perfect).
   
   
   
4. Paste the code below.

<!-- ========================================================= START SCRIPT: AUTO-RESIZE IMAGES TO EXTRA LARGE (1600px) ========================================================= DISCLAIMER: This code is made as a personal project and anything you use is at your own discretion. I am not liable for any damage or misuse of this code. IMPORTANT WARNING: Please backup everything as even one single deletion or addition can completely cause your page to fail and it can be one hell of a bug bounty to fix! Also, this is not for commercial use. If there is anyone who wants to use it commercially, please email your queries to: contact@alokpradhan.com ========================================================= --> <script> (function() { // This function targets images in this post and forces them to 1600px var images = document.querySelectorAll('.post-body img'); images.forEach(function(img) { // Swaps any Blogger shrink code (like /s320/ or /w400-h300/) for /s1600/ var highRes = img.src.replace(/\/(s\d+|w\d+-h\d+)\//gi, '/s1600/'); img.src = highRes; // Removes the hardcoded width/height that keeps images tiny img.removeAttribute('width'); img.removeAttribute('height'); // Ensures the image fits your blog width beautifully img.style.width = "auto"; img.style.maxWidth = "100%"; img.style.display = "block"; img.style.margin = "15px auto"; }); })(); </script> <!-- END SCRIPT -->

This code is only run when it is published or in preview mode. On the editing page, your photos will still appear in medium size format inside the post editor. I actually think this is okay, when you paste a lot of photos, they won't lag your computer (ESPECIALLY FOR CHROME USERS OUT THERE!!! including me) and it's easier for you to navigate around.

If you would like to test if it works or not, after you paste the code, hit preview and then view your website to see if all the images have been enlarged. It worked for me, but I don't want to guarantee it lol.

---

My Background & Disclaimer: This post was created with the help of Google Gemini. Please use AI wisely and make sure to understand the basics. I have a degree in Engineering and a good grasp on multiple layers of programming and computer science, including extensive knowledge of C, C++, MySQL, JAVA, JS, and other facets of the field. I have worked in domains requiring a lot of scripting and programming as a part of my daily work. Please do not substitute AI for actual learning, and make sure to put in the effort to at least learn one language. Once you understand the basics, everything else is the same. There are plenty of YouTube tutorials out there, and I have personally benefited from a lot of them but special mention for these guys thenewboston, Bill Weinman, my teacher Dr. Chirag Sharma (ChiragLectureTutorials)