How to Optimize Images for Blog Posts Before Uploading

It means making each image as small in bytes as it can be while still sharp at the size a reader sees it. Three levers do the work: pixel dimensions, quality, and format. Pixel dimensions matter most, because a 4032 × 3024 frame holds about 12 million pixels and a 1600 × 1200 version keeps about 16% of them.

Speed is why it matters. web.dev treats an LCP of 2.5 seconds or less as good, measured at the 75th percentile of page loads, and an <img> is a common LCP element on a blog post. Our own measured results are in Image Optimization for Core Web Vitals, Measured.

Make the image about twice as wide as the column it appears in, so phones and high-density screens stay sharp. For a column of 700 to 800 pixels that means 1400 to 1600 pixels. No single size fits every theme, so check your own column width in your browser’s inspector.

Notice what WordPress does with a 4032-pixel upload: it keeps the unscaled original in your media folder and builds the displayed version at 2560. That still leaves a large file on disk, so resize before you upload.

Export the featured image at 1200 × 630 in about a 1.91:1 shape, and keep the file under Facebook’s 8 MB cap. Facebook recommends that size, and says that shape shows in the feed without cropping.

Your theme may crop the same file differently on the homepage grid. Smol’s fill mode crops to a box with no control over what is cropped, so for a deliberate crop do it in your editor first and let Smol handle size and quality. Use fit when nothing should be cut.

Aim as low as looks clean at full width, and judge by eye rather than by a magic number. Smol sets quality and pixel size, not output bytes, so choose a setting, run one image, check the result, then run the rest.

Here are starting points, labeled as ours, not a standard. Compare the result at 100% zoom.

Quality belongs to Compress. Choosing Convert to turn a HEIC into JPG ignores the quality slider and writes a large file, so use Compress with the output format set to JPG.

Drop the folder onto Smol, set the format, quality and maximum dimension once, and run it. Smol writes a copy of every file next to the original with a _compressed suffix, and by default never overwrites the original.

1. 1

   Collect the post’s images in one folder

   Rename them first. Google asks for short, descriptive file names such as my-new-black-kitten.jpg rather than IMG00023.JPG.

2. 2

   Drag the folder into Smol

   Whole folders and mixed types are fine. HEIC, PNG and JPEG can go in together.

3. 3

   Choose Compress, format and quality

   WebP or JPG at 75 is a sound first pass. Set the maximum dimension to 1600 with fit mode.

4. 4

   Run it and read the per-file sizes

   Smol shows each file’s result. Open the largest output at full size and look for banding in skies and soft edges on text.

5. 5

   Upload the compressed copies

   Give each an alt text that describes the image. Google calls alt the most important attribute.

Got an older archive? Point Smol at the exported library of an old blog and run the same settings across it. For a folder that fills with fresh screenshots, a watched folder can compress new files as they arrive, but it can make files that are already optimized larger, so use it only for unoptimized input.

WebP is the safe default and JPG the universal fallback. Google Search supports WebP and AVIF as well as JPEG and PNG, so none of them blocks image indexing.

AVIF gives the smallest files. In our benchmark of 24 small (768 × 512) film photos, Smol’s AVIF needed 22 to 26% fewer bytes than the best JPEG at the same SSIMULACRA2 score. Using Compress with AVIF output at quality 65 on the same photos as PNG saved 92.1%. These are small test images, not your camera files. Check that your blog platform and email tools accept AVIF before you switch; the AVIF converter page has the details, and PNG to WebP on Mac covers the screenshot case.

Free and built-in options come first, and they are often enough. The table below is fair to each.

Details: the sips command, Smol vs TinyPNG, and every Mac method compared.

• You are on Windows or Linux: Smol runs only on macOS.
• You need pixel-identical, lossless optimization: Smol always re-encodes images, so use ImageOptim for that.
• Your images are SVG: Smol does not handle them.
• You need several widths of one image for srcset: one Smol run makes one size, so separate runs and renaming are needed. Your theme or CDN may build the set for you.
• You want the whole job at build time on a server: look at the Smol API or a build-step library.

Keep the page itself fast

Compression is half the job. Per web.dev, use loading=lazy only for images outside the initial viewport, and add width and height to every <img> so the browser reserves space and the layout does not jump. If your featured image is the LCP element, keep it eager. More on this in image SEO and page speed, and WordPress users can read the WordPress image guide.