Оптимізація зображень є важливою складовою, якщо ви хочете створити успішний сайт, оскільки основна частина даних сайту зазвичай складається саме з картинок. За статистикою зображення складають в середньому більше 20% від загальної ваги веб-сторінки. Результатом оптимізації картинок на сайті буде більш швидке завантаження сторінок, зменшення навантаження на сервер, а також потенційне підвищення SEO рейтингу при ранжуванні сайтів в результатах пошуку. Адже не дарма Google виділив під картинки особливу секцію в розділі «Можливості» інструменту оптимізації сайтів Lighthouse.
В сьогоднішній статті ми розглянемо основні способи оптимізації картинок, які ви зможете виконати досить швидко, просто і самостійно.
Оптимізація зображень – це комплекс дій вебмайстра, які спрямовані на зменшення розміру файлів зображень в максимально можливій мірі без шкоди для якості, а також які сприятимуть ефективному SEO-просуванню. Грамотний процес оптимізації картинок повинен мати потенційний позитивний ефект на результати ранжування вашого сайту в Google та інших пошукових системах.
Великі файли картинок уповільнюють роботу вашого сайту, а пошукові системи ненавидять повільні сайти. Ось чому варто приділити особливу увагу процесу оптимізації зображень.
Сьогоднішній огляд присвячений більше технічній оптимізації картинок, а про SEO оптимізацію картинок читайте в нашому попередньому огляді.
Нижче представлений список з 7 основних кроків, які ви можете зробити, щоб максимально оптимізувати свої картинки на сайті. Кожен крок буде розписаний більш детально нижче в сьогоднішній інструкції.
Існує три найбільш поширених типи файлів, які використовуються для публікації зображень в Інтернеті: JPEG, PNG і GIF. Давайте розглянемо їх більш детально.
.jpg) відносяться до застарілого типу файлів, хоча до цих пір зберігають статус найбільш популярного типу файлу для картинок в Інтернеті. Даний формат дозволяє ефективно стискати зображення, без сильної втрати якості в поєднанні з невеликими розмірами файлів..png) також досить популярні, але мають одне істотне обмеження – якісна картинка в форматі PNG матиме значно більший розмір файлу, ніж ідентичний JPG. Правда, файли PNG краще переносять повторні стиснення і збереження, ніж JPEG. Файли PNG мають 2 типи: PNG-8 (підтримує 256 кольорів) і PNG-24 (підтримує 16 мільйонів кольорів). Зображення в форматі PNG-24 буде більш ніж в три рази більше за розміром файлу, ніж PNG-8, оскільки підтримує значно більше кольорів. Картинки PNG підтримують прозорість, тому найкраще їх використовувати для невеликих іконок і мініатюр..gif) мають більш низьку якість, ніж зображення у форматі JPEG, і, в основному, використовуються для невеликих і простих зображень (таких як іконки, мініатюри і маленькі декоративні картинки). GIF-файли так само, як і PNG, підтримують прозорість. Популярність цьому формату принесла підтримка анімації, і навіть на сьогоднішній день «гіфки» залишаються досить популярними. Правда, для складних зображень і фотографій GIF-файли не підходять.
Існує кілька інших, більш сучасних форматів картинок, наприклад JPEG XR, JPEG 2000 і WebP, які настійно рекомендує використовувати Google. Правда, вони підтримуються не всіма браузерами. Нові формати зображень мають чудові характеристиками стиснення і якості, що забезпечує швидше їх завантаження, і менше споживання даних.
Цілком природно, що ви хочете показувати своїм відвідувачам картинки найкращої якості і в максимально великій роздільній здатності. Це може сподобатися вашим користувачам, але є ризик даремно витратити інтернет-трафік відвідувачів і знизити продуктивність сторінки.
Наприклад, ви сфотографували красиві пейзажі на свій новий телефон (або фотоапарат) і поспішаєте поділитися цими картинками зі своїми читачами. В основному, вебмайстри-аматори негайно завантажують картинки на сервер і не заморочуються навіть елементарною обробкою світлин. У підсумку на сайтах з’являються світлини виду DSC_*****.JPG, кожна з яких має вагу мінімум 3Мб, і роздільною здатністю від 2048×1080 (2К) або 4096×2160 (4К) пікселів. До речі, ви знаєте, що позначає це DSC_*****.JPG? Префікс DSC позначає digital still camera (цифровий фотоапарат), а цифри після нижнього підкреслення – це порядковий номер фото для даного девайса.
Так, ці картинки будуть дуже великими, красивими і деталізованими, але в епоху мобільних телефонів і смартфонів більшості користувачів складно буде насолодитися всіма цими перевагами. До того ж, при стандартному інтернет-підключенні, такі світлини будуть дуже довго завантажуватися.
Приділіть трохи часу хоча б базовій обробці фотографій. Наприклад, якщо зберегти світлину з цифрового фотоапарата (або телефону) в програмі Photoshop (Save for Web) із середнім значенням стиснення (Medium) і збереженням вихідної роздільної здатності, вага фотографії вже буде значно меншою – приблизно в 3-7 разів від оригіналу. При цьому якість картинки не сильно постраждає. Також подумайте про необхідність зменшення роздільної здатності картинки, — оптимальним розміром картинки для веб-сайту є значення 1280×720 пікселів (720p, HD). Крім цього, надайте користувачам можливість переглядати збільшене (оригінальне) зображення у спливаючому вікні або на окремій веб-сторінці.
Amazon провів дослідження, в результаті якого виявилося, що якщо сторінки сайту будуть завантажуватися всього на одну секунду довше, вони втратять 1,6 мільярда доларів за 1 рік. Крім цього відомо, що практично 50% споживачів не будуть чекати більше 3 секунд, поки завантажиться сайт.
Як це відноситься до розміру файлу зображення? Чим більше розмір файлу, тим більше часу потрібно браузеру для завантаження всієї веб-сторінки. Якщо ви не зменшите розмір файлів картинок на своєму сайті, швидкість завантаження сторінки зменшиться, і потенційно менше людей зацікавиться вашим сайтом.
Як зменшити розмір файлу зображення?
Один з ефективних і простих способів зменшити розмір файлу зображення – використовувати команду Зберегти для Інтернету (Save for Web) в програмі Adobe Photoshop. Як уже згадувалося вище, даний підхід дозволить вам зменшити «вагу» картинки приблизно в 3-7 разів. Використовуючи дану команду, постарайтеся знайти оптимальний баланс між мінімально можливим розміром файлу і якістю зображення.
В прикладі на скріншоті, оригінальна картинка мала «вагу» в 611Кб, при збереженні для Веб її розмір зменшився до 171Кб, і з мінімальними втратами вихідної якості. Економія склала більше 72%.
Якщо у вас немає програми Adobe Photoshop, в Інтернеті існує безліч онлайн-інструментів, які ви можете використовувати для безкоштовного редагування зображень.
Яку максимальну «вагу» повинні мати файли зображень? Не розміщуйте на сторінці картинку, розмір файлу якої перевищує 120-150Кб. Цього правила дуже складно дотримуватися, особливо якщо картинка велика і має високу роздільну здатність. В таких випадках надавайте перевагу збереженню якості, а не максимальному стисненню картинки.
На багатьох сайтах досі використовують набір зображень, які виконують декоративну функцію: фонові зображення, кнопки і рамки. Хоча декоративні зображення можуть привнести естетичну привабливість веб-сторінці, їх нагромадження може призвести до збільшення ваги сторінки, а також зменшення швидкості її завантаження.
Особливості використання декоративних зображень:
По можливості використовуйте CSS стилі замість будь-яких декоративних зображень.
Для кращого SEO відносно зображень, важливо використовувати в їх назві релевантні ключові слова. Описова, зрозуміла назва файлу зображення, з використанням релевантних ключових слів – це половина успіху в процесі оптимізації зображень для SEO. Врахуйте, що пошукові системи сканують не тільки текст на вашому сайті, вони також сканують назви файлів зображень, і навіть EXIF дані (метадані) картинок.
Для прикладу, візьмемо цю картинку з кішкою.
Ви можете використовувати загальне ім’я, яке було присвоєно автоматично вашою камерою (наприклад, DSC_1245.JPG). Або ж просто image_01.jpg. Однак було б набагато краще назвати цей файл у вигляді ginger-cat-with-a-big-white-mustache.jpg. Якщо використовувати латиницю, тоді файл може називатися rudiy-kit-z-velikymi-bilymi-vusamy.jpg. Ви також можете використовувати в назві файлу зображення кирилицю, але врахуйте, що не всі сервери можуть нормально працювати з таким кодуванням. Також можливі випадки, коли замість нормальної назви файлу ви отримаєте одні «кракозябри». І ще, намагайтеся уникати пробілів у назві файлів.
Постарайтеся в процесі іменування файлу описовими і декількома словами передавати всю суть, яка зображена на даній картинці.
Атрибут alt – це альтернативне, текстове відображення картинки, коли браузер не може її показати (наприклад, через 404-у помилку). Також даний атрибут використовується для кращої веб-доступності (Web-Accessibility) – для забезпечення доступності Інтернету людям з обмеженими можливостями.
Оптимізовані атрибути alt картинок здатні збільшувати SEO-цінність вашого сайту. Використовуючи релевантні ключові слова в зображеннях, ви зможете позитивно вплинути на рейтинг вашого сайту в пошукових системах. Атрибути alt, поряд з атрибутом title для картинок, — це один кращих способів потрапити вашим картинкам в зображення Google, а також на перші сторінки результатів пошуку.
2 основних правила використання атрибутів alt:
alt, краще використовуйте якомога більше описовий текст, що передає всю суть картинки.
Почитайте більше про способи оптимізації картинок для SEO в нашому практичному огляді.
Після виконання всіх кроків, які описані вище, настав час повідомити пошуковим системам про всі картинки, які є на вашому сайті. Кращим способом для цього до цих пір є використання карти сайту спеціально для картинок (файл sitemap.xml). Пошукові боти відмінно сканують зображення, які вказані у вихідному коді веб-сторінки, а також в CSS стилях. Трохи складніше справи йдуть з картинками, які викликаються скриптами JavaScript. Щоб пошукові системи дізналися про всі зображення вашого сайту, ви повинні вказати їх місце розташування в сайтмапі для зображень. До того ж в сайтмап картинок можна додавати caption (підпис) і title (заголовок) до зображень.
Для генерації карти сайту картинок ви можете використовувати будь-який з онлайн-генераторів сайтмапів, яких в мережі Інтернет достатньо багато.
Після розміщення sitemap для картинок на сервері, вкажіть шлях до цього файлу у файлі robots.txt в спеціальній рядку (директиві Sitemap). Наприклад, на нашому сайті використовується наступна директива:
Sitemap: https://sebweo.com/sitemap-image.xml
Після цього ви можете надіслати карту сайту для картинок в Google за допомогою інструменту Search Console.
Використання файлів Sitemap не гарантує, що всі ваші зображення будуть проіндексовані Google, але цей крок обов’язково варто виконати в рамках процесу оптимізації зображень.
Весь сенс оптимізації ваших зображень зводиться до того, щоб зменшити їх розмір, збільшити швидкість завантаження сторінки, а також зробити позитивний вплив на рейтинг свого сайту в результатах пошукових систем.
В сьогоднішньому огляді ви познайомилися з 7-ма основними і простими кроками, які ви можете зробити, щоб максимально оптимізувати картинки на своєму сайті. Ми торкнулися лише поверхні даної великої теми, оскільки оптимізація зображень є досить складним завданням. Якщо у вас виникають питання (або зауваження) щодо сьогоднішнього уроку, не соромтеся писати їх в розділі коментарів нижче.
Дякуємо, що читаєте нас!
Навчання за кордоном вже давно асоціюється з якісною освітою, новими можливостями та безліччю перспектив. Але…
Вибір майстра для ремонту та перетяжки меблів – завдання, яке потребує вдумливого підходу. Адже від…
Вибір ідеального хостингу під свій сайт може бути досить заплутаною справою, особливо коли існує багато…
Щоб уникати помилок, потрібно набиратися досвіду; щоб набиратися досвіду, потрібно робити помилки Лоуренс Пітер
Коротке визначення Чорного SEO Чорне СЕО (або Чорна оптимізація) — це будь-яка практика, метою якої…
Отримання прав водія категорії C відкриває двері до професійної діяльності, пов'язаної з керуванням вантажними автомобілями.…