It is not part of the file specification. The untrained eye does not have the comparison to make, but they might click through that bit more.Īlong the way I also learned that there is no such thing as a quality setting on a JPG image. It only works subliminally, with more clicks. I did some tests with people where one page had the blurry thumbnails and the other had the crisp and vibrant thumbnails. The thing about removing defects in images is that nobody notices. As mentioned, bandwidth is not the problem for people on fast connections and image quality is a much more interesting goal. Hence better.Įven though my JPG optimiser is awesome I am not interested in legacy formats, I have got my nginx proxy serving and CDN dialled in. The file sizes are smaller, however, the image quality is where it is at, the look up tables are designed for high DPI digital screens, not analog CRTs. This is the one Mozilla wrote for Instagram. I make the JPGs special too by using the Mozilla JPEG encoder. If someone right clicks and saves an image it actually goes back to the server to get the JPG rather than a webp. The images look fine but they are 20% the size of the JPG. If a browser has the data saving flag on then I respect that and crank up the compression.
#Imageoptim vs optipng full
I go for image quality and serve images at 1.5x pixels to make them always Retina-ish as most people seem to have 1.5x pixels on their screens these days, for example a 1920 Full HD shows up as 1280 in the nerd stats. This is really fast on an empty cache, and all the headers are stripped away with the images served as immutable.īandwidth is not always the bottle neck. I use a commercial CDN to access my origin server which has its own cache. By doing the resize and format conversion in one hit I get better image quality and better compression. I use VIPS to achieve this and in a resize for a thumbnail I go from the big originals supplied by the artist, use the VIPS resize algorithm, turn off colour sub sampling for small thumbnails, selectively trimming the whitespace.īy going from a big JPG to a smal webp I am not using an intermediate step of a small JPG that gets converted. To get the colours right I do things with the profile so that everything can be done in Adobe with it working out alright on all devices with sRGB assumed. It is the image header that is read, not the file extension. The trick to it is that if a JPG is requested then you can serve whatever format you like so long as the browser can read it. I did not get great results from AVIF but I am good with webp.
I have a thumbnail resizer that varies the output on the basis of the accept header value, to invariably serve webp instead of JPG or PNG. Then remove avif files with size > webp files (this can happen on smaller dimensions). for gifs I would use gifsicle, but I don't have gifs
use pngquant to optimize pngs inplace ("-ext.
use jpegoptim to optimize jpegs inplace use use avifenc with fine graned params (I use docker, beause avifenc did not compile on my server) use cwebp or avif images wherever possible
use resized lossless png images as source for avifenc, since it does not support resize atm use vipsthumbnail instead of imagick (way faster) shrivel.json including command line tools and parameters to shrink different kind of image formats (shrivel is a task runner for shrinking images using command line tools, I recently built for my blog, unfortunately without release yet). To everyone who is interested, here is a part of my.
0 kommentar(er)
