3 ms·

To everyone who is interested, here is a part of my .shrivel.json including command line tools and parameters to shrink different kind of image formats (shrivel

To everyone who is interested, here is a part of my .shrivel.json including command line tools and parameters to shrink different kind of image formats (shrivel[1] is a task runner for shrinking images using command line tools, I recently built for my blog[2], unfortunately without release yet). "commands": { "svgo": ["/home/sandreas/.npm-packages/bin/svgo", "--multipass", "{source}", "-o", "{destination}"], "vips": ["vipsthumbnail", "{source}", "-s", "{size}", "-f", "{destination}[strip]", "--eprofile", "/usr/share/color/icc/colord/sRGB.icc", "--rotate", "--delete"], "vips_jpg": ["vipsthumbnail", "{source}", "-s", "{size}", "-f", "{destination}[optimize_coding,strip]", "--eprofile", "/usr/share/color/icc/colord/sRGB.icc", "--rotate", "--delete"], "vips_lossless": ["vipsthumbnail", "{source}", "-s", "{size}", "-f", "{destination}[strip]", "--eprofile", "/usr/share/color/icc/colord/sRGB.icc", "--rotate", "--delete"], "cwebp": ["cwebp", "-resize", "{size}", "0", "-q", "75", "{source}", "-o", "{destination}", "-quiet"], "docker-avifenc": ["docker", "run", "--rm", "-u", "1000:1000", "-v", "/home/sandreas/projects/pilabor/:/mnt", "shrivel", "avifenc", "--jobs", "all", "--min", "0", "--max", "63", "--yuv", "420", "-a", "end-usage=q", "-a", "cq-level=28", "-a", "tune=ssim", "--ignore-icc", "--speed", "0", "{source}", "{mappedDestination}"], "jpegoptim": ["jpegoptim", "--max=75", "--all-progressive", "--strip-all", "{destination}"], "pngquant": ["pngquant", "--quality", "70-99", "--skip-if-larger", "--quiet", "--ext", ".png", "--force", "{destination}"] }, Summary: - use svgo for svg compression - use vipsthumbnail instead of imagick (way faster) - use resized lossless png images as source for avifenc, since it does not support resize atm[3] - use cwebp or avif images wherever possible - use use avifenc with fine graned params (I use docker, beause avifenc did not compile on my server) - use jpegoptim to optimize jpegs inplace - use pngquant to optimize pngs inplace ("--ext .png --force") - for gifs I would use gifsicle, but I don't have gifs Then remove avif files with size > webp files (this can happen on smaller dimensions). And here is my according html snippet:  <picture>  <source srcset="/img/articles/iphone-3566282_235.avif 1x, /img/articles/iphone-3566282_235@2x.avif 2x, /img/articles/iphone-3566282_235@3x.avif 3x" type="image/avif">  <source srcset="/img/articles/iphone-3566282_235.webp 1x, /img/articles/iphone-3566282_235@2x.webp 2x, /img/articles/iphone-3566282_235@3x.webp 3x" type="image/webp">  <source srcset="/img/articles/iphone-3566282_235.jpg 1x, /img/articles/iphone-3566282_235@2x.jpg 2x, /img/articles/iphone-3566282_235@3x.jpg 3x" type="image/jpeg">  <img src="/img/articles/iphone-3566282_235.jpg" alt="Access and recover files from an iPhone on Linux" title="Access and recover files from an iPhone on Linux" loading="lazy" class="size-235 raster ext-jpg" width="235" height="129"> </picture> [1]: https://github.com/sandreas/shrivel https://github.com/sandreas/shrivel [2]: https://pilabor.com https://pilabor.com [3]: https://github.com/AOMediaCodec/libavif/issues/1034 https://github.com/AOMediaCodec/libavif/issues/1034

Theodores 4y ago
See my comment above, you might understand it. I don't bother with source sets for different resolutions and file types, I just assume Retina and always serve a well optimised webp from a different cookieless domain. I did try AVIF but I have 60% iOS and those iPhones don't read AVIF, or didn't until last time I checked. Like yourself I was struggling away with the compile but then I wondered why I was bothering when I had something good already. For VIPS I use PHP. My index.php expects params of width and height in a query string. This sits behind an Nginx proxy that caches based on query string and accept headers. This is the origin server for a CDN that respects the headers. I am glad to see you are doing the colour profiles as sRGB as I do that too. Look into the trick of serving webp when another format is requested, it works great. You can then simplify the HTML and use picture elements for more fun things such as responsive things.

Theodores 4y ago

See my comment above, you might understand it. I don't bother with source sets for different resolutions and file types, I just assume Retina and always serve a well optimised webp from a different cookieless domain. I did try AVIF but I have 60% iOS and those iPhones don't read AVIF, or didn't until last time I checked. Like yourself I was struggling away with the compile but then I wondered why I was bothering when I had something good already. For VIPS I use PHP. My index.php expects params of width and height in a query string. This sits behind an Nginx proxy that caches based on query string and accept headers. This is the origin server for a CDN that respects the headers. I am glad to see you are doing the colour profiles as sRGB as I do that too. Look into the trick of serving webp when another format is requested, it works great. You can then simplify the HTML and use picture elements for more fun things such as responsive things.