The modern visual paradigm
- WebP format: Developed by Google. It offers lossless compression 26% smaller than PNG, and lossy compression 34% smaller than JPEG while maintaining the same SSIM (perceived quality) index.
- AVIF format (AV1 Image File Format): The absolute future. Created from the AV1 video codec, AVIF can reduce size by 50% compared to WebP and is ideal for images with overlapping text thanks to its high contrast fidelity.
- Responsive Images (`<picture>`): Do not serve a 4000px image to a user on a smartphone. Using the
srcsetandsizesattributes ensures that the browser downloads exactly the file it needs. - Native Lazy Loading: Use
loading="lazy". Off-screen images are not downloaded until the user scrolls to them, freeing up massive bandwidth on initial load.
Why optimizing images is the quick win with the greatest impact
Loading speed is not just a technical vanity metric; It is a fundamental business metric. According to Google data, increasing the loading time from 1 second to 3 seconds increases the probability of bounce by 32%.
Despite advances in JavaScript or ultra-fast databases, the biggest bottleneck in 90% of the web audits we perform at Focuswebs remains the same: excessive weight of static resources due to unoptimized images.
Until recently, the debate was JPEG vs PNG. Today, that debate is obsolete. WebP already has 96% global browser support, and AVIF has reached a critical mass of support. Switching a website's entire media library to these next-generation formats can reduce page size in half instantly, without any loss of sharpness visible to the human eye.
In addition to format compression, the way we deliver images is vital. The HTML decoding="async" attribute allows the browser to decode the image in a parallel thread without blocking the main rendering of the text. Combined with solid web architecture and good UX practices, visual optimization is the recipe for an impeccable website.
Professional Optimization Pipeline
It is not enough to use Photoshop or a basic WordPress plugin. We apply an automated pipeline of images in our projects (such as those generated with Astro):
| Phase | Focus | Outcome |
|---|---|---|
| 1 | Correct Sizing (Resizing) | We never scale images using CSS. We generate physical versions in multiple resolutions (e.g. 480w, 800w, 1200w) for the srcset. |
| 2 | Metadata Stripping | We eliminate EXIF data, embedded color profiles and geotags that add unnecessary weight to the file. We only leave the essentials. |
| 3 | AVIF Encode and Fallback WebP | We use the <picture> tag by placing <source type="image/avif"> first. If the (old) browser does not support it, it will fall to WebP, and finally to JPEG. |
| 4 | Prevention of Layout Shifts (CLS) | We avoid read breaks by explicitly declaring the numeric attributes width and height directly in the HTML tag. The browser reserves the space before loading. |
| 5 | Delivery by CDN Edge | We serve images through global Content Delivery Networks (CDNs) like Cloudflare, which cache images very close to the user's physical location. |
Results of impacting the Core Web Vitals (LCP)
The move to WebP/AVIF has wonderful side effects on Largest Contentful Paint, Google's core performance pillar:
- Improved LCP (Largest Contentful Paint): The heroic image of the banner loads twice as fast, lowering your LCP to less than the desired 2.5 seconds that Google requires to pass the test.
- Brutal Savings in Server Costs: If you have a high-traffic website, reducing bandwidth consumption by half will save you thousands of euros on AWS or Vercel bills.
- Faster Touch Interactions: By freeing the main thread of the mobile processor (which does not have to decompress giant images), the buttons and menus offer immediate feedback to the touch.
- Eco-Friendly: Less data transferred means less energy consumption in data centers and mobile devices, reducing your company's digital carbon footprint.
Common imaging performance technical questions
If I use `loading="lazy"` on all images, will my website look better?
NO! This is a brutal newbie mistake (Lazy Load anti-pattern). You should never lazy load 'Above The Fold' images (such as the logo or the main banner). By doing so, you prevent the browser from discovering them quickly, destroying your LCP time. It is only used for images that are very low on the scroll.
Do I still need to use SVG if I have WebP?
Yes, unconditionally. SVG is not a pixel image, it is mathematics (vectors). For logos, icons, and flat-color illustrations, SVG will always be infinitely scalable and weigh less than 2KB. WebP/AVIF are reserved exclusively for photographs or complex renders.
Should I ditch JPEG and PNG altogether?
As original source files, keep them. But for web delivery to users, there is no justifiable technical reason in 2026 to continue serving JPEGs if you have AVIF and WebP configured in your build infrastructure (such as Rollup, Vite or Next.js Image Optimization).