When I use Google PageSpeed, I'm being told I need to compress my images. Example:
Compressing https://xxx.s3.amazonaws.com/xxxx.jpg could save 33.2KiB (66% reduction).
I'm not sure how to make Google happy here. In Carrierwave, I have the following setting:
version :thumb do
process resize_to_fill: [340, 260]
process :quality => 86
end
If I move the process quality to anything other than 86, the image doesn't look so good. Is there some other setting/trick I'm missing to compress images in a way that will make Google PageSpeed happy and help my site load fast?
I haven't tried resize_to_limit helper, which may help you:
process :resize_to_limit => [340, 260]
It will resize the image to fit within the specified dimensions while retaining the original aspect ratio. Will only resize the image if it is larger than the specified dimensions.
There are couple of ways for image optimization that you can perform. Desktop and Online. For Desktop, I would suggest using JPEGOPTIM utility to optimize jpeg files.
Provides lossless optimization (based on optimizing the Huffman tables) and "lossy" optimization based on setting maximum quality factor.
If you are on Linux, install it from your terminal:
sudo apt-get install jpegoptim
Then go to the folder where your image is and check first size of it:
du -sh photo.jpg
after that run this command below to optimize it:
jpegoptim photo.jpg
You will see the output.
You can also compress the given image to a specific size to, but it disables the lossless optimization.
You can also optimize your images in batch with this command:
jpegoptim *.JPG
Another Desktop way is to do basic optimization manually with PS or GIMP. including cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments and ( Save for web option )
You can use online solutions too. There are plenty of them, I suggest these ones for example:
There is also a WebP format ( developed by Google ) Chrome & Opera support it, but Firefox is not supporting it, so basicly images need to be served conditionally based on the HTTP Accept header sent by browsers capable to display this format. Check this Blog in case that you opt for WebP format, there is a gem which you can use. ( Rails 4 )
I hope it helps,