6

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.

2
  • Are you interested in image SEO (getting your images ranked in Google Image Search) or are you worried about effects of this technique on the web-search rankings for your pages? Aug 30, 2022 at 9:04
  • @StephenOstermiller Both, how this will have an effect on my current image-rakings but also for the page in general.
    – nilobyte
    Aug 31, 2022 at 10:31

2 Answers 2

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 ...

enter image description here

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

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.