Website Images: Choose the Right Size, Format and Performance Settings
Images make websites more useful and engaging, but oversized files can slow pages down and waste visitors' mobile data. The goal is to deliver an image that looks clear at its displayed size without sending unnecessary bytes.
A practical HoxTools guide for creators, students, website owners and independent professionals.
1. Why Website Image Optimisation Matters
A large image may look excellent on a desktop monitor but be unnecessarily heavy when displayed in a small mobile card. Download time depends on more than image dimensions: file format, compression, network speed, caching and the way the page loads all matter.
Optimisation is a balance. Compressing too aggressively can create visible blur, banding or blocky edges. The right result is the smallest file that still looks good in its real page layout.
2. Choose Dimensions Based on the Display Area
Do not upload a huge original image and rely on the browser to shrink it visually. Estimate how wide the image will appear in the layout and prepare appropriate image sizes. High-density screens may need a source larger than the CSS display width, but sending a very large original to every visitor is wasteful.
| Image use | Practical approach |
|---|---|
| Small card or thumbnail | Create a compact version close to the rendered dimensions. |
| Article image | Match the article content width and preserve the intended aspect ratio. |
| Hero or banner | Prepare a suitable large version and consider a separate mobile crop. |
| Product image | Use consistent dimensions and avoid stretching different-shaped originals. |
| Logo or icon | Use SVG where appropriate, or a correctly sized transparent raster image. |
3. Select the Right Image Format
- JPEG: Often suitable for photographs where a small amount of lossy compression is acceptable.
- PNG: Useful when sharp edges or lossless output are important, and for transparency. Photographic PNGs can be large.
- WebP: A modern format that supports lossy and lossless compression and transparency, and is widely supported by modern browsers.
- AVIF: Can provide strong compression and quality, but check browser support and your fallback strategy for the audience you serve.
- SVG: Suitable for many logos, icons and illustrations because it is vector-based. Only use trusted SVG files and sanitise user-supplied SVG content appropriately.
There is no single best format for every image. Compare the visual quality and file size of realistic samples before choosing a default workflow.
Read web.dev's image performance guidance.
4. Resize and Compress Carefully
Resizing changes the pixel dimensions; compression changes how image data is stored. You may need both. Start from the original file, resize to a sensible output dimension, then adjust compression until the image looks acceptable.
Image optimisation checklist
- Keep an untouched original in case you need to export again.
- Crop only when the composition requires it.
- Resize to the largest size the layout actually needs.
- Compare output quality at normal display size.
- Check file size before uploading.
- Use descriptive filenames and useful alternative text where appropriate.
HoxTools users can explore the online tools directory for available image utilities such as image conversion and cropping. Always review the exported file before replacing a live website image.
5. Use Responsive Images for Different Screens
Responsive images allow a browser to choose from multiple image candidates. In HTML, the srcset and sizes attributes can help the browser select a suitable file for the viewport and layout. The picture element can offer different formats or art-directed crops.
<img
src="/images/article-800.jpg"
srcset="/images/article-400.jpg 400w,
/images/article-800.jpg 800w,
/images/article-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
width="1200"
height="800"
alt="A descriptive view of the subject"
>This is an illustrative example. The file paths, dimensions and sizes value must match your actual design and generated image files. Do not copy the example paths unless those files exist.
Responsive delivery can reduce unnecessary downloads on smaller screens. See web.dev: Serve responsive images.
6. Add Image Loading Hints Thoughtfully
For images that are far below the initial viewport, loading="lazy" can defer downloading until the browser approaches them. Avoid lazy-loading the main above-the-fold image that is likely to be the page's Largest Contentful Paint element. That important image should be discoverable early; in some cases, preload or fetch-priority hints may help, but measure before adding them.
Set explicit width and height attributes where possible so the browser can reserve space and reduce layout shifts. Use meaningful alternative text for informative images. Decorative images can use empty alt text (alt="") so assistive technology can skip them.
7. Common Image Performance Mistakes
- Uploading a full-resolution camera photo for a tiny card.
- Using PNG for every photograph without checking file size.
- Compressing so aggressively that text and faces become unclear.
- Stretching images and changing their natural proportions.
- Lazy-loading the main hero image and delaying its appearance.
- Leaving image dimensions unspecified and causing layout movement.
- Using generic alt text such as “image” for meaningful content.
8. A Repeatable Workflow for Every New Website Image
- Identify where the image appears and its maximum rendered size.
- Prepare the crop and aspect ratio for that location.
- Export a suitable format and compression level.
- Generate smaller responsive variants if the page needs them.
- Add correct dimensions and useful alt text.
- Choose loading behaviour based on where the image appears.
- Test the page on mobile and desktop, then measure performance.
Frequently Asked Questions
Is WebP always better than JPEG?
Not for every image or workflow. WebP often compresses efficiently, but compare the actual output and ensure your site's browser support and fallback approach meet your needs.
What is the ideal image file size for a website?
There is no universal target. It depends on the dimensions, visual complexity and role of the image. Aim for a reasonable file size without visible quality loss.
Should every image use lazy loading?
No. Lazy loading is generally useful for off-screen images. The main image visible immediately when the page opens should not be delayed unnecessarily.
Does image optimisation guarantee a high PageSpeed score?
No. Images are only one part of performance. JavaScript, CSS, fonts, server response, caching and third-party scripts can also affect loading.
Official Resources
Final Thoughts
Good image performance comes from matching each file to its purpose. Resize thoughtfully, choose a format that suits the image, compress without damaging quality and deliver responsive versions where useful. Then test the real page rather than judging the file in isolation.
Image format support, browser behaviour and performance results can vary. Measure your own pages and keep original assets for future changes.
Published by HoxTools. Review the linked official documentation for the latest product-specific requirements.