<
  • Главная
Статьи

Оптимізація зображень для сайту: пакетна обробка за допомогою jpegtran | optipng | pngout

  1. передумови
  2. Використовуємо рекомендації для зображень
  3. структура архіву
  4. Коротка інструкція по роботі
  5. додатки
  6. x64 (aka andi)

Сайт без зображень - анахронізм. Так думають багато, і це не позбавлено здорового глузду. Згадайте, чи давно ви в останній раз потрапляли на такий сайт і як довго пробули на ньому.

Текстові дані займають набагато менший розмір, ніж зображення. Але люди, як відомо, люблять очима. Стало бути, картинки будуть безсумнівним плюсом розповіді.

Взагалі, говорячи про текст ми маємо на увазі і його зміст, і зручне візуальне уявлення, що включає абзаци, списки, цитати, таблиці. Однак цього недостатньо, і навіть новинні сайти намагаються постачати роботи журналістів зображеннями.

Однак цього недостатньо, і навіть новинні сайти намагаються постачати роботи журналістів зображеннями

Давайте виходити з того, що зображення сайту потрібні. Це можуть бути фото, схеми, просто пояснюють картинки.

Давним-давно, коли Путін не здавався вічним, робив я свій перший веб-портал медичної спрямованості. Потрібно було розмістити картинки до атласу. Очевидно, що анатомічна будова тіла без малюнків уявити досить складно, і тим паче описати словами. І я, не мудруючи, залив картинки в bmp (формат без стиснення). Чи потрібно говорити, що важили вони дофигища? Більш того, частина браузерів не вміла показувати такі картинки.

Так навіщо ж оптимізувати зображення? Простий приклад - фото. Сучасні телефони мають камери в 8, 12 і навіть більше, мегапікселів. 12 МП відповідає зображенню в 4000 × 3000 пікселів. Залежно від складності сцени, це відповідає розміру 2-5 мегабайт, і навіть більше. Десяток фото - і розмір сторінки сильно роздувається. Зображення вписується в область контенту, значить браузер повинен спочатку все скачати, отмасштабовані і лише потім вивести. для слабких процесорів або при невеликому розмірі оперативної пам'яті - катастрофа.

А тепер уявімо, що користувач дивиться сайт з телефону. В цьому випадку завантаження сторінки можна просто не дочекатися. Значить, картинки потрібно попередньо зменшувати.

Хтось заперечить, що сенсу в цьому ніякого, сучасні CMS при завантаженні зображень автоматично роблять зменшені копії. Але чи всі мають у своєму розпорядженні свої сайти на VPS або VIP-тарифах? Завантажити одне 12 МП зображення може і вийде, але для його обробки PHP потрібно виділити 35+ мегабайт (в теорії, на ділі більше) для зберігання, а потім ще казна-скільки для створення зменшеної копії. Дешеві тарифи відразу упрутся в перевищення ресурсів. Хороший хостер попросить користувача більше так не робити, поганий - проігнорує, бо для нього важливі тільки гроші, а не працездатність сервісів.

І ось, ми вирішили діяти правильно. Самі попередньо зменшуємо зображення, після чого заливаємо на сайт. Так і движку простіше, і людям. Усе? Не зовсім.

Багато редактори зберігають вихідні чанкі (мета-інформація, частини файлу, що не відносяться до зображення), що містять додаткову інформацію. Наприклад, якщо сфотографувати щось на телефон, перекинути файл на комп, тицьнути по ньому правою клавішею і вибрати «Властивості → Детально», побачимо дані по влаштуванню: на яку камеру фотографували, витримку, ISO та інше. Для користувача ця інформація марна, значить, від неї можна позбутися.

Ну подумаєш, один чанк. Що там, купу інформації чи міститься? Уявіть собі. Іноді отримуєш зображення, в яких сотні кілобайт таких даних. Буквально сьогодні, прислали для розміщення лого розміром 584 КБ. При цьому, корисна інформація становила всього 14 КБ! Як на мене, не зовсім правильно змушувати відвідувача качати 570 КБ зверху.

Давайте підіб'ємо проміжні підсумки. Для того, щоб користувачам сайту зробити добре, потрібно:

  1. Зменшити розмір зображення. На допомогу будь-який графічний редактор.
  2. Викинути з файлу непотрібні частини. По суті, користувачеві потрібна лише картинка.
  3. Спробувати додатково зменшити розмір зображення.

Перший пункт має на увазі індивідуальну роботу над кожним файлом. Це витратно за часом, зате приносить найкращий результат. Ми відкриваємо кожен файл, обрізаємо, зменшуємо, після чого зберігаємо з прийнятною якістю.

А ось пункти 2 і 3 можна віддати на поталу спеціальними програмами. Софта для роботи з зображеннями безліч. Гугл рекомендує наступні програми:

  • jpegtran для зображень формату JPG.
  • optipng і pngout для зображень формату PNG.

Трохи про п. 3. Графічні редактори зазвичай не заморочуються з цим. Вони просто зберігають зображення, вибираючи заздалегідь закладені алгоритми стиснення з однаковими настройками, коефіцієнтами квантування і іншим. До того ж, багато чесно переносять наявну мета-інформацію і додають свою, додатково збільшуючи розмір файлу.

передумови

Рік тому масово заговорили про сервіс PageSpeed ​​Insights від Google. По суті, це рекомендації пошукового гіганта на тему «як зробити добре». Просто вбийте адресу сайту і отримаєте список пропозицій по оптимізації. Там же можна скачати вже оптимізовані ресурси, включаючи зображення, для свого сайту. Правда, це актуально тільки для перевіряється сторінки.

Якщо у Вас є сайт, обов'язково подивіться цю статтю . Особливо корисно тим, хто використовується WordPress.

Використовуємо рекомендації для зображень

Начебто просто: завантажити зазначені Гуглом програми і прогнати всі наявні на сервері файли через них. Проблема в тому, що дані утиліти консольні. Вони за раз беруть лише 1 файл. Але ми ж не дарма в минулій статті приділили час пакетним файлів, вірно?

Інформації зі статті цілком достатньо, щоб створити свій оброблювач файлів скопом, тому розписувати де що не буду. Просто пропоную скачати готову сборочку, якої користуюся сам.

Завантажити архів (212 КБ)

структура архіву

В архіві міститься папка [OptimizeImg]. Для початку роботи розпакуйте її куди-небудь. У мене розміщена в c: \ temp \ але це не принципово. Головне, щоб шлях не містив знаки оклику.

Далі. У цій папці міститься піддиректорія [uploads]. Сюди потрібно поміщати файли, що вимагають обробки. Найприємніше, що можна запхнути хоч структуру папок / файлів.

Є ще 3 програми: jpegtran.exe | optipng.exe | pngout.exe - це ті самі утиліти, рекомендовані Гуглом. Завантажені з відповідних офіційних сайтів / репозитаріїв. Якщо сумніваєтеся, чи просто хочете оновити версію, скачайте з довіреного джерела і замініть наявні.

І, нарешті, серце тулзи. Батнічкі:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

Перший файл - 1.bat - відтворює структуру з [uploads]. Створюються 3 додаткові папки: [jpg_jpegtran] [png_optipng] [png_pngout] з обробленими мінімізованими файлами свого типу (jpg - тільки * .jpg-файли, аналогічно і з png).

3.bat послідовно запускає на виконання три пакетних файлу:

  • 3-go.bat практично аналогічний 1.bat. Пропускає jpg / png файли через мінімізатори. Результатом роботи будуть 3 папки (див. Вище) з відповідними зображеннями.
  • 3-opti-to-out.bat створює папку [png_optipng-to-pngout], в яку пишуться файли, оброблені optipng + pngout (саме в такій послідовності).
  • 3-out-to-opti.bat створює папку [png_pngout-to-optipng], в яку пишуться файли, оброблені pngout + optipng. Аналогічно до попереднього, тільки в іншій послідовності.

В принципі, для наших потреб достатньо тільки 1.bat. Пікетники 3x з'явилися в результаті досліджень і помилок в роботі попередньої версії батника. Так вийшло, що в ході помилки файли для pngout бралися з директорії optipng. І яке ж було моє здивування, коли запуск старої версії видавав в 1.5 рази менший розмір, ніж в оновленому сорочки з короткими рукавами. В результаті виявилося, що подвійна обробка може непогано «доужать» картинки. Але це вимагає майже в 2 рази більше часу. Так що самі вирішуйте, чи потрібно воно.

Коротка інструкція по роботі

  1. завантажити архів .
  2. Розпакувати його.
  3. Зайти в свежераспакованную папку [OptimizeImg].
  4. Всі файли, що вимагають стиснуті, скопіювати в папку [upload].
  5. Запустити 1.bat і чекати. Якщо файлів багато, і вони png, чекати довго.
  6. Коли в чорному віконці з'явиться повідомлення про необхідність натиснути клавішу для продовження - все готово. Залишилося взяти вміст створених папок і скопіювати на хостинг по фтп, переписуючи старі файли.

Для прикладу. Нехай у Вас блог на WordPress. Всі зображення зберігаються в [/ wp-content / uploads /]. Заходимо в папку сайту (по фтп), заходимо в [wp-content] і просто копіюємо [uploads] в однойменну папку OptimizeImg. Запускаємо 1.bat і очікуємо. Після закінчення роботи содежімое [jpg_jpegtran] (заходимо туди!) Заливаємо на сервер. На запити про наявні файлах відповідаємо перезаписью. Аналогічний трюк для png, тільки спочатку дивимося, яка папка - [png_optipng] або [png_pngout] - займає менше місця, її вміст і заливаємо.

Не потрібно боятися пошкодити інші файли. Батники працюють тільки з jpg / png, і в новостворені папки пишуться тільки зображення цих типів.

Сподіваюся, кому-то буде корисно. Успіхів!

додатки

  1. Шлях до [OptimizeImg] не повинен містити знаків оклику! і відсотків%
  2. Запускати скрипти від імені адміністратора не потрібно. Більш того, в цьому випадку вони можуть не працювати!
  3. ...

Автор публікації

не в мережі 13 годин

x64 (aka andi)

Коментарі: 2846 Публікації: 395 Реєстрація: 02-04-2009

Чи потрібно говорити, що важили вони дофигища?
Так навіщо ж оптимізувати зображення?
Але чи всі мають у своєму розпорядженні свої сайти на VPS або VIP-тарифах?
Усе?
Що там, купу інформації чи міститься?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью