1. Перша сторона оптимізації - швидкість завантаження
2. розміри зображень
3. стиснення картинок
4. Приклад стиснення картинки
5. Як стиснути png зображення
6. Спрайт або як оптимізувати запити до сервера
7. Друга сторона оптимізації - підписи до картинок

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

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

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

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

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

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

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

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

стиснення картинок

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

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

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

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

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

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

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

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

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

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

Відкрити картинку в фотошопі. Натиснути Файл - Зберегти для 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 ви як завжди можете знайти в нашому курсі з розкручування і просування блогів . Легких вам картинок!

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3