TL;DR: Website images should be delivered at the size visitors actually need, compressed efficiently and described accessibly. For most business websites, use WebP or AVIF for photographs, SVG for suitable logos and icons, and PNG only when you genuinely need lossless detail or transparency. Always include dimensions, responsive image sizes and meaningful alt text.
Images often account for most of the data downloaded on a business website. A photograph exported straight from a camera may be several megabytes even though it is displayed at only a fraction of its original size. That wastes bandwidth, delays the page and makes the site feel sluggish—especially on mobile connections.
Good image optimisation is not about making every file as small as possible. It is about finding the smallest file that still looks right in its intended context. That balance supports a faster mobile experience, clearer visual presentation and better accessibility.
Choose the Right Image Format
WebP is a strong default for photographs and many web graphics. It supports lossy and lossless compression, transparency and animation, and it is supported by current versions of all major browsers.
AVIF can produce even smaller photographic files at comparable quality. It is also supported by current Chrome, Edge, Firefox, Opera and Safari releases. Older devices may still need a WebP or JPEG fallback, so AVIF works particularly well when your website or image CDN can choose the right format automatically.
JPEG remains a dependable fallback for photographs. PNG is useful for lossless graphics, screenshots and transparency, although WebP or AVIF will often be smaller. SVG is usually best for simple logos, icons and diagrams because it stays sharp at any size. Avoid treating GIF as the default for animation; animated WebP, AVIF or video will frequently perform better.
Formats such as JPEG XR, FLIF and BPG are not practical mainstream choices for ordinary websites. Browser support and publishing workflows matter just as much as theoretical compression.
Resize Before You Upload
Do not upload a 5,000-pixel-wide photograph when the largest version displayed on the site is 1,600 pixels. Export close to the largest size the design requires, while allowing enough resolution for high-density screens. Keeping an enormous original in your media library does not improve the version visitors see; it simply increases storage and processing work.
WordPress normally creates several image sizes automatically. A well-built theme then uses srcset and sizes so the browser can choose an appropriate file for the visitor’s screen. Check the rendered page rather than assuming this is working. The browser should not download the desktop hero image for a narrow mobile card.
Compress for the Intended Use
Photographs tolerate lossy compression well. Product images, illustrations with text and screenshots may need a higher quality setting or a lossless format. Compare the exported result at the size it will actually appear. If fine details look smeared or text develops halos, increase the quality or choose a more suitable format.
Compression tools and WordPress optimisation plugins can automate much of this work, but test their output and keep recoverable originals. Running several optimisation plugins at once can create duplicate files, conflicting rewrites and unnecessary processing.
Use Responsive Images and an Image CDN
Responsive images allow one image to be supplied at several widths. The browser selects the most suitable candidate instead of downloading the largest version every time. An image CDN can go further by resizing, compressing and converting files at the edge for each device.
A CDN is useful for image-heavy sites or visitors spread across different countries, but it cannot compensate for poor source material or broken layout rules. Start with sensible dimensions and compression, then use delivery technology to refine the result. This belongs in the same ongoing routine as keeping a website healthy after launch.
Prevent Layout Shifts
Add accurate width and height attributes, or reserve the correct space with CSS. This lets the browser calculate the layout before the image arrives and prevents text and buttons from jumping around during loading. It is a small technical detail with a noticeable effect on user experience.
Use lazy loading for images below the fold, but normally allow the main hero or other likely Largest Contentful Paint image to load immediately. Lazy-loading the most important above-the-fold image can make the page appear slower rather than faster.
Write Useful Alt Text
Alt text should communicate the purpose or relevant content of an image to someone who cannot see it. Describe informative images briefly and naturally. Use empty alt text for purely decorative images so screen readers can skip them. Do not stuff keywords into alt text, and do not begin every description with “image of”.
A product photograph might use “Handmade limestone table lamp with a cream shade”. A decorative background texture should usually use an empty alt="". If a chart contains important information, explain its conclusion in the surrounding text as well.
Use a Practical Publishing Checklist
- Crop and resize the image for its real placement.
- Choose WebP or AVIF for most photographs, with a fallback where your audience needs one.
- Use SVG for suitable icons, logos and diagrams.
- Compress the result and inspect it at its displayed size.
- Confirm responsive variants are being delivered.
- Add width and height so space is reserved before loading.
- Lazy-load below-the-fold images, not the primary hero image.
- Write meaningful alt text where the image conveys information.
- Use a descriptive filename before uploading.
Image optimisation supports performance, accessibility and search visibility, but filenames and formats are only part of the picture. The image must still help the reader. That is why it should be considered alongside the broader process of writing useful, well-structured website content.
For a detailed technical comparison of format capabilities and current browser support, consult the MDN image format guide. Browser support changes, so guidance tied to a specific year should be checked rather than copied indefinitely.