search

link-u / avif-sample-images

AVIF example images, licensed under CC-BY-SA.
Creative Commons Attribution Share Alike 4.0 International
53 stars 10 forks source link

Chrome 85 downloads avif files #2

Open anjanesh opened 4 years ago

anjanesh commented 4 years ago

I'm on Chrome 85 - why doesn't any of the avif images render in the browser ? All are getting downloaded to my downloads folder.

baumanj commented 3 years ago

Presumably this is because of GitHub not recognizing AVIF as an image type yet, so the detail view doesn't contain an img tag, instead it gives a "view raw" link. And because that "view raw" link serves the content as application/octet-stream rather than image/avif, browsers respond by downloading the file.

ve3 commented 5 months ago

Currently tested using Firefox 104.0.2, MS Edge 123.0.2420, Chrome 123.0.6312 but these files are not be able to display in these web browsers.

Firefox

Files that is failed to loaded in Firefox.

$firefox = array(
    'img-src/kimono.crop.avif',
    'img-src/kimono.mirror-horizontal.avif',
    'img-src/kimono.mirror-vertical.avif',
    'img-src/kimono.mirror-vertical.rotate270.avif',
    'img-src/kimono.mirror-vertical.rotate270.crop.avif',
    'img-src/kimono.rotate270.avif',
    'img-src/kimono.rotate90.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

Chrome

Files that is failed to loaded in Chrome and MS Edge (they failed the same files).

$chrome = array(
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
    'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

Files that are common failed on these 3 browsers.

$commonFailed = array(
  0 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.avif',
  1 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
  2 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.avif',
  3 => 'img-src/plum-blossom-large.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
  4 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.avif',
  5 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
  6 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.avif',
  7 => 'img-src/plum-blossom-large.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
  8 => 'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-full.avif',
  9 => 'img-src/plum-blossom-large.profile1.10bpc.yuv444.alpha-limited.avif',
  10 => 'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-full.avif',
  11 => 'img-src/plum-blossom-large.profile1.8bpc.yuv444.alpha-limited.avif',
  12 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.avif',
  13 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
  14 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.avif',
  15 => 'img-src/plum-blossom-large.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
  16 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.avif',
  17 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
  18 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.avif',
  19 => 'img-src/plum-blossom-large.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
  20 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.avif',
  21 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
  22 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.avif',
  23 => 'img-src/plum-blossom-large.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
  24 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.avif',
  25 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
  26 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.avif',
  27 => 'img-src/plum-blossom-large.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
  28 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.avif',
  29 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
  30 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.avif',
  31 => 'img-src/plum-blossom-large.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
  32 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.avif',
  33 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-full.monochrome.avif',
  34 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.avif',
  35 => 'img-src/plum-blossom-small.profile0.10bpc.yuv420.alpha-limited.monochrome.avif',
  36 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.avif',
  37 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-full.monochrome.avif',
  38 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.avif',
  39 => 'img-src/plum-blossom-small.profile0.8bpc.yuv420.alpha-limited.monochrome.avif',
  40 => 'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-full.avif',
  41 => 'img-src/plum-blossom-small.profile1.10bpc.yuv444.alpha-limited.avif',
  42 => 'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-full.avif',
  43 => 'img-src/plum-blossom-small.profile1.8bpc.yuv444.alpha-limited.avif',
  44 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.avif',
  45 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-full.monochrome.avif',
  46 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.avif',
  47 => 'img-src/plum-blossom-small.profile2.10bpc.yuv422.alpha-limited.monochrome.avif',
  48 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.avif',
  49 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-full.monochrome.avif',
  50 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.avif',
  51 => 'img-src/plum-blossom-small.profile2.12bpc.yuv420.alpha-limited.monochrome.avif',
  52 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.avif',
  53 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-full.monochrome.avif',
  54 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.avif',
  55 => 'img-src/plum-blossom-small.profile2.12bpc.yuv422.alpha-limited.monochrome.avif',
  56 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.avif',
  57 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-full.monochrome.avif',
  58 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.avif',
  59 => 'img-src/plum-blossom-small.profile2.12bpc.yuv444.alpha-limited.monochrome.avif',
  60 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.avif',
  61 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-full.monochrome.avif',
  62 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.avif',
  63 => 'img-src/plum-blossom-small.profile2.8bpc.yuv422.alpha-limited.monochrome.avif',
);

And for animated files.

Firefox

$firefox = array(
    'img-src/animated/alpha_video.avif',
    'img-src/animated/star-10bpc-with-alpha.avifs',
    'img-src/animated/star-12bpc-with-alpha.avifs',
    'img-src/animated/star-8bpc-with-alpha.avifs',
);

Chrome (&Edge)

$chrome = array(
    'img-src/animated/alpha_video.avif',
    'img-src/animated/star-10bpc-with-alpha.avifs',
    'img-src/animated/star-12bpc-with-alpha.avifs',
    'img-src/animated/star-8bpc-with-alpha.avifs',
);