Smart Home & Tech
How to Optimize Images for Website Speed: A Complete Step-by-Step Guide
Resize, pick a format you have opened, compress once, and set width and height. Skip plugins until you can explain their output.
Optimize an image for a page in a fixed order: measure the slot, resize a copy, pick a format you have opened in a browser, compress once, and write the width and height on the tag. Skip plugin lists and build-tool recipes. They go stale, and this site’s tools already do the file work in the browser without uploading the image.
A smaller image can make that page finish sooner. It is not a ranking result you should claim, and it is not a Core Web Vitals score. Those scores depend on the whole page and on how you measured them.
Step 1: Measure, then resize
Read the box width from your template, not from a chart of typical blogs. The detail is image size for websites. Check the source in Image Information. Resize a copy with Image Resizer, aspect ratio locked. A camera file that is 4000 pixels wide does not belong in a column near 800. Keep the master. If you try twice the CSS width for dense screens, keep that larger file only after you have seen its byte size.
Step 2: Pick the format from a comparison
Photographs that must open in every browser you still support can stay JPG. Compress the resized copy once with Compress JPG. The slider starts at 80 percent, which is only the starting mark, explained in JPEG quality explained. Logos and transparent graphics are the WebP case in WebP or JPG, after you compare bytes and open the file. PNG to WebP is the converter. Do not quote a percent saved until Image Information shows your two files.
These tools do not write AVIF. If another app does, view that file in the browsers you support and keep a JPG or WebP fallback you have also opened. Do not add a format the page cannot display.
Step 3: Put width and height on the tag
The shipped file’s pixel width and height belong on the image element so the browser can reserve the box. Without them, the text below jumps when the photo arrives. Use the resized file’s dimensions, not the master’s. One file is enough until a phone layout is so much narrower that a second, smaller file is worth the extra template work. If you add a second width, reference it on purpose. An unused extra file does not speed the page.
Do not lazy-load the one image at the top of the article if that is the picture people are waiting to see. Loading it later can make the page feel slower. Images below the fold are the ones to delay, using the attribute your template already documents. Do not invent a script.
Step 4: Look once, and do not re-encode
- Reload the page. Look at the image at column width on a desktop and on a phone.
- Confirm the byte size in Image Information matches the file the page is actually requesting. A cached older file can hide a bad export. A hard reload checks that. It does not fix a file that was compressed twice.
- If the picture is damaged, return to the resized copy and raise the slider. Do not save the damaged JPEG again.
- If a WebP shows as a broken icon in one browser, follow WebP not opening and keep the JPG.
Ship when these are true
- Pixel width matches the slot, or twice the slot if you accepted the larger byte size.
- One compression, from the master or the resize, not from a previous export.
- Format opened in the browsers you support.
- Width and height on the tag match the file.
- You looked at the page, not only at a zoomed preview.
Example: one hero, one column photo
A hero is shown about 1200 CSS pixels wide. They resize a copy to 1200, not to the camera’s 4000, compress once, and set width and height to that file. A column photo farther down the article is resized to about 800, or 1600 if the byte size of the doubled file is still modest. They do not generate a 400-pixel file they never reference. They do not install a plugin to do the same resize. The 1200 and 800 figures are this template’s sketch. A theme with a 700-pixel column uses 700. The page is checked by looking at it. No score is recorded because none was measured.
Related guides
Last updated: October 21, 2026
Last reviewed October 22, 2026. Suggest a correction
Questions readers ask
Do I need a plugin or a build step?
Not for a handful of images. Resize and compress in the browser tools, then upload the copy. Add automation only when you can explain what it outputs and you still look at a sample.
Should every image be WebP and AVIF?
WebP only after you open it and compare bytes. AVIF is not produced by these tools. Keep a format you have tested.
What is the right JPEG quality for page speed?
There is no site-wide number. Start from the tool’s 80 percent mark, look at the column, and keep the smallest file that is not damaged. Measure bytes, not a slogan.
Does declaring width and height change the file?
No. It tells the browser how much space to reserve so the layout does not jump. The file still has to be the resized one.
The page is still slow. Should I compress the images again?
No. Check that the page is not still requesting the camera original, and that scripts are not the larger cost. A second JPEG save adds damage.
Sources and methodology
Claims that depend on an outside authority are tied to the references below. Product details change. Confirm the current specification sheet before you buy or install anything.
- Serve responsive images — web.dev (documentation), accessed October 27, 2026. Explains responsive image sizing and its impact on transferred bytes and possible LCP improvement; no score is promised.
- Lazy load images and iframe elements — web.dev (documentation), accessed October 27, 2026. Advises avoiding lazy loading for likely above-the-fold hero images.
- Lossy compression — MDN Web Docs (documentation), accessed October 27, 2026. Explains why repeated JPEG re-encoding can discard additional detail.
Information on this site is for general educational purposes and is not professional advice.
Parent topic: Smart Home & Tech · Related tool: Compress JPG