<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div class="moz-cite-prefix">Karl Ove Hufthammer skreiv 20.02.2022
      18:24:<br>
    </div>
    <blockquote type="cite"
      cite="mid:f8d5b646-983c-ff27-ceff-a81f5fe36a21@huftis.org"><br>
      <blockquote type="cite" style="color: #007cff;">But first thing
        before moving to it, is to make sure we can package it
        <br>
        and make it work fine for all our supported platforms.
        <br>
      </blockquote>
      <br>
      I hope it does. I have tested WebP on a few images, and while very
      high compression levels (of course) did result in visible
      artefacts, these artefacts were much less <b class="moz-txt-star"><span
          class="moz-txt-tag">*</span>annoying<span class="moz-txt-tag">*</span></b>
      than the corresponding JPEG artefacts. So with WebP we can
      probably use both high resolution and higher compression.
      <br>
    </blockquote>
    <p>Here are a couple of example images to illustrate this. The file
      size of the animal images in GCompris range from 220 KiB to 38 KiB
      (the latter being a *very* low-quality image). If we use a target
      file size of 150 KiB, we will be able to include ~35 images.</p>
    <p>My first example image is this cheetah:<br>
<a class="moz-txt-link-freetext" href="https://commons.wikimedia.org/wiki/File:Cheetah_(Acinonyx_jubatus)_female_2.jpg">https://commons.wikimedia.org/wiki/File:Cheetah_(Acinonyx_jubatus)_female_2.jpg</a></p>
    <p>After cropping, resizing to 1920 × 1080 and subtle sharpening, it
      looks like this in full quality (~2 MiB):<br>
      <a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/cheetah-original.jpg">https://huftis.org/kritikk/gcompris/cheetah-original.jpg</a><br>
      (If viewing in a browser, remember to click to zoom in and see it
      in full resolution.)<br>
    </p>
    <p>The ~150 KiB JPEG shows ugly banding/posterisation in the
      background:<br>
      <a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/cheetah-jpeg-150.jpg">https://huftis.org/kritikk/gcompris/cheetah-jpeg-150.jpg</a><br>
      (I used Gimp to save it, but a JPEG of similar size converted with
      ImageMagick corresponds to a -quality setting of < 20, i.e.,
      very low quality.)</p>
    <p>The similarly-sized WebP has acceptable artefacts:<br>
      <a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/cheetah-webp-150.webp">https://huftis.org/kritikk/gcompris/cheetah-webp-150.webp</a></p>
    <p><br>
      Here are corresponding images for this horse image:<br>
<a class="moz-txt-link-freetext" href="https://upload.wikimedia.org/wikipedia/commons/f/fa/Zaniskari_Horse_in_Ladakh.jpg">https://upload.wikimedia.org/wikipedia/commons/f/fa/Zaniskari_Horse_in_Ladakh.jpg</a><br>
    </p>
    <p><a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/horse-original.jpg">https://huftis.org/kritikk/gcompris/horse-original.jpg</a><br>
      <a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/horse-jpeg-150.jpg">https://huftis.org/kritikk/gcompris/horse-jpeg-150.jpg</a><br>
      <a class="moz-txt-link-freetext" href="https://huftis.org/kritikk/gcompris/horse-webp-150.webp">https://huftis.org/kritikk/gcompris/horse-webp-150.webp</a></p>
    <p>Here I actually think the JPEG looks slightly better. The WebP
      version loses some details in the darker, front part of the horse.
      I wonder if this is a general problem with WebP, as you can see
      the same over-smoothing effect in the red eye of the cheetah.<br>
    </p>
    <p>Also note that here I have used a target size of 150 KiB. But
      some images have more details, and will benefit from lower
      compression levels (higher file sizes), while some have fewer
      details, and can be reduced (perhaps much) more in file size
      without much loss of quality. I think it’s better to aim for a
      target *average* file size of, for example, 150 KiB and use the
      ‘-quality’/‘-q’ parameter when converting the images. Then every
      image should be of ~equal quality, while the file sizes will vary.<br>
    </p>
    <pre class="moz-signature" cols="72">
-- 
Karl Ove Hufthammer</pre>
  </body>
</html>