How to Reduce Image Size for Faster Websites
A step-by-step approach to shrinking images for web pages: resize, choose a format, set quality, and check the result.
Why image size matters
Images are typically the heaviest part of a web page. Large images slow loading, especially on mobile connections, and slow pages lose visitors and rank worse in search results, since page experience is a factor Google considers. Reducing image weight is usually the easiest speed improvement a site owner can make, and it needs no coding.
Step 1: resize to the size you display
A phone photo may be 4000 × 3000 pixels, while your page shows it in a column about 800 pixels wide. Browsers downscale it, but the visitor still downloads every pixel. Use the Image Resizer to set the width to roughly what you need. To keep the image from looking soft on high-density screens, use about 1.5 to 2 times the displayed width. Keep the proportions: for a 4:3 photo, a width of 1200 means a height of 900.
Step 2: choose the right format
Photos work best as WebP or JPEG. Logos, icons and screenshots work best as PNG or lossless WebP. If you only have a PNG photo, converting it to WebP or JPEG with the Image Converter often cuts size by 70 percent or more. Our guide to PNG, JPG and WebP covers the trade-offs in detail.
Step 3: set a sensible quality
Use the Image Compressor and start around 75 to 80 percent. Look at the result at 100 percent zoom, focusing on smooth areas like sky and on fine details like text or hair. If it still looks clean, try 70. Stop where you first see blockiness or fuzzy edges, then go back up a little. The savings flatten out below about 60 percent, while the quality loss accelerates.
Step 4: check and compare
Compare the final file with the original: both the visual quality and the size. As a rough guide, a full-width web photo should usually be under 200 KB, and a thumbnail under 30 KB. Very large hero images can be a little bigger, but each extra 100 KB adds noticeable delay on a slow connection.
Further habits
Give images descriptive file names such as red-bicycle-front-view.webp, and always write alt text that describes the image for screen-reader users. Add width and height attributes in your HTML so the layout does not jump while images load, and use loading="lazy" on images below the first screen. Keep your original files in a separate folder, so you can export again later at other sizes without compounding quality loss.
Serving the right size to the right screen
A single image is rarely right for every device. A phone showing a 400-pixel column does not need a 1600-pixel file. Modern HTML lets you list several versions with srcset and sizes, so the browser picks the smallest suitable one. At minimum, export two or three widths, for example 480, 960 and 1600 pixels, using the Image Resizer, and reference them in the markup.
Also remember high-density screens. An image shown 600 pixels wide should be about 1200 pixels wide to look sharp on a phone with twice the pixel density, but there is little benefit above that.
Performance numbers that matter
Google's Core Web Vitals measure real-user experience. Largest Contentful Paint (LCP), often your biggest image, should happen within 2.5 seconds on a typical visit. Cumulative Layout Shift (CLS) should stay under 0.1, which is why you give every image fixed width and height attributes: the browser can reserve space before the file arrives. Interaction to Next Paint (INP) should be under 200 milliseconds, and heavy scripts, not images, usually cause problems there.
Do not lazy-load the main image at the top of a page, as that can slow LCP. Do lazy-load the images further down.
A repeatable checklist
1. Keep the original. 2. Resize to the largest size you will display. 3. Choose WebP or JPEG for photos, PNG or SVG for graphics. 4. Compress to the lowest quality that still looks clean. 5. Name the file descriptively and write alt text. 6. Set width and height. 7. Check the page on a phone with a slow connection. Doing this for every image keeps your site fast as it grows, which helps both visitors and search rankings.