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

75

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

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

Якщо сісти і подумати над тим, як поліпшити швидкість завантаження сторінок сайту, то можна зробити багато дій. Наприклад, перейти на більш потужний сервер, налаштувати стиснення, стиснути код, об’єднати декілька файлів в один, але найбільш результативним буде рішення стискання картинки. Чому? Тому що вони займають набагато більше місця, ніж текст.

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

Способи стиснення

Отже, я думаю ви усвідомили важливість роботи з зображеннями. Таким чином, ми можемо зменшити швидкість завантаження. А це один з чинників при формуванні пошукової видачі. Раніше це було не так актуально, але сьогодні, в епоху шаленій конкуренції, або робиш добре, або не робиш. Я не знаю, наскільки важлива швидкість для пошукової оптимізації, але це абсолютно точно не останній фактор.

Це важливо і для користувачів. Потрібно розуміти, що сьогодні все ще далеко не всі мають доступ до високошвидкісного з’єднання, а якщо сторінка буде завантажуватися більше 3-5 секунд, це почне дратувати людини. Ми – істоти нетерплячі, нам треба ось зараз вже, тому швидкість – це не тільки вимога пошукових роботів.

Все, закінчую з теорією, переходимо до того, як ваші фото зменшити в розмірах.

Зменшіть розміри під оптимальні для дизайну вашого сайту. Ні в якому разі не завантажуйте зображення 1024х800, якщо у вас ширина блоку для виведення тексту – 600 пікселів. Зображення доведеться зменшитися автоматично, але при цьому все одно буде завантажуватися в своєму повному розмірі.

Використовуйте онлайн-сервіси. Сьогодні в мережі є кілька дуже хороших сервісів для стиснення зображень. Найкращим я вважаю optimizilla, тому що у ньому ви можете виставляти якість вручну. Таким чином, можна домогтися зменшення на 10-90%, в залежності від ваших потреб.

Сервіс також дозволяє стискати png-формат, просто зменшуючи кількість кольорів, які використовуються в зображенні. Це дозволяє зменшити розмір в 3-5 разів, при цьому істотних відмінностей від оригіналу практично не буде!

Використовуйте фотошоп. В програмі Adobe PhotoShop є чудова функція – Зберегти для Web, яка створена спеціально для того, щоб генерувати легкі якісні картинки з мінімальним розміром і вставляти їх в подальшому на веб-сторінку.

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

Не перестарайтеся

Хоча оптимізація розміру файлів важлива, не потрібно заходити надто далеко. Справа в тому, що можна зменшити розмір та в 10-20 разів, але якої якості буде зображення? Ви побачите, що воно просто жахливо. Дотримуйтеся золотої середини і якщо ви бачите, що зображення значно погіршило свій зовнішній вигляд, краще стиснути його менше, зате люди зможуть його розглянути як слід.

Ах так, я забув згадати, що при використанні онлайн-сервісу все-таки є одна незаперечна перевага – можна завантажити відразу з десяток файлів і стиснути їх, це вийде набагато швидше, ніж в фотошопі. Потім всі їх можна скачати одним архівом.

Як оптимізувати зображення для сайту wordpress за допомогою плагінів

Також, якщо ви використовуєте саме цей движок, можу порадити вам супер корисний плагін для цієї мети. Називається він EWWW Image Optimizer. Справа в тому, що ви можете дізнатися про оптимізацію зображень не відразу, і, можливо, на вашому сайті вже скупчилися сотні картинок. Вручну стискати їх буде дуже сумно, але плагін дозволяє значно прискорити цей процес – він знаходить і зменшує всі зображення, з якими це можна зробити.

Те ж саме можна зробити і з додатковими файлами вашого шаблону – іконками і т. д. до Речі, я про це не згадав, але це теж важливо. Оптимізація файлів шаблону (картинок) теж важлива. Наприклад, у вас в шапці графічний логотип-картинка. Звичайно, він повинен виглядати красиво, але постарайтеся хоча б трохи зменшити його розмір.

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

Об’єднання дрібних іконок в спрайт

Що ви ще можете зробити в плані оптимізації, так це з’єднати дрібні іконки в спрайт. Справа в тому, що будь-яка, навіть сама маленька картиночка – це додатковий запит на сервер. І чим більше таких запитів, тим повільніше завантаження. В такому випадку краще об’єднати 10-15 маленьких зображень в одне, стиснути його і отримувати на 70-80% більш швидке завантаження, а також всього 1 запит на сервер, замість десятка.

Це лише один прийом, набагато більше ви можете дізнатися з нашого курсу по оптимізації сайту в цілому. Завдяки цій інформації ви зможете прискорити свій веб-ресурс в кілька разів! Отже, на цьому я закінчую сьогоднішню статтю, а вам бажаю успішно виконати стиснення зображень.