Правильная оптимизация картинок

[BITbOK 205]

Кто знает, как правильно оптимизировать картинки на сайте, чтобы сервис Google ( https://developers.google.com/speed/pagespeed/insights/?hl=ru) не выдавал ошибок (что надо оптимизировать изображения)?

Для сжатия картинок использую сервис http://tinypng.com/, но он как бы сжимает только картинки маленького размера, а вот если картинка большая или много весит, то Google и дальше будет показывать, что эти картинки можно сжать.

 

В общем суть темы, как правильно или через какой сервис сжимать картинки, чтобы сервис гугла не выдавал ошибок?

 

P.S. Думаю тема многим будет интересна.

[warkins 17]

Я менял размер каждой картинки на 200х300 сервис гугл засчитывал 

[BITbOK 205]

Я менял размер каждой картинки на 200х300 сервис гугл засчитывал 

Может это и работает, но когда на сайте 50+ фоток, очень геморойный способ(

[laird 839]

Там же сервис предлагает скачать пачку оптимизированных файлов.

Вот если бы автоматизировать процесс... Ну а так пока вручную - скачал архив, обновил нужные изображение и на три килобайта страница стала меньше, загружается мгновенно, аж на 4 миллисекунды быстрее, это просто потрясающе!

[kirk 154]

если это ВП, то можно использовать плагин от тех же тиников, что бы он сжимал все картинки на сайте

[pozdeyyy 203]

на DLE есть такая фича сжимания загруженных картинок...

[warkins 17]

Может это и работает, но когда на сайте 50+ фоток, очень геморойный способ(

иных способов нет у меня на сайте больше 700 материалов я сидел 1 все штамповал за 2 дня сделал. пользовался программай для уменьшения изображения без потери качества "Batch Picture Resizer" есть еще онлайн сервисы pichold.ru

[campusboy 912]

Есть простенькая программа FileOptimizer, которая выбирает из десятка алгоритмов лучший для той или иной картинки и сжимает. По сравнению с tinypng объем сокращения меньше, но визуальных потерь нет (у tinypng есть, особенно если картинка большая - это заметно становится). Может обработать за раз хоть миллион картинок.

 

[kuzovbmw 587]

А может она структуру папок к примеру сохранять? Ну допустим как в wp грубо говоря upload и в ней месяца, чтобы разом папку залить и оптимизировать и обратно тупо воткнуть, а то руками геморно

[DevilStar 1179]

А может она структуру папок к примеру сохранять? Ну допустим как в wp грубо говоря upload и в ней месяца, чтобы разом папку залить и оптимизировать и обратно тупо воткнуть, а то руками геморно

Может

 

Если на сайте много png, то процесс обработки может занять много времени - на одну большую png может уйти до минуты времени обработки (хотя всё зависит от проца, конечно).

[kuzovbmw 587]

ну тогда сейчас попробуемс

[Julian 13]

если это ВП, то можно использовать плагин от тех же тиников, что бы он сжимал все картинки на сайте

 Не забывайте, что каждый новый плагин - это еще один тормоз для скорости загрузки сайта у пользователя. Пришел ко мне как-то один клиент, Говорит, сайт медленно грузится, прошлый прогер видимо дупло. Мы уже сами без него начали, но что-то никак не выходит. Захожу в админку, а там... 24 активных плагина. Спрашиваю, кто ставил? Говорят, мы сами, чтобы доказать прогеру, что мы сами лучше умеем.

 Теперь по сути: вообще есть много вариантов оптимизации картинок. Через фотошоп: сохранить как - для веб - PNG-8 - качество 80 - размер не более 500х500. Можно также через просмотрщик картинок FastStone Image Viewer: левое меню - изменить размер dpi. 

[wlasta 19]

Слышала, что делают шаблоны для зенки, чтобы оптимизировать и сразу же уникализировать картинки, только это дорогое удовольствие, пока обхожусь фотошопом.

[gek1 12]

Пользуюсь онлайн сервисом Avatan, в нем можно хорошо сжимать вес картинки, при этом, сохраняя качество...

[admin_nu7 97]

Ох ты у меня было 50% После того как скачал

 

Стало 65%  ))) ещё б сделать до 90 хатяб было б крутинко

[seoinfodom 101]

В качестве одиночного сжатия использую Adobe Photoshop, а для массового сжатия по папкам Caesium - незаменимы помощник. 

[node.js 103]

Вот если бы автоматизировать процесс...

Не думаю что google предоставить api с данному сервису, было бы конечно супер.

Я сжимаю автоматом через GraphicsMagick при загрузки файлов на сервер, проблем никаких нет при должной настройке.

 https://www.npmjs.com/package/gm

 

Года 4 назад нужно было около миллиона фотографий оптимизировать, могу поискать чем перебирал (не знаю вспомню ли чем делал). Помню то что в цикле перебирал папки и оптимизировал с помощью двух библиотек, скрипт был написан на питоне, одна строчка всего, очень качественно сжал фотки, был приятно удивлен.

 

Узнать бы какие библиотеки юзает гугл для сжатия, я смог бы написать скрипт и выложить его тут.

[node.js 103]

При загрузки делаю так (Node.js + npm gm). Pagespeed молчит и не предлагает скачивать изображения

function copyFileResize(set, callback) {

    gm(set.file.path)
        .options({
            "imageMagick": true
        })
        // Обрезаем изображение
        .resize(set.fileOptions.width, set.fileOptions.height, '^')
        .gravity('Center')
        .quality(set.fileOptions.quality) // Качество
        .crop(set.fileOptions.width, set.fileOptions.height)
        //.noProfile()
        // Накладываем текст
        .font(config.path.folder + config.upload.options.watermark.font, set.fileOptions.fontSize)
        .stroke(config.upload.options.watermark.stroke)
        .fill(config.upload.options.watermark.color)
        .drawText(0, 0, config.upload.options.watermark.text, config.upload.options.watermark.gravity)
        // Сохраняем изображение
        .write(set.file._path

    , function(e) {

        if (e) return callback(e);

        return callback(null, null);

    });

}

По объекту set и хранимых данных в нем (Без данных по наложению текста)

let set = {
  file: {
    path: '/tmp/img.jpg',
    _path: '/images/img.jpg',
    fileOptions: {
      width: 200,
      height: 160,
      quality: 65
    }
  }
};

Для питона использовал:

pngquant - для сжатия png

jpegtran - для сжатия jpg

 

Если есть доступ к серверу по ssh, то достаточно перейти в директорию с папками в которых размещены картинки и циклом все пережать (пережимает очень быстро), только папку создайте в этой директории с именем optimized. В папку optimized, pngquant выбрасывает пережатые файлы

 

Для png файлов

for i in *.png; do echo $i && pngquant --speed 1 256 --quality 50-80 $i --output optimized/"$i"; done

Для jpg файлов

for i in *.jpg; do echo $i && jpegtran -copy none -optimize -progressive $i --output optimized/"$i"; done