3 ms·

After my experiments, I came to the conclusion, that for raster images, this is a good combination of srcsets and fallbacks to provide best image quality: <!

• awongh 5y ago
  Any suggested resources for current best practices for srcset specifically and HTML images in general? I mean for real world use, not just the latest chrome version. I see some conflicting advice in this thread and from what little I’ve looked into it, there isn’t a good consensus on the subject yet?
• mkl 5y ago
  I'm seeing some weird behaviour with that on both Chrome 98 and Firefox 97. Chrome seems to be displaying the JPEG, and when I right-click and "Open image in new tab", I get the raw bytes of the AVIF file, not any version of the image. In Firefox, it seems to be displaying the JPEG too, and when I right-click and "Open image in new tab", I get the AVIF file (as an image). Also in Firefox, probably a CSS thing, when the window is made smaller vertically (e.g. by the developer tools at the bottom), the image is scaled down vertically but not horizontally. I'm looking at the image at the top of https://pilabor.com/blog/2021/05/remote-desktop-with-xrdp-and-kubuntu/ https://pilabor.com/blog/2021/05/remote-desktop-with-xrdp-an...
  • dchest 5y ago
    That's probably because OP's server doesn't serve a correct Content-Type header for AVIF and also disables content type sniffing. Needs: AddType image/avif .avif
    • mkl 5y ago
      Makes sense for Chrome's behaviour, but that means Firefox is ignoring the "X-Content-Type-Options: nosniff" header, which it supposedly respects: https://blog.mozilla.org/security/2020/04/07/firefox-75-will-respect-nosniff-for-page-loads/ https://blog.mozilla.org/security/2020/04/07/firefox-75-will... Also, upon further investigation, I think both browsers are displaying the AVIF for me. It has quite a bit less detail than the JPEG, so it's identifiable.
      • dchest 5y ago
        Right, nosniff doesn't apply to images.
    • sandreas 5y ago
      Should be fixed, thank you!
• dchest 5y ago
  It's easier to do this on the server side based on Accept header, e.g. for Apache to serve image.jpg.webp instead of image.jpg: RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME}.webp -f RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L] <FilesMatch "(?i)\.(jpe?g|png)$"> Header append "Vary" "Accept" </FilesMatch> Then <img src="image.jpg"> will serve the supported format.
  • bmn__ 5y ago
    That's a poor quality conneg implementation, don't recommend. Apache httpd comes with mod_negotiation, use that instead to be standard compliant. <https://httpd.apache.org/docs/current/content-negotiation.html https://httpd.apache.org/docs/current/content-negotiation.ht...> <img src="image"> without extension on the URI will pick the user-agent's best accepted format from the set of files `image.*`.
    • dchest 5y ago
      Thanks!
    • sandreas 5y ago
      Interesting, learning a lot here ;) Thank you.