1. Serve the right dimensions
Do not upload a picture much larger than the space it fills. A phone photo can be 4000 pixels wide, but if your layout shows it in a 800 pixel column, the browser still downloads every extra pixel and then throws most of them away.
Resize first, then compress. For a layout that shows an image at 800 pixels wide, it is often sensible to export around 1600 pixels wide so it stays sharp on high-density screens, but rarely more than that.
2. Choose an efficient format
Use WebP or JPG for photos, and PNG or WebP for graphics with transparency. Use SVG for simple logos and icons, because it scales to any size from a small file.
WebP files are often noticeably smaller than JPG or PNG at similar visual quality, and current browsers generally support it. PNG is best kept for sharp graphics, screenshots and images that need exact colours.
3. Compress
Use a quality of about 75 to 85 percent for photos. Compare the result with the original at full size to confirm it still looks good, paying attention to smooth gradients, skies and skin tones where artefacts show first.
Lower quality saves more space but there is a point where blockiness appears. Stop just before you can see it. If you are unsure, pick the higher quality for the main image and a lower one for small thumbnails, where flaws are harder to notice.
4. Load only what is needed and reserve space
Add the loading="lazy" attribute to images below the fold so they load when the visitor scrolls near them. Do not lazy-load the main image at the top of the page, because that would delay the most visible content.
Give each image width and height attributes so the browser can reserve space before the file arrives. This prevents the page from jumping as images load, which is annoying when someone is trying to read or tap a button. The same attributes also help the browser work out the right proportions when CSS makes the image fluid.
A worked example (illustrative)
Imagine a blog post with a hero photo straight from a camera: 4000 by 3000 pixels, a JPG of several megabytes. The page shows it at 900 pixels wide.
Resizing to 1800 pixels wide would usually cut the file to a small fraction of its size. Compressing at about 80 percent and converting to WebP often shrinks it further. The result might be a few hundred kilobytes instead of several megabytes, with no visible difference at the size it is displayed. Exact numbers vary from photo to photo, so always check your own file.
Step-by-step workflow
- Find the largest displayed size of the image on your page.
- Resize the original to roughly twice that width, or the displayed width for small screens only.
- Convert to WebP or JPG, and compress at about 75 to 85 percent.
- Compare against the original and lower the quality only while it still looks the same.
- Add width, height and, below the fold, loading="lazy" in your page.
- Reload the page and check that nothing looks blurry or shifts around.
Test your pages with a tool such as PageSpeed Insights before and after, and look at the largest image on the page first. Small changes to that single image often make the biggest difference.
Common mistakes
- Compressing an already heavily compressed JPG again and again, which adds visible damage each time. Always start from the original.
- Lazy-loading every image, including the one at the top.
- Using PNG for photos, which usually creates very large files.
- Scaling images down with CSS only, so the browser still downloads the full file.
- Leaving out width and height, which causes layout jumps.
Quick checklist
- Right dimensions for the layout
- WebP or JPG for photos, SVG for simple logos
- Quality around 75 to 85 percent, checked by eye
- Lazy loading below the fold only
- Width and height set on every image
- Pages tested before and after
Doing it with DoneImg in your browser
Open the Resize tool, set the width you need and download the result. Then open Compress, choose WebP or JPG and adjust the quality slider while watching the file size. If you need a different format, the Convert tools handle JPG, PNG and WebP.
Everything runs in your browser, so your pictures are processed on your own device and nothing is uploaded to a server. That makes it a safe way to prepare unpublished product photos or client images. You can repeat the same steps for each image on a page, and keep the originals in a separate folder in case you need to export them again at a different size later.