Which Image Formats Should a SaaS Site Use? What Google Says About JPEG XL
Google Images and Discover do not support JPEG XL yet. Here is a practical format plan for product screenshots, icons and blog photos on a B2B software site.
- Desk
- Technical SEO
- Format
- How-to
- Reading time
- 7 min
- Published
- Oct 25, 2026
For a SaaS site, use SVG for logos and icons, and lossy AVIF or WebP with a JPEG or PNG fallback for screenshots and photos. Do not rely on JPEG XL. John Mueller said on October 15, 2026 that Google Images and Discover previews do not support it, and Google's own docs list no JXL support.
This guide is for marketers and developers who run a B2B software site and want images that load fast and can be indexed. Cekpr covers technical SEO for B2B software, and image formats are a small part of it that is easy to get wrong. Below is what Google supports, what the new JPEG XL news changes and a plan you can apply to a typical SaaS site.
What Did Google Say About JPEG XL?
Google said JPEG XL is not supported for images shown in Google Images or as Discover previews. Search Engine Roundtable reported on October 23, 2026 that John Mueller wrote on October 15 that JPEG XL is currently not supported, and linked to Google's image documentation.
The report adds one complication. SEO consultant Glenn Gabe reportedly found .jxl files indexed in Google Images. So a JXL file may surface in some cases, but Google's documentation does not promise it, and you cannot plan around an accident.
The practical reading is simple. If you want an image to appear reliably in Google Images, use a format on the supported list. Everything else is a bet.
Which Image Formats Does Google Support?
Google Search supports images referenced in the src attribute of an img tag in these formats: BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. Google's image search documentation also recommends that the file extension match the actual file type.
That last point is easy to miss. A file named logo.png that is really a WebP image can confuse crawlers and some tools. Convert the file properly, and name it for what it is.
The documentation also lists best practices that apply to any format. Alt text is described as the most important metadata for an image. Filenames should be short and descriptive instead of generic names like image1.jpg. Responsive images should use the picture element or srcset, always with an img fallback that has a src attribute.
Which Format Fits Which Kind of SaaS Image?
Match the format to the image, not the other way around. A SaaS site usually has four types: logos and icons, product screenshots, blog photos and animated demos. Each has a best-fit format.
The table below gives a starting point based on Google's supported list and web.dev's guidance.
| Image type | Best format | Fallback | Note |
|---|---|---|---|
| Logos and icons | SVG | PNG | Sharp at every size |
| Product screenshots | Lossy AVIF or WebP | PNG or JPEG | Check small text stays readable |
| Blog photos | AVIF or WebP | JPEG | Test quality levels |
| Animated demos | Video | Poster image | GIF files are large |
| Fine detail with text | PNG or lossless WebP | PNG | Avoid text in images where you can |
web.dev's guidance on choosing the right image format backs most of this. It says SVG is best for logos, text and icons, that lossy WebP and AVIF are great JPEG alternatives for web-quality images, and that GIF limits the palette to 256 colors and produces much larger files than video.
Why Do Image Formats Matter for Page Speed?
They matter because an image is often the largest element on the page. Google's Largest Contentful Paint metric measures when the biggest visible element finishes rendering, and web.dev says a good LCP is 2.5 seconds or less, measured at the 75th percentile of page loads. Img elements are eligible candidates.
A hero screenshot on a SaaS homepage is a classic LCP element. If it is a large PNG, it can slow the page for every visitor. A properly sized AVIF or WebP version of the same screenshot can cut the bytes sharply, though the savings depend on the image.
web.dev also warns about high-resolution screens. An uncompressed 100 by 100 pixel image costs 40,000 bytes at 1x, 160,000 at 2x and 360,000 at 3x. Serving the right size to the right screen matters as much as the format you pick.
How Do You Serve Modern Formats Safely?
Use the picture element with sources in order of preference, and end with an img tag that has a src fallback. Browsers pick the first source they support, and crawlers that do not understand the newer attributes still see the fallback. This keeps both users and Google covered.
Follow these steps to roll it out.
- Inventory your images by type, size and where they appear.
- Convert photos and screenshots to AVIF or WebP, and keep a JPEG or PNG fallback.
- Replace logos and icons with SVG where the artwork is simple.
- Wrap images in a picture element with an img fallback that has a real src.
- Add descriptive alt text and filenames while you are in the files.
- Test pages in PageSpeed Insights or your lab tool, and recheck LCP.
Do the work in a staging copy first. Image changes touch templates across a site, and a small mistake can break images on every page. Our guide to auditing a SaaS site for back button hijacking uses the same method of testing on a sample of pages before a wide rollout.
What About Image Sitemaps, CDNs and Crawling?
Image sitemaps help Google find images it might miss, and Google's docs say they can list images hosted on other domains, such as a CDN. If your product images are served from a separate domain, include them in the sitemap and make sure that host is not blocked from crawling.
Many SaaS sites put images behind a CDN with rate limits or bot rules. Those rules can slow down or block Googlebot by accident. If your logs show crawl errors on image URLs, check them before you blame the format. Our piece on reducing Google's crawl rate safely on a SaaS site explains how to handle load without blocking the crawler.
Also check robots rules. A blanket block on an images folder will keep those files out of Google Images no matter what format they use. If you recently edited your file for AI crawlers, our robots.txt setup guide for AI crawlers is a good place to confirm that image paths are still allowed.
Keep file names stable when you convert. If product-dashboard.png becomes product-dashboard.avif, set up the new URL in your templates and sitemap, and decide what happens to the old one. A redirect or a kept fallback prevents broken images on pages that other sites link to.
Should You Use JPEG XL Anyway?
Only if you serve it with a fallback and do not need Google Images to show it. JPEG XL may offer good compression, and browser support is a separate question from Google's indexing support. For a marketing site where search visibility matters, a supported format is the safer choice.
You can experiment on pages where images are not meant to rank, such as an internal tool or a logged-in dashboard. Measure real load times before and after. If the numbers do not clearly win, skip it.
Cekpr's advice is conservative. Use what Google documents, keep fallbacks and revisit if Google adds JXL to its supported list.
One more habit helps. Keep a short list of your ten most important images, such as the homepage hero and the main product screenshots, and recheck them each quarter. Those few files carry most of the visual weight and most of the page-speed risk.
What Mistakes Do Teams Make With Image Formats?
The most common mistake is converting everything and testing nothing. Some screenshots look fine in a lossy format and others smear small interface text. Check the images that carry words, such as dashboards and settings panels, at full size before you ship.
The second is forgetting dimensions. An image without width and height attributes can shift the layout as it loads, which hurts the experience even when the file is small. Set both attributes on every img tag.
The third is leaving the old files live with no plan. Orphaned PNGs still get crawled and still cost bandwidth. Retire them once the new versions are in place.
How Do You Check That the Change Worked?
Check three things after you ship: image indexing, page speed and traffic. Use the URL Inspection tool on a sample page to see whether images render, compare LCP in your field data over the next few weeks and watch Google Images traffic in Search Console's performance report.
Give it time. Field data for LCP uses a rolling window, so the full effect takes weeks to appear. Keep a dated note of what you changed so you can tie any shift to the work.
Conclusion
For SaaS sites, the plan is clear. Use SVG for logos and icons, AVIF or WebP for screenshots and photos, a JPEG or PNG fallback and a real file extension. Skip JPEG XL for anything you want to rank in Google Images.
Cekpr will watch for any change in Google's supported formats. Start with your homepage hero image, convert it, set the fallback and measure LCP. That single change often matters more than the rest of the image library combined.
Does Google Images support JPEG XL?
What image format is best for SaaS product screenshots?
Should I replace all my PNG and JPEG images with AVIF?
Do image formats affect Core Web Vitals?
Up next · Technical SEO How to Serve a 503 During an Emergency PHP Patch Without Losing Rankings join the club.
The week's best SEO and AI search posts, plus one thing to check in your own Search Console, every Thursday morning. Unsubscribe whenever.