Оптимізація картинок для сайту

1. Чому потрібно оптимізувати зображення для сайту
2. Як оптимізувати зображення
3. Зменшуємо розмір зображення.
4. Зменшуємо вага файлу зображення.

Наша команда-партнер Artmisto

Найчастіше, спілкуючись з клієнтами, самостійно наповнюють свої сайти, доводиться пояснювати їм необхідність оптимізації зображень для сайту.

Статут пояснювати одне й те саме з разу в раз, вирішили опублікувати тут статтю, щоб просто давати читати її клієнтам.

Чому потрібно оптимізувати зображення для сайту

Для багатьох виявляється відверто факт, що картинки для сайту треба оптимізувати, більшість клієнтів взагалі над цим не замислюється, і часом викладають на сайт фотографії злиті з дзеркальних камер, безпосередньо, взагалі без жодної обробки! Обсяг таких файлів сягає 10 - 12 Мб !!

Тим часом, важкі картинки завдають серйозної шкоди вашому сайту:

• по-перше сайт довго відкривається, часом це не дуже помітно на високошвидкісному інтернеті, але для тих відвідувачів вашого ресурсу, у яких інтернет не дуже реактивний, відкриття сайту стає справжнім випробуванням. Крім того до довго завантажуються сайти негативно ставляться пошукові роботи;
• по-друге через важкі картинок стає важче вся папка файлів сайту, при великій кількості важких зображень досягаючи якихось божевільних розмірів, що витрачає місце на хостингу, і серйозно ускладнює створення і використання резервних копій.

Як оптимізувати зображення

Для простоти ми розбили процес оптимізації зображень на кілька етапів:

Зменшуємо розмір зображення.

1. Подивіться якого розміру картинки відображаються на вашому сайті. Якщо ширина поля, куди вставляється картинка становить 600 пікселів, немає ніякого сенсу пхати туди фотографію розмірі 2000 х 3000 пікселів! Для самостійного зміни розміру зображень ми рекомендуємо користуватися безкоштовною програмою FastStone Image Viewer, скачати її можна тут.
2. Відкриваємо зображення за допомогою FastStone. Переміщаєте мишку до лівого краю, відкривається менюшка:
   
3. Імені команди "змінити розмір", і у вікні, виставляєте потрібну Вам висоту або ширину (повинна стояти галочка в чекбоксі "Зберігати пропорції")
   
4. Зберігаєте. Виходить картинка потрібного розміру.

Зменшуємо вага файлу зображення.

Після того, як зображення зменшено до потрібного розміру, відкриваєте сайт Оптімізілла , Завантажуєте туди картинку, і завантажуєте її вже оптимізовану. Можна вибрати якість стиснення для файлів в форматі jpg, або кількість квітів для файлів png.

Якщо ж Ви вставляєте на сайт картинки в форматі gif, тоді використовуємо сервіс Ezgif

Різниця у вазі завантаженого і оптимізованого зображень може вийти багаторазової!

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