Sign in to follow this  
Followers 0
BITbOK

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

18 posts in this topic

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

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

 

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

 

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

Chip111 and gek1 like this

Share this post


Link to post
Share on other sites

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

BITbOK likes this

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

workmaster95 and sokolokaa like this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

1422478952_oxsmbbjv5ptk742.jpg

amigo, SEO Thresh, DevilStar and 1 other like this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Может :)

 

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

kuzovbmw likes this

Share this post


Link to post
Share on other sites

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

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

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

kuzovbmw likes this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

2017-03-13--14_40_57.jpg

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

 

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

Share this post


Link to post
Share on other sites

При загрузки делаю так (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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.