Is serving JPEG, WebP and Avif under the same URL OK for SEO?

Question

Our website only shows image URLs with the .jpg file extention. When the .jpg request hits the server, we read the accept header in order to find out the best format for the browser.

For example: if the browser is able to process .avif, the request gets responded by a file with .jpg extention but with content-type: image/avif.

The website works perfectly fine for all customers. But I was wondering if this might have some SEO disadvantages?

I know that we could use the picture-tag instead. But our current setup is much simpler to use for us.

Answer 1

I don't see any known SEO issue, although the usage of header request information may not produce the ideal results -- I'm going to assume you are providing jpg unless you have good reason to believe avif is supported. IE the https://caniuse.com/avif?

List item

But when the browser's identity is not specified, migration to a content distribution network, proxy caching, other network infrastructure upgrades aimed at improving the user access to online content, et la or partial support is available, IE https://caniuse.com/avif safari ... and other limitations based on OS of the system the browser is installed on.

• [Firefox 77-92] Can be enabled in Firefox via the image.avif.enabled pref in about:config.

• [firefox 93-103] Supports still images. Animated image sequences are not supported.

• [Safari] Only available on macOS 13 Ventura or later.

Because of valid reasons, the usage of sniffing the HTTP request for features has been deprecated but not prevented.

And yes the best practice is the <picture> tag. So the browser can select the correct image based on what it supports.

<picture>
  <source type="image/webp" srcset="illustration.webp">
  <source type="image/svg+xml" srcset="illustration.svg"> 
  <img src="illustration.png" alt="A hand-made illustration">
</picture>

as well as orientation and size.

<picture>
    <source media="(orientation: landscape)" ... >
    <source media="(orientation: landscape) and (min-width: 1200px)" ... >
</picture>

So the picture tag becomes ideal for usage with responsive design and even more so as the https://caniuse.com/css-container-queries rolls out.

/* look "all" images go full size if their container space is below 640, this saves a lot of work */
@container (max-width: 640px) {
  .wrapper > * {
    flex-basis: 100%;
  }

It ain't broken but rather it could be better

When you need to change those pages, it would add a small improvement to use the picture tag. If it is only affecting 5% of users to a small degree its not major but if the change if file type effects how many people use the site and that is a 5% difference ... 5% of sales is major.

Maintenance of the backend

Don't forget the time required to maintain the back end as new browser releases come out.

Andriod browser just came out with support, less than thirty days ago ...

Almost everything but Microsoft and a few mobile browsers now support avif.

Is it easier to use <picture> or keep watch?

Answer 2

I don't think, it can make a big issue. But according to the Google documentation the Accept header looks like Accept: */*, or like Accept: text/plain, text/html, */*

So I would say, serve the fastest possible format.