Guides and tutorials · Guides and tutorials
Optimising images for websites properly
Images shape the impression a website makes and can also transfer a large amount of data. Suitable subjects, dimensions and formats support usability without unnecessarily sacrificing visible quality.
This guide takes you from image selection to mobile checks. It puts JPG, PNG, WebP and AVIF in context and explains what matters for file size, alternative text and loading behaviour.
Choosing a suitable image
A good website image supports the content and suits its placement. First establish what visitors should recognise: a product detail, a person, a situation or a mood. Avoid generic imagery unrelated to the message. For informative graphics, the central information must also be conveyed clearly through an additional means.
Clarify usage rights before uploading. A photograph found online is not automatically authorised for your website. Check the licence, permitted use, attribution requirements and restrictions, and record its origin internally. For images of people, establish whether the necessary permissions have been obtained.
Choose an image in context: a wide header image needs a different crop from a square product photograph. Google recommends placing images within meaningful page content. Google Search Central documents image SEO basics but does not guarantee a particular ranking.
Do not choose an image solely for its appearance. It should support the section’s message and suit its surroundings. Check that important details remain recognisable in a small preview area. For team or product images, it also matters that the depiction is current and no unintended background elements distract.
Where necessary, document the image source and usage conditions somewhere suitable for your team. This makes later questions easier to answer when an image is replaced or reused. An image supplied for one purpose is not automatically permitted for every other channel or edit. Clarify outstanding usage questions before uploading.
Dimensions, file size and cropping
Pixel dimensions should suit the display area. A very large original image in a small card often transfers more data than necessary. An image that is too small, however, can look blurred on large screens. Ask about your website platform’s intended image sizes or check the actual display.
File size affects the amount of data transferred. Resize the image to sensible dimensions and compress it until the visible quality is sufficient for its purpose. Check fine details, text within graphics and colour gradients. Excessive compression can cause visible artefacts.
Aspect ratio describes the relationship between width and height. Forcing an image into a different frame can make it look squashed or poorly cropped. Create a suitable crop where possible. For hero images, check that the main subject remains visible on mobile devices.
Always edit a working copy if you need to preserve the original. First adjust the dimensions to suit the intended use, then check compression. Stronger compression can create visible artefacts in fine lines, gradients or lettering. Compare the output in the actual page layout, not just a small file thumbnail.
Cropping is part of the design. Decide which subject should be the focus and check whether automatic cropping could shift it. A consistent crop helps with recurring cards or product images, but it must not cut off important content. Check the presentation in the intended layouts and at narrow widths.
Understanding JPG, PNG, WebP and AVIF
JPG often suits photographs with many colour gradations. PNG can be useful for transparency or crisp edges. WebP supports different compression methods and can be a good web option in many cases. AVIF offers modern compression capabilities; its suitability depends on the system and image delivery.
No single format is ideal for every image and platform. Consider whether your content management system accepts the format, whether older environments need to be supported and whether an alternative output is available. Check the file after uploading. A modern format alone does not guarantee a faster page.
The guidance from web.dev on image performance covers appropriate image dimensions and the amount of data transferred. Practical checks of the specific image and website remain essential.
| Format | Suitable use | Advantage | Point to check |
|---|---|---|---|
| JPG | Photographs | Small files with suitable compression | Compression artefacts and quality |
| PNG | Graphics or transparency | Can provide crisp edges and transparency | Files can be large for photographs |
| WebP | Photos and graphics on the web | Can provide efficient compression | Check system support and output |
| AVIF | Modern image delivery | Can enable small file sizes | Clarify compatibility and fallback |
File size and compatibility with your content management system matter when choosing a format. A modern format is not automatically suitable if uploading it is unsupported. If you are unsure, ask which formats the website processes. Keep a high-quality source file so future crops do not have to be made from a compressed copy.
Responsive images and mobile checks
Responsive images account for an image appearing at different screen sizes and in different layouts. A website platform may deliver suitable versions automatically. Ask before changing technical settings. The aim is to avoid unnecessarily large files for small areas while retaining sufficient quality.
On a mobile phone, check the crop, sharpness and loading behaviour. An image may look balanced on desktop but lose its main subject on a narrow screen. In a header image, the essential content must remain quickly recognisable and must not displace important controls.
Images that convey important content need suitable alternative text. The MDN documentation for the img element explains embedding and attributes. Describe the purpose in context rather than listing every detail. Decorative images should not be overloaded with unnecessary text.
Request a website analysis if you would like your image quality and loading behaviour reviewed.
Send a non - binding enquiryFilenames, alternative text and loading behaviour
A clear filename helps you find media again later. Use short, descriptive words instead of automatic number sequences where practical. The filename does not replace alternative text or guarantee a better search position.
Alternative text is intended for people who cannot see the image or have image display disabled. Briefly describe the information the image conveys within the section. For a linked image, the link’s purpose may matter more than a description of the subject alone. Do not repeat a caption without adding value.
Depending on the website, images below the visible area can be loaded later. Lazy loading can avoid unnecessarily early requests. An important hero image has a different role and should not be delayed as a blanket rule. Check the specific setting in the context of your platform.
A four - step process
- Prepare
Clarify the goal, responsibilities and affected area before making changes.
- Implement
Edit only the necessary content and use the intended settings.
- Check
Carefully review the preview, links, readability and mobile presentation.
- Approve
Publish only after the necessary checks and record your changes.
Lazy loading means suitable images are loaded only when they are needed further down the page. This can be useful for images placed lower down. A prominent hero image at the top of the page, however, should not be delayed without careful thought, as it forms part of the first visible content. Where possible, leave technical attributes to the platform or have their behaviour checked rather than changing values without understanding the implementation.
Assess quality and loading behaviour together: a smaller image is no improvement if details become unreadable, and a very large original is not automatically better. On a mobile device, check that the subject is quickly recognisable, the crop is right and unnecessary empty space does not dominate. Alternative text complements the image’s content-related purpose; it should not consist of filenames or strings of keywords.
Quality, loading time and optimisation
The overall result depends on the subject, dimensions, compression, delivery and layout. A single image is not always the cause of a slow page. Compare changes under similar conditions and examine several page areas. The recommendations from web.dev explain how appropriately sized images affect the amount of data transferred.
A reusable before-and-after graphic with a neutral sample image can show the difference between an oversized file and a suitably prepared one. Use the same crop so file size is not confused with a change in composition. Customer files are not needed for this.
Get expert support if images remain blurred, are cropped poorly or the platform does not provide suitable output. A website analysis can examine image quality and loading behaviour together. Results depend on the whole page and technical conditions. Website analysis. Also make sure image rights and responsibility for future updates are documented. A repeatable selection and checking process is often more useful day to day than a one-off optimisation with no clear responsibility. For important images, also check that they retain the right focus on small screens and that the surrounding text provides understandable context.
Checklist before completion
Tick items off · local only, not saved
0 of 6 items completed
Summary
- Plan changes to suit their intended purpose.
- Check content, presentation and links before publication.
- Consider mobile devices and accessibility.
- Clarify rights, responsibilities and technical limits.
Frequently asked questions
Which image format is best?
That depends on whether it is a photograph, graphic or image with transparency. Also check which formats your content management system supports.
How large should a website image be?
Base pixel dimensions on the actual display and website requirements. A very large original is not automatically better.
Is WebP always better than JPG?
Not in every workflow. WebP can be efficient, but image content, quality requirements and technical support must be considered together.
What is the difference between image size and file size?
Image size usually means pixel dimensions: width and height. File size describes the amount of data transferred.
Does every image need alternative text?
Images that convey important content need a suitable description. Purely decorative images should not have unnecessary text.
Should every image use lazy loading?
Not as a blanket rule. Images far below the visible area can be loaded later, but an important hero image should not be unnecessarily delayed.
Sources
- Image performance | web.devGoogle · checked on 2026 - 11 - 05
- <img> HTML image embed element - HTML | MDN MDN · checked on 2026 - 11 - 05
- Image SEO Best Practices | Google Search Central | Documentation | Google for DevelopersGoogle Search Central · checked on 2026 - 11 - 05
Back to the top of the article
