Blogger Image Size Settings That Keep Pages Fast

Your posts look great on your laptop, but they take four seconds to load on a phone and the speed report keeps flagging "properly size images." The cause is usually Blogger image size: photos uploaded straight from a camera at 4000 pixels wide, then displayed in a column that is only 700 pixels across.

The good news is that Blogger gives you more control over this than most people realise. You do not need a plugin or a paid tool. You need three habits and one small trick with image URLs.

How Blogger image size actually works

When you upload a photo in the Blogger post editor, Blogger stores the original on Google's image servers. What appears in your post is not that original. It is a resized copy, and the size is controlled by a short segment in the image URL.

Open any post in HTML view and look at an image address. Near the end you will usually see something like s1600, s640 or w640-h426. That segment tells the server how big a copy to send:

• s1600 means the longest side is scaled to 1600 pixels.
• w640-h426 means a width of 640 and a height of 426 pixels.
• s0 or s16000 asks for the full original size.

The size you pick from the editor toolbar, Small, Medium, Large, X-Large or Original size, simply changes this segment. Picking "Original size" on a 4000 pixel photo can send a 3 to 6 MB file to every reader.

Which Blogger image size to use for each spot

The right number depends on how wide your template's content column is. Most modern Blogger templates show posts in a column between 640 and 800 pixels wide. Phones with high density screens benefit from roughly double the display width, so a sensible target is the column width times 1.5 to 2.

As a worked example, a recipe blog with a 720 pixel column and eight photos per post was sending roughly 14 MB per page with Original size images. Switching every image to w1200 and recompressing the uploads brought that to about 1.4 MB, and the mobile load time dropped from just over 6 seconds to under 3.

To find your column width, open a post in your browser, right click the text and choose "Inspect." The content container usually lists its width in pixels.

Shrink images before you upload them

Changing the URL segment controls what readers download, but uploading a 12 megapixel photo still wastes storage and makes the editor slow. A two minute routine before upload fixes most of it:

1. Resize the long side to 1600 or 2000 pixels. That leaves room for large displays without carrying a camera original.
2. Export as JPEG at 75 to 82 percent quality. For photos, most readers cannot see a difference from 100 percent, and the file is often half the size.
3. Use PNG only for screenshots and graphics with text. A photo saved as PNG can be five times bigger than the same JPEG.
4. Name the file with words. A name like "blue blogger template header" with hyphens between the words helps image search far more than a camera default such as IMG 4482.
5. Check the result. A typical full width blog photo should land between 120 and 250 KB.

Free desktop tools that come with your computer, such as Photos on Windows or Preview on a Mac, can do every one of these steps.

Editing the size segment in old posts

For posts already published, open each one in HTML view, find the image URLs and change the segment, for example from s1600 to w1200. If the image tag also has width and height attributes, update those so the aspect ratio stays correct. Start with your ten most visited posts first. That is usually where most of the real speed gain is.

Why "always use the largest size" is bad advice

A lot of Blogger tutorials recommend setting every image to Original or X-Large so pictures look sharp on large monitors. I disagree, and the reason is who actually reads your blog.

On most small blogs, 60 to 75 percent of visitors arrive on phones. Those screens display your post column at roughly 360 to 430 pixels wide. Sending a 1600 or 4000 pixel image to that screen means downloading three to ten times more data than anyone can see. On a slow mobile connection, that extra weight is exactly what pushes load time past the point where readers give up.

Sharpness on a 27 inch monitor is a nice bonus. Speed on a phone is the job. Pick a size that looks good at twice the column width and stop there. Our post on why page speed matters more than a pretty template explains how much that difference can cost.

Other image settings that affect SEO

Size is not the only image habit worth fixing. A few others take seconds per post:

• Alt text. Describe what the image shows in plain words. Blogger lets you add it from the image properties box. Our guide on why missing alt text costs Blogger posts traffic goes into detail.
• Lazy loading. Many templates already add loading="lazy" to post images. If yours does not, images below the fold load before readers need them.
• Width and height attributes. Keeping them in the image tag stops the page from jumping as images load, which helps layout stability scores.
• Number of images. A post with 25 large photos will be slow no matter how well each is sized. Cut the weakest ones.

These sit alongside the other quick wins in our list of basic SEO settings most new bloggers skip.

Frequently asked questions

What is the best image size for a Blogger post?

For a full width image in a typical 700 pixel post column, around 1200 pixels wide works well. It stays sharp on high density phone screens without sending an oversized file. Aim for under 200 KB per image.

Does Blogger compress images automatically?

Blogger resizes images based on the size segment in the URL, and Google's servers apply some compression when they create those copies. It does not shrink the original you uploaded. Resizing and compressing before upload still gives you smaller, faster files.

Why do my Blogger images look blurry?

Usually the size segment in the URL is too small for where the image is displayed, such as s320 stretched across a full width column. Change it to w1200 or a size that matches your layout. Very heavy compression before upload can also cause blur.