Key takeaways
- Large images are the most common reason a page loads slowly.
- Resize images to the size they are shown, then compress them.
- Use modern formats such as WebP, and write clear alt text.
The short answer
A photo straight from a phone can be several megabytes, and a page with a few of them can feel painfully slow, especially on mobile data. Visitors leave slow pages, and search engines notice. The cure is simple: make images the right size, compress them and use sensible formats. This guide shows how, and it fits with the broader advice in website speed.
Step 1: Resize to the display size
- Find out how wide the image appears on your page. For a typical article, 1200 pixels is usually enough for a main image.
- Sending an image that is much bigger than needed wastes data.
- For sharp images on high-density screens, use about double the display width, but not more.
- Crop out parts you do not need.
Step 2: Choose the right format
| Format | Use for |
|---|---|
| WebP | Most website images. Usually smaller than JPG or PNG |
| JPG | Photographs when WebP is not available |
| PNG | Logos and images that need transparency |
| SVG | Icons and simple logos |
See file formats explained for more about formats.
Step 3: Compress
- Quality settings of about 75 to 85 percent often look nearly identical to the original but are much smaller.
- Free tools such as Squoosh, TinyPNG and the export options in photo editors can compress images. For free software, see free and open-source tools for musicians.
- A target of a few hundred kilobytes for a large image, and less for small ones, is a useful guide.
- Compare before and after at full size to be sure that quality is acceptable.
Step 4: Help the browser
- Add the width and height of each image to your page so the layout does not jump.
- Use lazy loading for images below the first screen. In HTML this is the loading="lazy" attribute.
- Use a content delivery network or caching where your host offers it.
- Do not use image files as text. Use real text and let the browser draw it.
Step 5: Name and describe
- Give files clear names, such as “studio-microphone-setup.webp”.
- Write alt text that describes the image for people who cannot see it and for search engines.
- Keep your original files safely in a separate folder. See how to back up your phone and laptop.
Check your results
- Open your page on a phone using mobile data.
- Run a free tool such as PageSpeed Insights from Google to see which images are too large.
- Fix the biggest images first.
- Check again after the changes.
- Watch your data use if you test on mobile. See saving mobile data.
For WordPress users
Many WordPress sites have plug-ins that compress images when you upload them. Use one well-reviewed plug-in rather than several, and keep your site updated. See WordPress for beginners and WordPress security checklist.
Quick checklist
- Resize to the size you display
- Use WebP, JPG or PNG correctly
- Compress with a quality around 75 to 85 percent
- Add width, height and lazy loading
- Write clear alt text
- Test on a phone
Key points to remember
Smaller images mean faster pages and happier visitors. It takes a few minutes per image and pays off on every visit.
This guide is general information to help you decide and act with confidence. Features, prices and settings change, so confirm current details with your device maker or service provider before you act. Last reviewed October 2026. Read our editorial standards.
