I'm checking my website with Google PageSpeed and I have the following warning :
Losslessly compressing image.png could save 802B (31% reduction).
This png file is uploaded on my Rails website with carrierwave. When the image is uploaded, I run the equivalent of convert -strip -quality 100 -resize "90x90^" -gravity center -extent 90x90 image.png final_image.png
But it's not enough for Google.
What do I miss ?
Thank you!
Please see PageSpeed documentation https://developers.google.com/speed/docs/insights/OptimizeImages:
Recommendations
You should perform both basic and advanced optimization on all images.
Basic optimization includes cropping unnecessary space, reducing color
depth to the lowest acceptable level, removing image comments, and
saving the image to an appropriate format. You can perform basic
optimization with any image editing program, such as GIMP. Advanced
optimization involves further (lossless) compression of JPEG and PNG
files.
Use an image compressor
Several tools are available that perform further, lossless compression
on JPEG and PNG files, with no effect on image quality. For JPEG, we
recommend jpegtran or jpegoptim (available on Linux only;
run with the --strip-all option). For PNG, we recommend OptiPNG
or PNGOUT.
Related
I have some source images which have a black background, and I would like to convert them into WebP images that have a transparent background.
I don't understand the talk about alpha channels from their documentation, so I am unsure if this is even possible with cwebp. I tried some guesswork with the arguments, but none worked.
The command I use for direct conversion from JPG to WebP is:
cwebp ./input.jpg -o ./output.webp
What would I need to add to this in order to get the black background from the input JPG to be transparent in the output WebP?
I think cwebp's options are mostly focused on compression with some limited other options for manipulating the image like cropping and sharpness.
To accomplish this task I would recommend image magick which is a general purpose image manipulation tool. that can remove the transparency, and then you can send that to cwebp.
imagick convert image.jpg -fuzz 2% -transparent black image.png
cwebp image.png -o image.webp
I'm trying to find the right command for compressing png and jpg files good enough for Google Page speed.
I'm using the following from my OSX termial:
convert -strip -quality 85 imagesource.png imagesource_optimized.png
The result is no difference in file size between the original and "optimized version. Am Is there a different command I can use?
Compression is fundamentally different between PNG and JPEG because PNG is lossless and JPEG is lossy.
With a JPEG the -quality parameter specifies how much quality should be retained.
With a PNG file, the -quality parameter specifies the strategy and the amount of time/effort zlib can spend to optimise your image - think gzip --best versus gzip --fast.
See https://www.imagemagick.org/script/command-line-options.php#quality
For PNG, I suggest pngcrush which you can install with homebrew using:
brew install pngcrush
For JPEG, either use -quality or specify a maximum size:
# Specify by quality
convert input.jpg -strip -quality 75% output.jpg
# Specify maximum size
convert input.jpg -strip -define jpeg:extent=300k output.jpg
Compression is fundamentally different between PNG and JPEG because PNG is lossless and JPEG is lossy.
im trying to resize image from 72x72 to 512x512 with following command
convert input.png -resize 512x512 output.png
but the output image (output.png) become blur
how to prevent resized images from becoming blurred
how to prevent resized images from becoming blurred
If you want a pixelated image of the original use -sample
# Create small image.
convert -size 72x72 plasma: 72x72.png
# Magnify the image with pixel subsampling.
convert 72x72.png -sample 512 512x512_sample.png
It's true that you can't restore missing data when upscaling images, but there's a lot of various algorithms to calculate what may be missing.
Try using the -filter option in addition to -resize, and checkout the wonderful usage examples here.
Probably the best you can do is use a sharper -filter such as catrom and then do post processing using -unsharp.
convert input.png -filter catrom -resize 512x512 -unsharp 0xSigma output.png
where sigma is the sharpening value, try sigma=1 or 2 (or as desired)
But it will not maintain the same quality as the input as others have mentioned above.
See -unsharp at http://www.imagemagick.org/script/command-line-options.php#unsharp
You can't. For an equal sharpness, you would need more data in the bigger image. Since you have only the data from a small image the result is blurred.
Look at it the other way, if what you asked was possible, instead of compressing the 512x512 image, we would first scale it down to 72x72, compress that (much smaller file) and sent it over with instructions to scale it up to 512x512.
I've read the ImageMagick documentation here and here and been unable to achieve a couple of simple tasks. Would appreciate any simple pointers or direction, or even commands I can execute that will work on Linux.
I want to convert any image-type (JPG, GIF, PNG, TIFF) to save to a PNG, losslessly, and as compressed as possible without any loss of quality. Ideally in 96 DPI so they look good in Retina screens.
To then take the above generated PNG and also resize it in specific sizes, with height and width specified.
What am I missing with the convert command?
If you want to convert a TIF, GIF or JPEG to PNG, the command is:
convert image.tif result.png
or
convert image.jpg result.png
In answer to your questions...
Question 1
PNG is lossless by definition, so that is not an issue. To get better compression of a PNG, you generally need to reduce the colours, i.e.
convert image.jpg -colors 64 result.png # or try 255 which allows a palettised image
The dpi is pretty irrelevant until you print on paper. More pixels are needed if you want more quality on screen.
Question 2
If you want to resize an image without destroying its aspect ratio, use
convert image.jpg -resize 200x100 result.png # retain aspect ratio
If you don't care if that makes the image look stretched or distorted, and you want exactly 200x100, tell ImageMagick that you really mean it by shouting:
convert image.jpg -resize 200x100! result.png # ignore aspect ratio
I have a .eps file that I can look at in Photoshop, and it has a very high resolution, sharp edges, etc. at even larger than 1024x1024.
With ImageMagick I want to convert this .eps to a 1024x1024 .jpg with very high resolution.
However, with the following command, the image is very blurry:
convert -resize "1024x1024" -colorspace RGB -flatten test.eps test.jpg
What ImageMagick parameters do I have to use so that the resulting .jpg is 1024x1024 and a high quality, sharp image?
here's some XMP data we found, perhaps what is causing it to not be resized with -size:
For vector graphics, ImageMagick has both a render resolution and an output size that are independent of each other.
Try something like
convert -density 300 image.eps -resize 1024x1024 image.jpg
Which will render your eps at 300dpi. If 300 * width > 1024, then it will be sharp. If you render it too high though, you waste a lot of memory drawing a really high-res graphic only to down sample it again. I don't currently know of a good way to render it at the "right" resolution in one IM command.
The order of the arguments matters! The -density X argument needs to go before image.eps because you want to affect the resolution that the input file is rendered at.
This is not super obvious in the manpage for convert, but is hinted at:
SYNOPSIS
convert [input-option] input-file [output-option] output-file
Maybe you should try it with -quality 100 -size "1024x1024", because resize often gives results that are ugly to view.