Масава аптымізуем все фото на сайце для Google PageSpeed ​​Insights

  1. Дагаджаць Google - минифицируем усё і ўся
  2. Чым аптымізаваць JPG / JPEG?
  3. Як выкарыстоўваць jpegoptim
  4. Чым аптымізаваць PNG?
  5. нататкі

Думаю, няма ні аднаго ўладальніка сайтаў, які не сутыкнуўся з інструментам PageSpeed Insights і яго патрабаваннямі да аптымізацыі малюнкаў. З зноў дадаваліся малюначкамі ўсё больш-менш зразумела і існуе маса модуляў практычна для любых CMS, якія дазваляюць аптымізаваць карцінку ў момант загрузкі. А вось са старымі фотаздымкамі, назапашанымі гадамі, не ўсё так проста і масава аптымізаваць іх з дапамогай модуляў не заўсёды магчыма.

Дагаджаць Google - минифицируем усё і ўся

З-за чаго нашы фатаграфіі і малюнкі не аптымальныя для web і на што глядзіць Google? Не паверыце, але ад якасці :) любая аптымізацыя памяншае якасць малюнка за кошт падмены блізкіх па параметрах кветак да адзінага і згладжванню малюнка (калі выяўляцца зусім груба).

Як гэта ні дзіўна, але памер залежыць не толькі ад самога фота, але і ад яго метададзеных. Калі вы проста загрузілі фота з тэлефона на сайт, разам з фатаграфіяй перадаліся кілабайты дадатковых дадзеных у выглядзе даты здымкі, месцы, ўладальніка і службовых каментароў, змагацца з якімі неабходна ачысткай meta інфармацыі файлаў, але сёння менавіта пра графіку. Пачытаўшы мануалы Гугла [1] мы ўбачым, што гігант рэкамендуе выкарыстоўваць шэраг інструментаў для сціску JPEG і PNG файлаў без ўплыву на якасць карцінкі (візуальна без ўплыву).

Чым аптымізаваць JPG / JPEG?

Для JPG / JPEG рэкамендуюць усталяваць і выкарыстоўваць jpegtran або jpegoptim. Абодва плагіна даюць падобныя вынікі і выбар застаецца за вамі, мы выкарыстоўваем jpegoptim.

Як выкарыстоўваць jpegoptim

Усе працы ў прыкладах мы праводзім на серверы з CentOS

yum install jpegoptim

Для пошуку і масавай аптымізацыі ўсіх файлаў на сваіх сайтах можна выкарыстоўваць каманду

find / home / -name * .jpg -exec jpegoptim --strip-all '{}' \

Пасля выканання дадзенай каманды ўсе выявы дадзенага фармату на сайце будуць аптымізаваныя і перапісаныя новымі

Чым аптымізаваць PNG?

Для PNG рэкамендуюць усталяваць і выкарыстоўваць OptiPNG або PNGOUT

yum install optipng

Для пошуку і масавай аптымізацыі ўсіх PNG файлаў можна выкарыстоўваць каманду

find / home / -name * .png -exec optipng -o4 '{}' \

Усё як і ў выпадку з jpg. У прыкладзе ёсць дадатковы параметр -o4, які з'яўляецца ключом -oX, у якім пра - optimixation, а X - узровень сціску вашых фатаграфій, які можа быць ад 1 да 7. Асабіста я не рэкамендую выстаўляць у ключ значэнне больш за 4.

Пасля таго як абедзве каманды завершаць сваю працу, можна ісці ў PageSpeed [3] і радавацца паляпшэння вынікаў і паскарэнню [2] загрузкі сайта.

Думаю, няма ні аднаго ўладальніка сайтаў, які не сутыкнуўся з   інструментам PageSpeed Insights   і яго патрабаваннямі да аптымізацыі малюнкаў

нататкі

  1. рэкамендацыі Google да малюнкаў на сайце.
  2. прыклад паскарэння карпаратыўнага сайта на Битрикс.
  3. Праверка сайта ў PageSpeed .

Чым аптымізаваць JPG / JPEG?