Всім привіт! У цьому пості хочу розповісти про те, як можна оптимізувати картинки для сайту. Що таке оптимізація картинки і навіщо їх взагалі оптимізувати? Ця інформація буде корисна особливо початківцям користувачам, тому що саме вони грішать завантаженням картинок величезних розмірів. Частенько, коли я здаю сайт клієнту доводиться пояснювати йому про картинки, що загрожують оригінальні картинки - це зло. Тому я вирішив написати цей пост, впевнений багатьом стане в нагоді.
Готувати картинки для завантаження на сайт будемо за допомогою програми Adobe Photoshop. Взагалі, редакторів для роботи з графічними файлами дуже багато, але я працюю саме з фотошоп, тому покажу як робиться це в фотошопі.
Перш ніж приступити до дій давайте я спочатку поясню що таке оптимізація картинки і навіщо їх потрібно оптимізувати.
Оптимізація картинки для Web, тобто для сайту - це збереження зображення при оптимальному співвідношенні якості до його розміру. Іншими словами, необхідно знайти золоту середину при якій якість картинки не змінитися при зменшенні його розміру (ваги файлу). Тобто при оптимізації картинки людське око не відчує різниці в якості, але розмір файлу при цьому буде мінімальний.
Тепер давайте розберемося навіщо оптимізувати картинки для сайту. Уявіть у вас на сторінці, скажімо, в будь-якому огляді є 10 картинок. В не оптимизированном варіанті кожна картинка важить ~ 1 Мб. Тобто уявімо, що ці картинки зняті на хорошій камері (хоча в реальності такі картинки важать ще більше). Я тут беру по мінімуму. Всі 10 картинок ми завантажуємо на сайт. В результаті сторінка з оглядом у нас буде важити як мінімум 10 Мб. Як мінімум тому що на сайті може бути і інша графіка, що відноситься до дизайну. Ви уявляєте вантажити сторінку в 10 Мб. Я розумію, що сьогодні у кожного в будинку є провідний інтернет і Wi-Fi. А ви подумали про користувачів мобільного інтернету? Мені здається багато користувачів просто не дочекаються завантаження сторінки взагалі.
Тепер давайте уявимо, що ці ж самі картинки після оптимізації будуть важити не 1 Мб, а 100 кб. Це в десять разів менше. У підсумку все картинки сумарно будуть важити 1 Мб. 1 Мб куди швидше завантажиться на мобільному пристрої, ніж 10 Мб.
Справа може бути зовсім і не в мобільних користувачів. Ми повинні зробити все, щоб сторінки сайти завантажувалися якомога швидше. Тепер, коли ми розуміємо, що оптимізувати картинки просто необхідно, то давайте вже перейдемо до самої процедури.
Для прикладу я візьму будь-яку картинку. Подивимося на її розмір в оригіналі.
Як бачимо з скріншоту картинка важить 1,47 Мб. Це багато. Не можна її на сайт таку вантажити. Також відразу хочу звернути вашу увагу на дозвіл картинки, тобто її розмір. Він вказується в пікселях.
Бачимо дозвіл - 2560 x 1600 пікс. Це теж дуже багато. Навіщо завантажувати таку картинку, якщо вона все одно буде зменшена до ширини головного контейнера сайту. Зазвичай це не понад 1200 пікс. Якщо картинка має відкриватися в лайтбокс, тобто спливати при натисканні, то дозвіл має бути не більше 1200 пікс. Тому зменшуємо картинку в 2 етапи - спочатку зменшуємо її дозвіл, а потім зберігаємо для Web-пристроїв.
Відкриємо бажану картинку в фотошоп: Файл -> Відкрити. Далі зменшуємо розмір картинки: Зображення -> Розмір зображення.
Далі, збережемо вже зменшений файл у форматі JPG: Файл -> Зберегти для Web або тиснемо комбінацію клавіш Ctrl + Shift + Alt + S. У вікні вибираємо формат - JPG і виставляємо якість - Висока - 60. Якість - 60 - це якраз те оптимальне співвідношення якість / вага файлу.
Зверніть увагу на вагу файлу після збереження - 250,9 КБ. А було ж 1,47 Мб, вага скоротилася трохи більше в 5 разів.
Чому ми вибрали формат JPG, а не PNG або GIF? Формат JPG цей якраз той формат при якому оптимізація графічного файлу буде максимальним. Але слід мати на увазі, що цей формат не підтримує прозорість. Для підтримки прозорості слід використовувати формат PNG, але вага файлу в такому форматі збільшується в рази. GIF формат використовують для невеликих файлів (іконки) або для анімованих картинок.
Спосіб, що ми розглянули вище дозволяє оптимізувати картинки по одному. Є, звичайно, в фотошоп функціонал для масової обробки, але я в ньому так і не розібрався. Для масового зміни розмірів картинок я використовую невелику програмку - XnView MP. Я записав невеликий відеоогляд по роботі з цією програмою, можете подивитися. Особливо порадувала мене програма тим, що на виході виходили вже оптимізовані файли для Web, причому ще виявилося, що XnView MP краще оптимізує картинки, ніж фотошоп.
І останнє, хотілося б сказати, що на багатьох сайтах вже закладений функціонал обрізки фотографій при завантаженні. Тобто фотографії обрізаються по заданих налаштувань. Але, як я перевіряв скрипт завантаження і обрізки картинок не так добре оптимізує картинки під Web, як, наприклад, це зробить фотошоп. Тобто я брав ту картинку, яка вже була оброблена загрузчиком і проганяв її через фотошоп. В результаті мені вдавалося стиснути розмір в ще кілька разів.
Наприклад, такий скрипт-завантажувач фото стоїть на движку WordPress. Але тим не менше які б не стояли завантажувачі я завжди зберігаю все картинки для сайту в фотошоп для Web і тільки після цього можна отримати оптимізоване зображення на сайті не на шкоду якості.
Ось і все, що я хотів сказати з приводу оптимізації картинок для сайту. Якщо ви знаєте будь-які інші програми для оптимізації, то буду радий якщо поділитеся в коментарях.
Всім до зустрічі. До нової зустрічі!
Перевірка орфографії
Що таке оптимізація картинки і навіщо їх взагалі оптимізувати?А ви подумали про користувачів мобільного інтернету?
