AVIF, WebP or JPEG? Image Formats for Visitors on Slow Mobile Connections
Short Answer
AVIF usually compresses best, WebP is a dependable middle option and JPEG remains the safe fallback. Serve them through the picture element, size images correctly and never lazy-load the main image.
Images are usually the heaviest part of a business web page, and mobile visitors feel that weight first. On a weak signal inside a mall, car park or building lobby, a large photo can delay the whole page. Choosing the right image format is one of the simplest ways to reduce that weight. It costs little and suits most sites.
This guide compares AVIF, WebP and JPEG for visitors on slower mobile connections. It uses compression figures from MDN Web Docs and loading guidance from Google's web.dev. It also explains fallbacks, correct sizing and lazy loading, which matter as much as the format itself. Each section ends with a practical step you can apply to your own site this week.
Which image format compresses best?
AVIF generally produces the smallest files for photographs at similar visual quality. MDN's image format guide says lossy AVIF images are around 50 percent smaller than JPEG. It reports lossy WebP images as 25 to 35 percent smaller than comparable JPEG images.
Those averages vary with the image, so test your own photos rather than relying on a single figure. Graphics with text or sharp edges may behave differently from photographs. A quick comparison in a tool such as Squoosh shows real file sizes before you change your whole library.
Quick Answer
AVIF usually gives the smallest photo files, with MDN citing roughly 50 percent savings against JPEG. WebP typically saves 25 to 35 percent, so test your own images before committing.
Why do you still need fallback formats?
Not every browser in use supports every modern format, especially on older phones and tablets. MDN advises providing fallbacks for AVIF and WebP using the picture element. A browser that cannot read a format will skip it and choose the next listed option it supports.
The picture element lists sources in order of preference, ending with a standard image tag. A common pattern offers AVIF first, then WebP, then a widely supported JPEG fallback. MDN notes that two or three sources are usually enough for most images on a page.
Quick Answer
Use the picture element to offer AVIF first, WebP second and JPEG last. Browsers choose the first format they support, so visitors on older phones still see every image correctly.
Does AVIF have any drawbacks?
AVIF files can take longer to encode, which matters when a site generates many images automatically. MDN also notes that AVIF does not support progressive rendering. A progressive JPEG can show a rough version first, while an AVIF appears only once it has loaded.
On very slow connections, that difference can make a large hero image feel slower even when it is smaller. Test both formats on the images that appear first on your most important pages. For product catalogues, our guide to image CDNs versus self-hosting covers automated conversion.
Quick Answer
AVIF can be slower to encode and does not render progressively, according to MDN. Test hero images in both AVIF and WebP on a throttled connection before choosing a format.
How big should images be for mobile screens?
Format alone cannot fix an image that is far larger than the screen showing it. Serve several widths with the srcset attribute so phones download smaller files than large desktop screens. A photo displayed at phone width should not arrive at the full camera resolution.
Set a size budget for your key images and check pages against it regularly after updates. Chrome DevTools can throttle the network to simulate a slower mobile connection during testing. Our guide to why websites are slow on mobile lists other common causes worth checking.
Quick Answer
Serve several image widths with srcset so phones download smaller files than desktops. Set a size budget for key images and test important pages regularly with Chrome DevTools network throttling.
Which images should load first, and which later?
The main image in the first screen should load immediately, without lazy loading. Google's web.dev guidance on lazy loading says not to lazy-load images likely to be in the initial viewport, especially the LCP image. Use lazy loading only for images further down the page.
Google's web.dev guidance also recommends adding width and height attributes to every image tag on the page. Those attributes let the browser reserve the right space and avoid layout shifts while images load. Our guide to image-heavy portfolio sites shows how this works on galleries.
Quick Answer
Never lazy-load the main image visible on first load, as web.dev advises for LCP images. Lazy-load lower images only, and always add width and height attributes to every image tag.
Main Takeaways
AVIF usually compresses photographs best, and WebP is a dependable middle option with broad support. Serve both through the picture element, always with a JPEG fallback for older browsers. Size images for each screen using srcset, and test key pages on throttled mobile connections. Never lazy-load the main first-screen image, and always set width and height attributes on every image.
Fix the heaviest images first
Open your most visited page on a phone using mobile data and note which image appears first. Check its file size, format and dimensions against the space it actually fills. Convert it to AVIF or WebP with a JPEG fallback, then serve correctly sized versions. Repeat for the next heaviest images until each key page loads quickly on mobile data.
Auronix provides SEO and performance services for UAE websites, including image optimisation and Core Web Vitals fixes. Send us the three pages that matter most to your enquiries and sales. We will measure them, convert and resize images, and confirm the improvement on a real mobile connection. Request a free quote to start with your homepage and main service page.
Sources & References
FAQs
Questions readers usually ask next
These FAQs are written to match the topic of this post and to help readers move from understanding to action.
Is AVIF better than WebP for every image?
Not always, because results vary by image type and content. AVIF usually wins on photographs, but test graphics, logos and screenshots separately before converting your image library to one format.
Do all browsers support AVIF now?
MDN lists support in Chrome, Edge, Opera, Safari and Firefox, but older devices may lack it. Provide WebP or JPEG fallbacks through the picture element so every visitor sees images.
Should I still keep JPEG versions of my images?
Yes, keep JPEG as the final fallback inside the picture element. It protects visitors on older browsers and gives you a widely supported master file for printing and other uses.
How much smaller is WebP than JPEG?
MDN reports that lossy WebP images are on average 25 to 35 percent smaller than JPEG images of similar visual quality. Your own savings will depend on each photo's content.
Does image format affect Core Web Vitals?
Smaller images can help the largest contentful paint load sooner, especially on mobile. Correct sizing and avoiding lazy loading for the main image matter just as much as format choice.
Should the hero image be lazy-loaded?
No, web.dev advises against lazy-loading images likely to appear in the initial viewport, especially the LCP image. Lazy-load only images that sit further down the page, below the first screen.
Why do width and height attributes matter?
They let the browser reserve space before an image loads, which prevents content from jumping around. web.dev recommends adding width and height attributes to all image tags on every page.
Can WordPress serve AVIF automatically?
Recent WordPress versions and many image plugins can generate modern formats automatically. Check your hosting supports the conversion, and confirm fallbacks still work before switching every image on the site.
How do I test images on a slow connection?
Use Chrome DevTools network throttling to simulate a slower mobile connection, then reload key pages. Watch closely when the main image appears and how large each downloaded image file is.
Can Auronix optimise images on my website?
Yes, Auronix can convert, resize and serve your images with correct fallbacks and loading rules. We measure page speed before and after, so the improvement is visible in real numbers.
Related Resources
Need your website to load faster on mobile?
We help UAE businesses remove weight, simplify templates, and improve Core Web Vitals without breaking the site structure or search intent.
Built for search-ready UAE websites that need faster pages, clearer journeys, and stronger conversion rates.
