SEO
How to Optimize Images for Website Speed and SEO
Prepare images for faster pages: useful dimensions, modern formats, honest file sizes, descriptive names, and alt text. No promise that this will raise rankings by itself.
5 min read
Image optimization is the work of making a picture clear enough for people and light enough for the page. It can improve load time and help search engines understand the image. It does not, by itself, guarantee a higher ranking. Content, links, and the rest of the page still matter.
Use this as a workflow for images you publish, not as a score you can buy.
Why image weight shows up in speed
Browsers have to download an image before they can show it. A multi-megabyte hero photo delays the largest thing on the screen, which is often that photo. That delay is related to Largest Contentful Paint, one of the Core Web Vitals. Interaction to Next Paint reflects how quickly the page responds after a tap or click. Cumulative Layout Shift measures jumps in the layout. A missing width and height on an image is a common cause of those jumps.
Smaller files help the download. Reserved space helps the layout. Neither replaces readable text or a useful page.
Choose dimensions before you chase quality
Decide how wide the image will be in the layout. A photo displayed at 800 pixels does not need a 4000 pixel original in the page. Extra pixels cost bytes even at a strong quality setting.
On this site, resizing is optional and off by default. When you enable it, you can set width and height. With the aspect lock on, editing one side updates the other from the original ratio. Do not enlarge a small image and expect new detail. The tool is for the size you will actually use.
Choose a format on purpose
Photographs usually belong in JPG or WebP. Logos, diagrams, and screenshots usually belong in PNG or a transparent WebP. The comparison is in JPG vs PNG vs WebP.
After you convert, look at the byte size. A modern format that came out larger is not an optimization. Keep the smaller file you are willing to look at.
Names, alt text, and the page
The file name can describe the subject in plain words, such as blue-canvas-sneakers.jpg. That is a hint for people and for image search. It is not a list of keywords.
Alt text describes the picture for someone who cannot see it, and it is read by search engines as a description. Write what is in the image and why it is there. If the image is decorative, an empty alt attribute is appropriate in your HTML. Do not stuff the alt text with repeated phrases.
The visible caption and nearby paragraph should also make sense if the image failed to load.
Do not put the only copy of an important sentence inside the picture. A heading that exists only as pixels cannot be selected, translated reliably, or read by a screen reader. Use real text in the page, and let the image support it.
Responsive images and lazy loading
Serve a size that matches the screen when you can. A common pattern is srcset with a smaller file for narrow screens and a larger one for wide screens. This compressor creates one file per export, so export the sizes you need as separate compressions.
Width and height attributes, or CSS that reserves the aspect ratio, keep the page from jumping when the image arrives. Lazy loading is reasonable for images below the first screen. Do not lazy-load the main image people see immediately. That image should start loading early.
A workflow you can repeat
- Keep the original outside the web folder.
- Resize a copy to the display size with the compressor, or leave the dimensions alone if they are already right.
- Pick JPG, PNG, or WebP for that picture.
- Compress at Balanced or higher, then compare. Drop quality only if you still need fewer bytes.
- If a form or template has a ceiling, try a 100KB or 200KB target and read whether it was achieved.
- For a gallery, run a batch and spot-check more than the first file.
- Rename the download in plain language if the automatic name is vague.
- Add honest alt text in your page, set width and height, and lazy-load only images that are not the first thing on screen.
- Publish and check the page on a phone. Look for overflow, tiny text, and images that load late.
What to measure
Core Web Vitals are field and lab measurements, not a feeling about a slider:
Common “good” targets
| Measure | What it reflects | A common good target |
|---|---|---|
| Largest Contentful Paint | When the main content appears | 2.5 seconds or less |
| Interaction to Next Paint | How fast the page responds to input | 200 milliseconds or less |
| Cumulative Layout Shift | How much the layout jumps | 0.1 or less |
Treat those as targets. A fast connection in one test does not prove every visitor gets the same result. Measure the real page after the images are in it.
Questions
Will optimizing images improve my rankings?
It can help speed and image search. Rankings depend on more than file size. Avoid anyone who promises a position because you compressed a photo.
Should every image be WebP?
No. Use WebP when the file is smaller or you need transparency and your visitors can view it. Keep JPG or PNG when they are the better result.
How small should a page image be?
Small enough to load quickly at the size it is shown, and clear enough to do its job. A 200KB photo can be plenty for a column. A full-width hero may need more. There is no single correct number.
Do I need to lazy-load the hero image?
No. Lazy-load images that are off screen at the start. The first large image should load promptly, with its space reserved so the layout does not jump.
Does this tool add alt text for me?
No. Alt text belongs in your HTML or CMS, written for that picture. The compressor only prepares the file.
Optimize the image, then check the page
Resize to the real display size, choose a format that fits the picture, compress, and describe it in alt text. Then measure the page. File-size technique is covered in reduce image size to 100KB or 200KB, and batch work is covered in compress multiple images.