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

24

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

Перша сторона оптимізації – швидкість завантаження

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

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

Добре, так як оптимізувати картинки прямо зараз? Тут я пропоную 2 способи:

Зменшити розміри зображень до таких, які необхідні для вставки в статтю

Стиснути зображення. Це дозволить трохи втратити в якості, зате вага картинки зменшитися на 30-70%!

Розміри зображень

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

Це означає, що немає сенсу додавати картинку 1200×800 пікселів. Звичайно, движок сам може перетворити її до потрібних розмірів, але в деяких випадках краще робити це самому. Адже з сервера буде грузиться саме оригінал картинки, а він буде важити чимало, враховуючи дозвіл.

Багато йдуть ще далі – вони вставляють в текст зовсім невеликі картинки – 200-300 пікселів в ширину, але при цьому клікабельні. Тобто в тексті відображаються тільки мініатюри зображень, а при кліці вони розкриваються в повному розмірі. Є багато плагінів для того ж WordPress, які дозволяють це зробити. Наприклад, Lightbox.

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

Крім цього, такий спосіб дещо виграє у звичайного розміщення некликабельных картинок в максимальну ширину блоку зі статтею. Потрібно розуміти, що не завжди 600-800 пікселів достатньо, щоб чітко показати на скріншоті якісь налаштування. Особливо це стосується покроковий інструкцій, коли людина важливо розгледіти кожну картинку, щоб прийти до потрібного йому результату. Так ось, при кліці по мініатюрі зображення відкриється в повному розмірі, а значить, його буде чітко видно.

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

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

Стиснення зображень

Тепер переходимо до другого пункту. Він дозволяє ще краще оптимізувати зображення. Справа в тому, що за замовчуванням вони майже завжди неоптимизированны під web. Уявіть, що ви зробили свій цифровий фотоапарат красиві фотографії. Можливо, ви хочете помістити їх на своєму сайті.

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

Більш менш нормально переглядати ваш сайт зможуть тільки користувачі, у яких дуже швидкий інтернет від 20 мегабіт в секунду. Але потрібно розуміти, що багато користуються менш швидкісним сполученням. Багато сидять на тому ж 3G, хто заходить з мобільних пристроїв і т. д.

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

Таким чином, поява зображень на web-сторінці може перетворитися у вічність. Звичайно, ситуацію не можна залишати так.

Приклад стискання картинки

Зараз я зайду на pixabay. Це безкоштовний банк зображень, де можна абсолютно безкоштовно взяти будь-яку картинку. Я обираю будь-яку і подивлюся, в яких дозволах її можна завантажити безкоштовно.

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

Як бачите, в оригіналі це аж півтора мегабайта, що дуже багато для web-сторінки. Нам для розміщення в статті як раз підійде дозвіл 640 на 420. Як бачимо, спочатку розмір вже 147 кілобайт, що в 10 разів менше. Але все одно це раніше досить чимало, тому ми спробуємо ще трохи зменшити картинку з допомогою стиснення.

Ну а як, власне, стиснути фото? Тут я бачу два варіанти:

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

Відкрити картинку в фотошопі. Нажати Файл – Зберегти для Web і задати потрібні параметри.

Ось так це виглядає в фотошопі:

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

Цей варіант мені подобається більше тим, що управляти якістю можна дуже гнучко. Як бачите, дивитися на картинку цілком собі можна, при цьому її вага знижений до 80 кілобайт. Це майже в 2 рази. Повзунок якості при цьому зміщений на 40. При бажанні ви можете ставити ще менше.

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

Тобто для кожного зображення потрібно дивитися індивідуально, як воно буде виглядати при стисненні і виставляти той чи інший рівень якості. Наприклад, для скріншотів, де дуже важливо щось розгледіти, краще не виставляти якість на такий низький рівень, як 40. Краще встановити 60-80. Також не забудьте вказати правильний формат зображення – jpeg.

Як стиснути png зображення

Ось тут фотошоп справляється не так добре, а може я просто чогось недозрозумів в ньому. У будь-якому випадку, є такий сервіс, як optimizilla. У нього ви можете залити картинку, в тому числі і png, і за допомогою повзунка відрегулювати кількість квітів. Коротше, прямо як у фотошопі.

Таким чином вдавалося домогтися зниження ваги png зображень у 2-3 рази без істотних змін у якості.

Спрайт або як оптимізувати запити до сервера

Справа в тому, що крім ваги картинки грає роль те, скільки їх взагалі знаходиться на сторінці. Кожна картинка – це один запит до сервера. Бажано, щоб таких запитів було як можна менше. Але з повноцінними зображеннями ви нічого зробити не зможете, та й не потрібно, нехай вони і далі вантажаться кожне окремо. Інша справа – дрібні іконки, які використовуються в дизайні сайту.

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

Напевно такі іконки ви помічали практично на будь-якому сайті. Це можуть бути кнопки соціальних мереж, наприклад. З допомогою іконок дизайн стає цікавіше. Але якщо кожна з них грузиться поодиночку (а іконок може бути більше десяти), то виходить багато запитів до сервера.

Щоб виправити це, створюють так звані спрайти. Це коли всі іконки об’єднують в одне велике зображення, а потім вставляють в потрібному місці шаблоні з допомогою позиціонування фону. Докладніше з цим прийомом ви можете познайомитися при вивченні css і оптимізації сайтів. Ну а в цій статті я згадаю тільки, що такий прийом існує, щоб ви знали.

Що ж, на цьому з першою стороною оптимізації ми розібралися. Переходимо до наступної.

Друга сторона оптимізації – підписи до картинок

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

Крім title біля зображень також є атрибут alt, який викликає ще більше суперечок, ніж перший атрибут. Для початку необхідно розібратися, для чого вони потрібні. Title – це підказка, що з’являється при наведенні на зображення. Alt – альтернативний текст, який буде показаний тільки у тому випадку, якщо у користувача буде відключений показ графіки.

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

Так чи є якась користь від заповнення alt і title? Можна сказати, що вона безумовно є, але не така велика, як думають деякі (заповнюй alt і потрапиш в топ). Докладніше про те, як заповнювати ці атрибути я писав у попередніх статтях про них.

Якщо коротко підсумувати, то найголовніше не спамити ключовими словами. Текст повинен бути довжиною не більше 150 символів і максимально конкретно описувати зображення. Оптимальним можна вважати однаковий title і alt. Тобто просто заповнюєте один атрибут, копіюєте текст і вставляєте в інший.

Власне, найважливішим є те, які особисто у вас цілі. Тому що якщо ви не націлені на трафік з пошуку по картинках, то особливого сенсу в заповненні атрибутів немає. Вони не допоможуть вам піднятися в Яндексі. Єдине, що можна сказати, це те, що пошуковик Google, здається, використовує наявність нормальних alt і title як один з чинників ранжирування. Але, напевно, цей фактор відіграє невелику роль.

У статті про атрибут alt я наводив приклад з товарами в інтернет-магазині. Ось це те місце, де, як на мене, заповнені атрибути можуть послужити хорошу службу. Тому що якщо у вас в атрибутах буде чітко прописано назва товару, то якийсь відсоток людей може потрапити на цей товар, вбивши його назву у пошук по картинках. Загалом, потрібно враховувати також тип сайту.

Що ж, мабуть це все, що я хотів сказати вам про те, як оптимізувати зображення для сайту. Сподіваюся, що інформація була корисною для вас і ви застосуєте щось з цього на практиці. Ну а ще більше корисних фішок для SEO ви як завжди можете знайти в нашому курсі з розкручування і просування блогів. Легких вам картинок!