Image Optimization for Blogs: A Practical HTML and Performance Checklist

A blog image can explain a complicated idea in seconds. It can also become the heaviest resource on the page.

Image optimization involves several decisions: choosing useful visuals, exporting suitable files, delivering the right resolution, and controlling when the browser loads them.

Here is a practical workflow for developers and bloggers who want sharper images without unnecessary downloads.

Disclosure: I run Shiva Lord Image, which publishes the two supplementary guides linked below.

1. Start with an image that helps the reader

Before compressing anything, ask what the image contributes.

A screenshot should show the interface relevant to the instructions. A diagram should explain a relationship that would take longer to describe in text. Decorative images should earn their place.

For screenshots:

• Capture only the relevant window or interface.
• Remove personal information, API keys, and account details.
• Crop empty space.
• Keep labels readable at the size readers will actually see.

If you use an image from elsewhere, establish its source and permission for reuse. Finding it in a search engine does not establish ownership or a license.

The image search techniques guide on Shiva Lord Image explains ways to investigate earlier appearances and image context. Treat reverse-search results as clues, then verify permission at the source.

2. Compare formats using the actual image

There is no single winning format for every visual.

Useful starting points include:

• PNG: screenshots and graphics where preserving exact details matters.
• SVG: suitable vector illustrations, diagrams, and icons.
• WebP or AVIF: candidates worth comparing for photographs and other raster images.
• JPEG: another option for photographic content.

Compare exported files visually and by size. A photograph and a screenshot containing small text can respond very differently to the same compression settings.

MDN’s image format guide provides a useful reference.

3. Resize deliberately, then compress

A 4,000-pixel-wide source image does not need to be the only file available for an 800-pixel article column.

However, exporting everything at exactly 800 pixels can make images look soft on higher-density displays. Keep the original and generate appropriate variants.

For example:

• 480 pixels for smaller layouts.
• 800 pixels for the article column.
• 1,600 pixels when a higher-resolution version is useful.

These are example sizes, not universal requirements.

After resizing, compress the variants and inspect text, gradients, edges, and transparency.

For a more detailed introduction, the PNG optimization guide covers resizing, compression, and checking the exported result.

4. Give the browser responsive image candidates

Use srcset to describe available files and sizes to describe their expected display width.

This example assumes an article column capped at 800 pixels with 16-pixel margins on smaller screens:

<img
  class="article-image"
  src="/images/dashboard-800.webp"
  srcset="
    /images/dashboard-480.webp 480w,
    /images/dashboard-800.webp 800w,
    /images/dashboard-1600.webp 1600w
  "
  sizes="(max-width: 832px) calc(100vw - 32px), 800px"
  width="1600"
  height="900"
  loading="lazy"
  alt="Analytics dashboard showing weekly visits by traffic source"
/>

.article-image {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin-inline: auto;
}

Create the referenced files before using this example. Each width descriptor must match its file’s actual width, and the variants should share the intended aspect ratio.

Adjust sizes to match your layout. The browser uses these hints together with device conditions to choose a candidate.

See MDN’s responsive images guide for more examples.

5. Give important images different loading behavior

The previous example is intended for an image farther down the article.

An important image visible when the page opens needs different treatment. If the hero image is the Largest Contentful Paint element, avoid lazy loading it.

For example:

<img
  class="article-image"
  src="/images/article-hero.webp"
  width="1600"
  height="900"
  fetchpriority="high"
  alt="Diagram of an image optimization workflow"
/>

Use high priority selectively. Marking every image as important removes the distinction.

The web.dev LCP guide explains why delayed discovery and loading can hurt performance.

6. Preserve layout and write useful alternatives

Explicit width and height attributes let the browser reserve space before an image arrives. Responsive CSS can still scale it.

For meaningful images, write alternative text that communicates their purpose in context. Avoid filling it with keywords.

For a purely decorative image, an empty alternative can be appropriate:

<img src="/images/divider.svg" alt="" />

A complicated chart may also need a nearby explanation or data table.

7. Verify the delivered page

After publishing to a test environment:

1. Open the page at mobile and desktop widths.
2. Inspect image requests in the browser’s Network panel.
3. Confirm that suitable variants load.
4. Check for visible movement as images appear.
5. Identify the LCP element.
6. Compare repeated measurements under consistent conditions.

Keep a small record of the original file, optimized file, transferred size, and visual result. That makes future decisions easier to evaluate.

Which image problem appears most often in your projects: oversized screenshots, incorrect responsive sizes, or a hero image that loads too late?

---

AI disclosure: This article was drafted with AI assistance.