SVG, WebP or AVIF: How Image Format Speeds Up Your Site and Boosts SEO
Image optimization is the highest-return thing you can do for your site's loading speed — in practice, images account for more than half the total weight of an average web page. Choosing between JPG, PNG, SVG, WebP and AVIF directly determines how fast your site opens, and therefore how Google ranks it. In this guide we walk through each format, when to use which, and how to automate the whole process — the same approach we use in our web development service when optimizing client sites.
Table of contents:
Why images are the biggest speed killer
When a site is slow, the prime suspect is almost never the server or the code — it's the images. In practice, images make up more than half the total "weight" of an average web page, and a single hero photo straight from a phone or camera weighs 4–8 MB. For comparison: the entire HTML, CSS and JavaScript of an average site combined often weighs less than one such image. Put three unoptimized photos on your homepage and the site takes over ten seconds to load on a mobile network.
Google measures this very concretely through Core Web Vitals, above all through LCP (Largest Contentful Paint) — the time until the largest element on the screen appears. On most sites, that largest element is an image. Slower images mean a worse LCP, and a worse LCP means weaker rankings. We explained how this whole mechanism works in detail in our article on Core Web Vitals and site speed.
JPG and PNG: a legacy from the nineties
JPG has been around since 1992, PNG since the mid-nineties. JPG compresses photos reasonably well, but at stronger compression it produces visible blocks and noise around edges. PNG preserves transparency and sharp edges, but it's a terrible choice for photos — the same image in PNG can be five to ten times larger than in JPG. They're not bad formats; they were just built for an internet that no longer exists. Today we have formats that do the same job with far fewer kilobytes.
WebP: the standard for 2026
WebP is a format developed by Google that has since become the default choice for the web. At the same visual quality, a WebP file is typically around 30% smaller than a JPG. On top of that, it supports transparency (like PNG) and animation (like GIF), so one format replaces three old ones.
Browser support stopped being a question long ago — Chrome, Firefox, Safari and Edge have all read WebP for years. If your site is still serving JPG and PNG files in 2026, your visitors are downloading kilobytes nobody needed to send them, and you're paying for it with a slower site and a weaker position on Google.
A real-world example: a 2.4 MB hero photo in JPG, after being resized to its actual display width and converted to WebP, drops to 150–250 KB. Ten times smaller, with no difference anyone would notice with the naked eye.
AVIF: a step beyond WebP
AVIF is a newer format, derived from the AV1 video codec. On average it produces even smaller files than WebP — in practice, photos in AVIF can be half the size of their JPG equivalent. It holds up especially well under heavy compression: where JPG is already breaking the image into blocks, AVIF still looks clean.
The good news is that all modern browsers read AVIF today — Chrome, Firefox, Safari and Edge. There are downsides: encoding takes longer than WebP, and some older tools and CMSs still don't generate it automatically.
In practice, AVIF is served through the picture element: the browser gets AVIF if it can read it, WebP as a backup, and JPG as the last line of defense. It sounds complicated, but modern platforms handle it on their own — more on that below.
SVG: for logos, icons and illustrations
SVG is a completely different story. It's not a compressed photo but a vector format — a mathematical description of shapes, lines and colors. That's why it's infinitely sharp: the same file looks perfect on a small phone, on a 4K monitor, and at any zoom level.
A logo in SVG typically weighs 2–10 KB. The same thing in PNG, in three sizes for retina screens, easily exceeds 100 KB. On top of that, you can style SVG with CSS — change the color on hover, animate an icon — without a single extra file.
One important limitation: SVG is for graphics, not photographs. There's no sensible way to describe a photo with vectors. Logos, icons, illustrations, charts — SVG. Anything shot with a camera — WebP or AVIF.
Which format when: a quick guide
So this isn't theory without a takeaway, here's an overview you can apply right away:
- Photos (hero sections, products, blog): AVIF with a WebP fallback — or just WebP if you want the simplest setup
- Logos, icons, illustrations, charts: SVG — minimal size, always perfectly sharp
- Images with transparency (e.g. a product on a transparent background): WebP or AVIF instead of PNG
- Screenshots and text-heavy images: WebP, in lossless mode if needed
- Animations: animated WebP or a short video (MP4/WebM) instead of GIF — GIF is absurdly large for what it shows
- JPG and PNG: only as a fallback for old systems and for places where modern formats aren't supported, e.g. email newsletters
Responsive images and lazy loading
The format is half the job — the other half is dimensions. There is no reason for a phone with a 400-pixel-wide screen to download a 2400-pixel-wide image. That's what the srcset attribute is for: you prepare the same image in several widths (e.g. 480, 960 and 1600 px), and the browser picks the smallest one that's sufficient for that screen. Since Google has been indexing primarily the mobile version of sites for years, it's the mobile experience that determines your rankings — which is why we dedicated a separate article to the mobile-first approach to design.
The second technique is lazy loading: the loading="lazy" attribute tells the browser to load images below the first screen only when the user scrolls to them. It's built into all modern browsers — no plugin needed. One warning: never lazy-load the hero image — the one that is your LCP element — because that slows down exactly the thing Google measures most.
Alt text and image SEO
Speed isn't the only way images affect SEO. For many businesses, Google Images is a serious source of traffic: furniture, interiors, hairstyles, food, products — people literally browse and buy through image search.
For Google to understand what's in an image, it needs text. Write the alt attribute descriptively and naturally: "custom oak wood kitchen" instead of "IMG_4521". The same goes for the file name — custom-oak-kitchen.webp tells Google something, DSC04521.jpg tells it nothing. Alt text is also an accessibility matter: screen readers speak it aloud to users who can't see the image.
This falls under the kind of technical SEO hygiene you do once and benefit from for years — exactly the type of work we cover in our SEO optimization service.
Conversion tools (and how to avoid doing it by hand)
Manual conversion
- Squoosh (squoosh.app) — a free Google tool that runs in the browser: drop in an image, pick WebP or AVIF, and compare quality before and after in real time
- TinyPNG — a classic for quick compression, now supporting WebP and AVIF output as well
- ImageOptim (Mac) and similar tools — for processing a larger batch of files locally at once
Automatic: WordPress and modern frameworks
If your site runs on WordPress, you don't have to convert anything by hand: plugins like ShortPixel, Imagify or Converter for Media automatically convert all existing and future images to WebP/AVIF and serve the right version to each browser.
Modern frameworks go a step further. In Next.js, for example, the Image component automatically generates WebP or AVIF, creates multiple sizes for srcset, and enables lazy loading — the developer just drops in the image and everything else happens on its own. CDN services like Cloudflare or Cloudinary do a similar job, converting images on the fly.
Practical checklist and conclusion
If you want to apply all of this to your site, here's the order:
- Run your site through PageSpeed Insights and see how much your images are currently costing you
- Replace your logo and icons with SVG versions
- Convert all photos to WebP, or AVIF with a WebP fallback
- Resize dimensions to the actual display width — you rarely need more than 1600–2000 px
- Add srcset for the largest images on the page
- Enable lazy loading for all images except the hero image
- Write descriptive alt texts and file names
- Automate the process with a plugin or framework, so you never have to think about this again
Image format feels like a technical detail, but in practice it's the difference between a site that opens in a blink and a site visitors abandon before it loads. If you'd like someone to review your site and sort out images, performance and technical SEO — get in touch, the assessment is free and comes with no strings attached.
Let's talk about your project!