A large source photograph is useful for editing, but the browser usually needs a much smaller version. Changing its format without resizing it can leave most of the unnecessary download intact.
Choose a format after considering the image’s job. A photograph, a transparent product cut-out, a logo, and an animation have different requirements. Compare the exported files at their intended display size.
Match the format to the content
| Format | Useful starting point | What to inspect |
|---|---|---|
| JPEG | Photographs and continuous-tone images | Compression artefacts, dimensions, and lack of alpha transparency |
| WebP | Photographic or graphic content with lossy or lossless encoding | Visual quality, encoder settings, transparency, and file size |
| PNG | Lossless graphics or transparent raster assets | Whether a large photographic export is unnecessarily heavy |
| SVG | Logos, diagrams, and icons described as vectors | Markup complexity, safe handling, and delivery method |
| GIF | Existing simple animations | Animation weight and whether a video would be more efficient |
These are options to test, not a fixed ranking of formats. A poorly exported WebP can be larger than a well-sized JPEG. A complex SVG can contain more data than expected. Other formats, including AVIF, may also be appropriate in a current image pipeline.
Resize before judging compression
Determine how wide the image will display and provide suitable variants for the layout. A small card should not always request the original multi-megabyte upload. Responsive sources can let the browser choose an appropriate version.
<img src="/images/product-800.webp"
srcset="/images/product-400.webp 400w,
/images/product-800.webp 800w"
sizes="(max-width: 600px) 100vw, 400px"
width="800" height="600"
alt="Blue running shoe, side view">
The paths are illustrative. Check that the actual files exist and that sizes describes your layout. Width and height communicate the image’s aspect ratio; CSS can still make it responsive.
Handle transparency and composition deliberately
PNG and WebP can preserve transparency. JPEG does not have an alpha channel, so exporting a transparent design to JPEG requires a background colour. Inspect the result on both light and dark page backgrounds.
For logos and simple icons, consider SVG delivery. A vector can remain sharp at different sizes, but choosing inline markup versus a separate file introduces its own caching and styling decisions.
Treat animation as a separate download
Turning a short video into a GIF can produce a surprisingly heavy file. Duration, frame rate, dimensions, and colour complexity all affect the output. Do not assume a short animation is a small resource.
Compare an appropriately encoded video when the content is photographic motion. Retain accessible controls or an appropriate static alternative where required, and check how motion behaves for visitors who prefer reduced animation.
Plan conversions without breaking references
For an existing image library, inventory the files and the templates referencing them. Generate variants, update references, and check the pages before removing originals. Background images in CSS and assets generated by plugins can be missed by a simple upload-folder conversion.
The MDN image-format guide documents format capabilities. My page-speed service covers image delivery as part of the rendered page. For catalogue templates, e-commerce SEO also needs the images to remain useful and correctly associated with the products.