Carrierwave, как сжать изображения для Google PageSpeed ​​

Question

Когда я использую Google PageSpeed, мне говорят, что мне нужно сжать мои изображения. Пример:

Compressing https://xxx.s3.amazonaws.com/xxxx.jpg could save 33.2KiB (66% reduction). 

Я не уверен, как сделать Google счастливым здесь ... В Carrierwave, у меня есть следующие настройки:

version :thumb do 
    process resize_to_fill: [340, 260] 
    process :quality => 86 
end 

Если я двигаю качество процесса ни к чему, кроме 86 , изображение выглядит не так хорошо. Есть ли другие настройки/трюки, которые мне не хватает, чтобы сжать изображения таким образом, чтобы Google PageSpeed ​​был счастлив и быстро помог моему сайту загружаться?

Благодаря

Answer 1

Я не пробовал resize_to_limit помощника, который может помочь вам:

process :resize_to_limit => [340, 260] 

Это будет изменять размеры изображения в соответствии с заданными размерами, а сохранением исходного соотношения сторон. Будет только изменять размер изображения, если оно больше заданных размеров.

Существует несколько способов оптимизации изображений, которые вы можете выполнять. Настольный и Интернет. Для рабочего стола я бы предложил использовать утилиту JPEGOPTIM для оптимизации jpeg-файлов.

Обеспечивает оптимизацию без потерь (на основе оптимизации таблиц Хаффмана ) и «с потерями» оптимизация, основанной на установление максимального качества фактора.

Если вы на Linux, установить его из терминала:

sudo apt-get install jpegoptim 

Затем перейдите в папку, где ваше изображение и проверьте первый размер его:

du -sh photo.jpg 

после этого выполните следующую команду для оптимизации:

jpegoptim photo.jpg 

Вы увидите результат.

Вы также можете сжать данное изображение к определенному размеру, но отключает оптимизацию без потерь.

Вы также можете оптимизировать ваши изображения в пакетном режиме с помощью следующей команды:

jpegoptim *.JPG 

Другой способ Desktop это сделать базовую оптимизацию вручную с помощью PS или GIMP. включая обрезку ненужного пространства, уменьшение глубины цвета до минимально допустимого уровня, удаление комментариев к изображениям и (). опция)

Вы также можете использовать онлайн-решения.Есть много из них, я полагаю, эти те, например:

https://tinypng.com

https://kraken.io

Существует также формат WebP (developed by Google) Chrome & Opera поддерживает его, но Firefox не поддерживает его , поэтому базовые изображения должны обслуживаться условно на основе заголовка HTTP Accept, отправленного браузерами, способными отображать этот формат. Проверьте это Blog, если вы выбрали формат WebP, есть драгоценный камень, который вы можете использовать. (Rails 4)

Надеюсь, это поможет,