Оптимізація картинок для сайту
Перш ніж приступити до дій давайте спочатку поясню що таке оптимізація картинки і навіщо їх потрібно оптимізувати.
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 формат використовують для невеликих файлів (іконки) або анімованих картинок.
Як оптимізувати кілька картинок за один раз?
І останнє, хотілося б сказати, що на багатьох сайтах вже закладено функціонал обрізки фотографій під час завантаження. Тобто. фотографії обрізаються за заданими параметрами. Але, як я перевіряв скрипт завантаження та обрізки картинок не так добре оптимізує картинки під Web, як, наприклад, це зробить фотошоп. Тобто. я брав ту картинку, яка вже була оброблена завантажувачем і проганяла її через фотошоп. В результаті мені вдавалося стиснути розмір ще кілька разів.
Бувайте усі. До нових зустрічей!
Заур Магомедов
Верстальник з великим досвідомроботи. Займаюся створенням сайтів із 2009 року. Постійно навчаюсь та вдосконалюю свої навички. Веду свої проекти, у тому числі і цей блог.