Optimizing Images for Size and Search

Why images matter for loading

On many pages, images account for most of the downloaded data. A single photo straight from a phone or camera can be several megabytes, far more than the rest of the page combined. Visitors on slower connections or mobile data may wait for it, and slow pages tend to frustrate readers. Images are also a frequent source of layout shifts and delayed main content, which connect to core web vitals and are a regular cause of poor page speed.

The good news is that image work often produces some of the largest improvements for the least effort.

Start with the right dimensions

The first mistake is uploading an image far larger than it will ever be displayed. If your content column is 800 pixels wide, a 4,000-pixel-wide photo makes visitors download many times more data than they can see. Resize images to roughly the largest size they will appear, allowing for screens with higher pixel density, which may justify an image up to about twice the displayed width.

Better still, use responsive images, where the page offers several sizes and the browser picks a suitable one for the device. Most modern content systems can generate these automatically.

Also set the width and height of each image in the page code. That reserves space so the text does not jump around when the image appears.

Choose a sensible format

Each common format has a typical use:

• JPEG suits photographs. It is widely supported and compresses well.
• PNG suits graphics with sharp edges, text, or transparency, but photographs saved as PNG are usually much larger than they need to be.
• WebP and AVIF are newer formats that typically produce smaller files at similar quality. Support is wide in current browsers but check that your audience and tools handle them, and consider providing a fallback if needed.
• SVG suits logos and simple icons, because it is made of shapes and scales without losing sharpness.
• GIF is rarely a good choice for animation, since short video usually does the job at a smaller size.

When in doubt, use JPEG for photos and SVG or PNG for simple graphics, and move to newer formats when your system makes it easy.

Compress without ruining quality

Compression reduces file size by discarding detail the eye is unlikely to miss. For photos, moderate settings are often visually indistinguishable from the original while being far smaller. Check results by eye: zoom in on an important image and compare. If you see blocky artifacts or smeared edges, back off. Many image editors, free tools and content system plugins can do this in bulk. It is also worth removing unnecessary embedded data, such as camera information, which adds weight without benefit.

Load images in a smart order

Images that appear near the top of the page, especially the main one, should load promptly. Images further down can be loaded only when the visitor scrolls near them, a technique called lazy loading. Most current browsers support this with a simple attribute on the image tag. Do not lazy load the main image at the top, because that can slow the part of the page people see first.

Names, alt text and surrounding text

Search engines cannot see an image as a person does. They rely on clues: the file name, the alt text, the caption, and the words around the image.

• File names: Use short, descriptive names with hyphens, such as red-cedar-raised-bed.jpg instead of IMG_4821.jpg. Skip stuffing in extra keywords.
• Alt text: Write a brief description of what the image shows, in plain language, as if telling someone who cannot see it. Good alt text is valuable to screen reader users first and to search engines second. Decorative images that add nothing can have empty alt text. The topic gets fuller treatment under alt text.
• Captions and nearby text: A caption, or a paragraph that clearly relates to the image, helps put it in context. Put images close to the text they illustrate.

Placement and usefulness

Images should earn their place. A relevant photo, diagram or chart can explain something faster than words, while generic stock pictures add weight without helping. Original images, such as your own photos of a product or a process, tend to be more useful than interchangeable stock ones, though there is no guarantee either way for search.

If images matter to your content, make sure they are included in the page’s HTML rather than only set as a CSS background, since background images are harder for search engines to treat as content. Where relevant, also keep a note about image licensing so that you use only what you have the right to use.

Auditing your images

A quick check on a page:

1. List the largest images and their dimensions versus display size.
2. Note the formats used and whether photos are saved as oversized PNG files.
3. Check for missing or meaningless alt text and file names.
4. Look for images that load above the fold and those that could be lazy loaded.
5. Test the page on a phone connection, if possible, to see how it feels.

Fix the largest offenders first, because a handful of heavy files usually explain most of the problem. Changes of this kind are measurable in a speed test, but outcomes in search results are uncertain, so judge success by faster, clearer pages.