Blogger Post Images: Size, Compression and Core Web Vitals

Images are usually the heaviest part of a blog post, and the cover is often the first big thing a reader sees. This guide walks you through every step: picking the size, keeping text inside the safe zone, compressing with TinyPNG or Squoosh, writing the image code with our generator, and checking the result in Core Web Vitals.

How the theme shows your images

Blogger takes the first image in a post and uses it as the cover on the home page, in related posts and in share cards. The theme then does a few things for you:

What	How it helps
Fixed 16:9 box	Every card keeps the same shape, and the space is saved before the image arrives, so the page doesn't jump.
Crop, not stretch	An image with a different shape is cut from the center. It is never squeezed.
Resized on Blogger's server	A phone gets a card image about 380 pixels wide, a big screen gets up to 1200. Nobody downloads your full original.
First row first	The first four cards load right away with high priority. The rest wait until the reader scrolls near them.

What the theme can't do is make your original file lighter. A 2 MB upload still gives heavy resized copies. That part is up to you, and it's what the rest of this guide is about.

Pick the right size

Image	Size in pixels	Notes
Post cover	1200 × 675 (16:9)	Used on cards and in the post. Share cards crop it to 1200 × 630.
Full-width image in a post	1600 wide	Enough for sharp screens. Wider than that only adds weight.
Screenshot	Its real size, up to 1600 wide	Crop away empty parts of the window before you save it.
Small image or icon	Twice the size it shows at	An icon that shows at 64 pixels needs 128, not 1000.
Default share image	1200 × 630	Set once for the blog. See the SEO Guide.

Photos straight from a phone are often 4000 pixels wide and 3–5 MB. Always resize them before you upload.

Keep the cover inside the safe zone

On the home page the cover doesn't show whole. The corners are rounded, the card's label and title cover a strip at the bottom, and some posts get a Premium or Trending badge at the top left. Keep your title and the important parts of the design inside the green frame:

Area	Pixels (on 1200 × 675)	What to put there
Safe zone	x 60–1140, y 60–575	Title, main visual, faces, logos.
Bottom strip	x 0–1063, y 587–675	Background only. The card text covers it.
Bottom-right corner	x 1063–1200, y 587–675	Still visible, but too small for anything important.
Badge area	Top left, 480 × 180	Background only, in case the post gets a badge.
Corners	66 px rounded	Nothing that would look cut.

Download the transparent version of this map and put it as the top layer in Figma, Canva or Photoshop. Hide it before you export.

Choose the format

Format	Use it for	Avoid it for
WebP	Almost everything: covers, photos, screenshots. Much lighter than JPG and PNG at the same quality.	Nothing, all current browsers support it.
JPG	Photos, if your tool can't save WebP.	Text and sharp lines, they get blurry edges.
PNG	Images that need a transparent background, or very simple graphics with few colors.	Photos and covers with gradients, the file gets huge.
SVG	Logos and icons.	Photos.
GIF	Short, tiny animations only.	Anything longer. Use a video instead, it's many times lighter.

Compress before you upload

Aim for a cover under 100 KB and images in the post under 150 KB. At normal viewing size, readers won't see the difference.

TinyPNG

TinyPNG is the quickest option: drop your images in and download smaller copies. Despite the name, it works with WebP, JPG and PNG too.

1. Resize firstTinyPNG makes files lighter but keeps their size in pixels. Resize the image to 1200 × 675 (or the size from the table above) in your design tool first.
2. Drop the imagesOpen tinypng.com and drag your images onto the page. The free version takes several images at once.
3. Check the savingEach image shows how much lighter it got. Savings of 50–80% are normal for PNG.
4. DownloadDownload each one, or all of them together, and upload those copies to Blogger.

Squoosh

Squoosh is a free tool from Google that runs in your browser. It resizes, converts to WebP and compresses in one place, and it shows a live before-and-after.

1. Open the imageDrag it onto squoosh.app.
2. ResizeTurn on Resize and set the width to 1200. Keep the ratio locked.
3. Pick WebPUnder Compress, choose WebP and set the quality to about 75.
4. CompareDrag the slider in the middle to compare both sides. If text looks soft, raise the quality a little.
5. DownloadPress the download button at the bottom right. The file size is shown next to it.

Upload and name your images

• Name the file before uploading. Blogger keeps the file name in the image address. blogger-author-box.webp tells Google more than IMG_2041.webp. Use short words joined with dashes.
• Upload to Blogger. Use the image button in the post editor. Blogger's image server is what lets the theme and the generator resize your images for each screen. Images hosted on other sites can't be resized this way.
• Don't link images from other sites. They may be slow, get removed, or be much bigger than needed.

Write the image code with the generator

Blogger's own image button adds the image at one size for every screen. The Image Code Generator writes better code for you in a few seconds. For the caption styles in detail, see Fast Images with Captions.

1. Upload and copy the addressUpload the image in the post editor, click it, and copy its address. You can also switch to HTML view and copy the src of the image.
2. Paste it in the generatorOpen the Image Code Generator and paste the address. The width and height fill in by themselves once the image loads.
3. Write the alt textDescribe the image in one short sentence. Google and screen readers use it. For a purely decorative image, leave it empty.
4. Add a caption if you likeChoose where it shows: under the image, on the image, or as a card.
5. Tick Main image onceOnly for the first big image near the top of the post. Leave it off for every other image.
6. Generate and pastePress Generate, then Copy code. In the post editor switch to HTML view, delete the old image code, and paste the new one in its place.

This is what the code does for you:

In the code	Why it's faster
srcset and sizes	Four sizes (400, 800, 1200 and 1600 wide). Each phone or computer downloads only the one it needs.
width and height	The browser keeps the space ready, so text doesn't move when the image appears.
fetchpriority="high"	Only on the main image: it loads before other files.
loading="lazy" decoding="async"	On every other image: it waits until the reader scrolls near it.

Want a cover on the home page but not at the top of the post? Add class="thumb-only" to that image, as explained in the SEO Guide.

Core Web Vitals tips for images

Google measures three things on every page. Images affect the first two the most.

Metric	What it means	Good
LCP (Largest Contentful Paint)	How long the biggest thing on the first screen takes to show. It's often an image.	2.5 s or less
CLS (Cumulative Layout Shift)	How much the page jumps while it loads.	0.1 or less
INP (Interaction to Next Paint)	How quickly the page reacts to a tap or click.	200 ms or less

For a faster LCP

• Never lazy-load the main image. The image at the top of the post should be marked Main image in the generator, and only that one.
• Keep the top of the post light. A heading, a short intro and one image load faster than a slider or a gallery.
• Compress the cover hardest. It's the image that shows on the home page, in related posts and in share cards.
• No text as an image. A heading written in HTML shows right away. The same heading inside an image waits for the download.

For a stable page (CLS)

• Always keep width and height. The generator adds them. Don't delete them when editing the code.
• Don't add images with scripts. Anything that appears after the page loads pushes the text down.
• Give embeds their space. Use the theme's video and map blocks, which keep their size before they load.

For quick taps (INP) and less data

• Replace big GIFs with a video. A 5 MB GIF is often a 300 KB video.
• Use SVG for icons and logos. They're tiny and sharp on every screen.
• Fewer, better images. Every image is a download. Keep the ones that explain something.

Measure the result

1. PageSpeed InsightsOpen pagespeed.web.dev, paste your post address and press Analyze. Look at Mobile first, it's what Google uses for ranking.
2. Read the numbersThe top part shows real visits (after your blog gets enough traffic). The lower part is a lab test you can run any time. Green is good.
3. Check the image adviceLook for Improve image delivery and LCP request discovery. They name the exact image that needs work.
4. Fix and test againCompress or resize that image, upload it again, and run the test once more.

In Google Search Console, the Core Web Vitals report shows which pages need work across the whole blog, based on real readers.

Checklist

Cover	Every image
1200 × 675, 16:9	Resized to the size it shows at (up to 1600 wide)
Title inside the safe zone	WebP, or JPG for photos
WebP, under 100 KB	Compressed with TinyPNG or Squoosh
Clear file name	Uploaded to Blogger, not linked from another site
Main image ticked once	Code from the Image Code Generator, with alt text