Як оптизувати зображення на сайті для покращення швидкості
Оптимізація зображень як одне з найголовніших правил покращення швидкості сайту
Якщо сісти і подумати над тим, як покращити швидкість завантаження сторінок сайту, можна зробити багато дій. Наприклад, перейти на потужніший сервер, налаштувати стиснення, стиснути код, об'єднати кілька файлів в один, але найбільш результативним буде рішення стиснути картинки. Чому? Тому що вони займають набагато більше місця, аніж текст.
Ви можете стиснути код у файлах вашого сайту. Навіть якщо зробити це для всіх файлів, це може зменшити обсяг завантажуваної інформації від декількох до сотні кілобайт. А ось оптимізація одного фото може зменшити обсяг на стільки ж. Ви можете виконати весь перелік рекомендацій щодо оптимізації, але якщо не стискати графіку, то все це принесе лише трохи користі.
Способи стиснення
Отже, я думаю, ви усвідомили важливість роботи із зображеннями. Таким чином, ми можемо зменшити швидкість завантаження. А це один із факторів при формуванні пошукової видачі. Раніше це було не так актуально, але сьогодні в епоху скаженої конкуренції або робиш добре, або не робиш. Я не знаю, наскільки важлива швидкість для пошукової оптимізації, але це абсолютно не останній фактор.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Це важливо для користувачів. Потрібно розуміти, що сьогодні все ще далеко не всі мають доступ до високошвидкісного з'єднання, а якщо сторінка завантажуватиметься більше 3-5 секунд, це дратуватиме людину. Ми – істоти нетерплячі, нам треба зараз уже, тому швидкість – це не тільки вимога пошукових роботів.
Всі,закінчую з теорією, переходимо до того, як ваші фото зменшити у розмірах.
Зменшіть розмір під оптимальні для дизайну вашого сайту. У жодному разі не завантажуйте зображення 1024х800, якщо у вас ширина блоку для виведення тексту – 600 пікселів. Зображення доведеться зменшитися автоматично, але при цьому все одно завантажуватиметься у своєму повному розмірі.
Використовуйте онлайн-сервіси. Сьогодні в мережі є кілька дуже добрих сервісів для стиснення картинок. Найкращим я вважаю optimizilla, тому що в ньому ви можете виставляти якість вручну. Таким чином, можна досягти зменшення на 10-90%, залежно від ваших потреб.
Сервіс також дозволяє стискати формат png, просто зменшуючи кількість кольорів, які використовуються в картинці. Це дозволяє зменшити розмір у 3-5 разів, причому істотних відмінностей від оригіналу практично не буде!
Використовуйте фотошоп. У програмі Adobe PhotoShop є чудова функція – Зберегти для Web, яка створена спеціально для того, щоб генерувати легкі якісні картинки з мінімальним розміром та вставляти їх на веб-сторінку.
Раніше я не користувався фотошопом для цих цілей, але останнім часом усвідомив усі переваги від цього. По-перше, вам не потрібно заходити ні на який сайт. По-друге, тут теж є регулятор якості, який дозволяє стиснути дуже сильно, або трохи.
Не перестарайтеся
Хоча оптимізація розміру файлів є важливою, не потрібно заходити занадто далеко. Справа в тому, що можна зменшити розмір і в 10-20 разів, але якої якості зображення буде? Ви побачите, що воно просто жахливе. Дотримуйтесь золотої середини і якщо ви бачите, що зображення значно погіршило свій зовнішній вигляд, краще його стиснутименше, проте люди зможуть його розглянути як слід.
Так, я забув згадати, що при використанні онлайн-сервісу все-таки є одна незаперечна перевага - можна завантажити відразу з десяток файлів і стиснути їх, це вийде набагато швидше, ніж у фотошопі. Потім усі їх можна завантажити одним архівом.
Також, якщо ви використовуєте саме цей двигун, можу порадити вам супер корисний плагін для цієї мети. Називається він EWWW Image Optimizer. Справа в тому, що ви можете дізнатися про оптимізацію зображень не відразу, і, можливо, на вашому сайті вже зібралися сотні картинок. Вручну стискати їх буде дуже сумно, але плагін дозволяє в рази прискорити цей процес – він знаходить та зменшує усі зображення, з якими це можна зробити.
Те саме можна зробити і з додатковими файлами вашого шаблону - іконками і т.д. До речі, я про це не згадав, але це також важливо. Оптимізація файлів шаблону (малюнок) теж важлива. Наприклад, у вас у шапці графічний логотип-картинка. Звичайно, він має виглядати красиво, але постарайтеся бодай трохи зменшити його розмір.
Власне, я впевнений, що і для інших движків теж є якісь плагіни для цієї мети. Найнадійнішим варіантом буде стиснення в онлайн-сервісі чи фотошопі, і лише після цього завантаження на сервер.
Об'єднання дрібних іконок у спрайти
Що ви ще можете зробити в плані оптимізації, то це з'єднати дрібні іконки в спрайти. Справа в тому, що будь-яка, навіть найменша картинка - це додатковий запит на сервер. І що більше таких запитів, то повільніше завантаження. У такому випадку краще об'єднати 10-15 маленьких зображень в одне, стиснути його і отримувати на 70-80% швидше завантаження, а також лише 1 запит на сервер замість десятка.
Це лише один прийом, набагатобільше ви можете дізнатися з нашого курсу оптимізації сайту в цілому. Завдяки цій інформації ви зможете прискорити свій веб-ресурс у кілька разів! Отже, на цьому я закінчую сьогоднішню статтю, а вам бажаю успішно виконати стиснення картинок.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3