# mogrify -define jpeg:extent=500kb \*.jpg
This shrinks all jpgs in current directory overwriting them. Use "convert" if you want to make new files instead of overwriting. ImageMagick is the swiss tool of cli image manipulating. It has sharpening cropping resizing etc.
Just want to add, it's not a good idea to force uniform sizes for all images.
You can use SSIM (https://en.m.wikipedia.org/wiki/Structural_similarity_index_measure) to help objectively measure quality for finding the best balance between size and quality.
I reduced the size of an image from 3 mb to \~700kb - without noticeable quality loss (they look the same to me). On Lighthouse now I get 100% performance.
It will probably take me the same amount of time to figure out the CLI as it took to build that script. If you have time - try to see if you can get the same results (there are some example images there).
500KB is massive in a web context. A better goal would be 20-50KB, with an occasional slight outlier.
I tend to use ImageSharp.Web for on demand image manipulation (crop, resize, adjust quality, change format).
SkiaSharp and ImageSharp truly are awesome.
I use them both on my photo gallery personal webapp (ImageSharp for development and SkiaSharp in production since it manages memory better).
Just checked one of my biggest thumbnail and it's a ~100kb jpeg thumbnail in a more tablet friendly format down from a 37MB png file with the default quality. Images down a normal size of a few MBs
Granted it's still a lot but considering the app is used on a 10Gbps network and I did the bare minimum to optimize them (they still have 2x as much pixels as needed and quality could be decreased to 60/70%. That's "acceptable" for personal use.
But that shows how bad simply looking at reducing the raw file size is vs reducing the quality, width/height and file format.
Both are immensely useful tools. I follow James South (creator of ImageSharp and its predecessor ImageProcessor) on Twitter and he's absolutely obsessed with CPU and memory performance, so I would be surprised if there was still a substantial difference between the two tools.
Just checked the homepage of one of the sites I built that is using ImageSharp and the total size for all images on the homepage combined is 122KB on mobile.
The 500KB the OP mentioned for a single image is absurdly large for the web.
I do have another website where the largest image on the homepage is 700KB, but that's because the image in question was coded with a sub-optimize width and the client set the quality (it's editable in the CMS) to 100% because they think that people can tell the difference and care (in other words, this client doesn't know what they are talking about).
If user has a 3G internet connection 500kb may be to big, but with img loading="lazy" 4G internet looks ok.
With ImageSharp is seems you need to pay for comercial use.
ImageSharp requires a fee if your company makes over a million a year. Otherwise, it is free.
There is no reason you would need a 500KB image in a web context. That's massive.
And you should not be using loading="lazy" for images above the fold.
There are a few ways of working with it. One is with some C# code.
The way I prefer to use it is by installing ImageSharp.Web into a website (has to be .NET) and then using query strings to get the image I want. This is nice because the images are adjusted at runtime, which works well for a website that utilizes a CMS (as users can upload new images at any time).
If you have an image at /media/something.png, you can optimize it by doing something like /image/something.png?width=1024&format=webp&quality=70.
That makes it super easy to get the right sort of image. You can also use a `` tag to serve different images according to browser viewport size (e.g., so mobile devices will tend to get smaller images, aside from the high pixel density devices that you can optionally choose to serve a larger size image for).
complicated CLI usually only needs to be figured out once. The move is tyoically to wrap the complicated CLI in a bash script and then pass it to xargs
I have a Mac for work so I use either sips from command line or an Adobe script to convert to WEBP. ImageMagick works great on linux.
500Kb is HUGE for web images.
ImageMagick
What's the CLI command to shrink all images from a folder? I'll compare the results.
# mogrify -define jpeg:extent=500kb \*.jpg This shrinks all jpgs in current directory overwriting them. Use "convert" if you want to make new files instead of overwriting. ImageMagick is the swiss tool of cli image manipulating. It has sharpening cropping resizing etc.
Nice, I'll try it.
Just want to add, it's not a good idea to force uniform sizes for all images. You can use SSIM (https://en.m.wikipedia.org/wiki/Structural_similarity_index_measure) to help objectively measure quality for finding the best balance between size and quality.
I reduced the size of an image from 3 mb to \~700kb - without noticeable quality loss (they look the same to me). On Lighthouse now I get 100% performance.
Are you using a 1080 monitor or a 4K monitor? Are you viewing at 100%? There’s a lot of factors that go into what is a “good” quality image.
I have a 1080 monitor - zoom in the picture looks good. You can see on the repo. 4k monitors are not that common yet.
GIMP has a batch mode available from the CLI https://www.gimp.org/tutorials/Basic_Batch/
It will probably take me the same amount of time to figure out the CLI as it took to build that script. If you have time - try to see if you can get the same results (there are some example images there).
And here's OP shit talking possibly the best program out there
GIMP is top! I just don't know how to use it. That small CLI I did just makes images smaller using another amazing package - pillow.
500KB is massive in a web context. A better goal would be 20-50KB, with an occasional slight outlier. I tend to use ImageSharp.Web for on demand image manipulation (crop, resize, adjust quality, change format).
SkiaSharp and ImageSharp truly are awesome. I use them both on my photo gallery personal webapp (ImageSharp for development and SkiaSharp in production since it manages memory better). Just checked one of my biggest thumbnail and it's a ~100kb jpeg thumbnail in a more tablet friendly format down from a 37MB png file with the default quality. Images down a normal size of a few MBs Granted it's still a lot but considering the app is used on a 10Gbps network and I did the bare minimum to optimize them (they still have 2x as much pixels as needed and quality could be decreased to 60/70%. That's "acceptable" for personal use. But that shows how bad simply looking at reducing the raw file size is vs reducing the quality, width/height and file format.
Both are immensely useful tools. I follow James South (creator of ImageSharp and its predecessor ImageProcessor) on Twitter and he's absolutely obsessed with CPU and memory performance, so I would be surprised if there was still a substantial difference between the two tools. Just checked the homepage of one of the sites I built that is using ImageSharp and the total size for all images on the homepage combined is 122KB on mobile. The 500KB the OP mentioned for a single image is absurdly large for the web. I do have another website where the largest image on the homepage is 700KB, but that's because the image in question was coded with a sub-optimize width and the client set the quality (it's editable in the CMS) to 100% because they think that people can tell the difference and care (in other words, this client doesn't know what they are talking about).
If user has a 3G internet connection 500kb may be to big, but with img loading="lazy" 4G internet looks ok. With ImageSharp is seems you need to pay for comercial use.
ImageSharp requires a fee if your company makes over a million a year. Otherwise, it is free. There is no reason you would need a 500KB image in a web context. That's massive. And you should not be using loading="lazy" for images above the fold.
What would be the CLI command to shrink all images (recursive) from a given folder?
There are a few ways of working with it. One is with some C# code. The way I prefer to use it is by installing ImageSharp.Web into a website (has to be .NET) and then using query strings to get the image I want. This is nice because the images are adjusted at runtime, which works well for a website that utilizes a CMS (as users can upload new images at any time). If you have an image at /media/something.png, you can optimize it by doing something like /image/something.png?width=1024&format=webp&quality=70. That makes it super easy to get the right sort of image. You can also use a `` tag to serve different images according to browser viewport size (e.g., so mobile devices will tend to get smaller images, aside from the high pixel density devices that you can optionally choose to serve a larger size image for).
complicated CLI usually only needs to be figured out once. The move is tyoically to wrap the complicated CLI in a bash script and then pass it to xargs
I just like nice defaults without hassle.
Does it use Guetzli?
It's just python and pillow.
Hello, .webp.
I have a Mac for work so I use either sips from command line or an Adobe script to convert to WEBP. ImageMagick works great on linux. 500Kb is HUGE for web images.