Karina | 02.10.2014
При створенні нової сторінки на сайті велика увага приділяється контенту. Основний час витрачається на текст: його структурують, роблять читабельним, вибирають шрифт і всіляко оптимізують. Після цього справа доходить до графіки, яка буде доповнювати текст і композицію в цілому.
Але часто трапляється так, що людина забуває або просто не знає про те, що картинки теж потребують оптимізації. І справа тут стосується не тільки просування сайту.
По-перше, підготовка і правильне оформлення зображень для сайту позитивно впливає на швидкість завантаження сторінки. Ви ж не любите, коли графіка на сайті вантажиться цілу вічність? А тепер уявіть собі, що інформативність який-небудь статті наполовину залежить від картинок, що знаходяться в ній. Наприклад, інформація про зовнішній вигляд різних порід кішок. Без ілюстрацій така стаття стає практично марною. А якщо ці ілюстрації вантажаться довго, то у користувача рано чи пізно скінчиться терпіння і він просто закриє ваш сайт.
По-друге, оптимізація зображень корисна для SEO, оскільки люди зможуть знаходити ваш сайт під час пошуку картинок. Візьмемо для прикладу ту ж статтю про котячих породах: якщо всі фотографії кішок правильно підписані, вони можуть з'явитися у видачі пошукової системи і принести вам додатковий трафік.
Нижче перераховані 5 рекомендацій по оптимізації картинок для сайту. Дотримуватися цих правил легко, і при цьому вони дуже допоможуть вашому сайту і вашим користувачам.
1. Якість зображень
Висока якість фотографій - це добре, але в Інтернеті діє трохи інше правило: оптимальне співвідношення якості картинки і ваги файлу. Існує велика кількість редакторів, які можуть зменшити вагу зображення на 50-70% без помітної втрати якості. Так, в процесі такої оптимізації фотографія безумовно дещо втрачає, знижується насиченість деяких квітів, але все це робиться таким чином, що людське око майже не бачить змін. Картинка залишається такою ж чіткою і презентабельною, але важить, припустимо, вже не 400 Кб, а 90 Кб. Чим більше фотографій знаходиться на одній сторінці, тим більше уваги потрібно приділяти їх вазі.
2. Розмір фотографій
Дуже важлива тема - розмір фотографій на вашому сайті. Якщо картинка використовується тільки в якості прикраси, ви можете не завантажувати її в великому розмірі і не робити клікабельно для збільшення. А ось зображення, що несуть корисну для користувача інформацію, повинні бути завантажені в розмірі, який дозволяє легко ознайомитися з їх змістом. В першу чергу це стосується інфографіки та інших картинок з текстом, а також фотографій товарів в інтернет-магазинах. Всі дрібні деталі повинні бути видні.
3. Формат файлів
Найбільш використовуваними форматами файлів зображень в Інтернеті є JPEG, PNG і GIF. Так з яким же розширенням краще зберігати картинки? Давайте зупинимося докладніше на кожному з них і розберемося, коли якийсь формат краще використовувати:
JPEG (файли з розширенням .jpg, .jpeg) Популярний растровий формат зображень, алгоритм якого стискає картинку з втратою якості. Він підійде для фотографій і різнокольорових картинок з плавними переходами кольорів, але не підійде для креслень, скріншотів, зображень з текстом і різким контрастом між квітами. PNG (файли з розширенням .png) Даний формат також растровий, але на відміну від JPEG його алгоритм дозволяє стискати зображення без втрати якості. Якщо вам потрібно зберегти картинку з друкованим текстом або інше зображення, в якому потрібно чіткість, вибирайте розширення .png. Також формат підтримує прозорість, в тому числі і часткову. GIF (файли з розширенням .gif) Цей формат також може зберігати стислі дані, не втрачаючи якості, але підтримує тільки 256 кольорів, тому для зберігання повнокольорових фотографій GIF не підходить. В Інтернеті найчастіше цей формат використовується для анімації, картинок з малою кількістю квітів і зображень з наявністю повністю прозорих пікселів (наприклад, прозорий фон).
Нижче наведено приклад фотографії, збереженої з різними розширеннями файлу. Найбільш відчутна різниця при збереженні файлу в форматі GIF - з'являється т. Н. «Драбинка»:
А це скріншот тексту, який було збережено спочатку в форматі PNG, а потім в JPEG з якістю «нижче середнього». Зверніть увагу на артефакти, які з'явилися у другому варіанті:
Скріншот, збережений у форматах PNG і JPEG. У другому випадку текст втрачає чіткість через сильний стиснення JPEG.
4. Назви файлів
Перед тим як завантажити зображення на свій сайт, постарайтеся дати їм зрозумілі назви. Є дві причини, чому варто це робити. По-перше, вам самому буде легше орієнтуватися в своїх файлах, адже, наприклад, назва teapot-on-the-beach.jpg вже підказує про те, що знаходиться на фото, на відміну від назви IMG_6078.jpg. А по-друге, не забувайте про пошукових системах, які теж читають назви ваших файлів і використовують цю інформацію при видачі.
5. Alt і Title
Додавайте до зображень на сайті атрибути ALT і TITLE (які повинні знаходитися в тезі IMG). Саме вони допомагають пошуковим машинам визначати, що зображено на картинці. Alt - це текст, який відображається на сторінці замість картинок, якщо у користувача з якоїсь причини вони не завантажилися. Title - опис, яке можна побачити при наведенні курсору на зображення. Не варто вигадувати занадто довгі описи для цих атрибутів, все повинно бути лаконічно.
Використовуйте ці нескладні прийоми і ваш сайт буде завантажуватися швидко, а пошукові роботи будуть краще знати, що знаходиться на картинках. І якщо дані рекомендації був вам корисні, пропонуємо також прочитати наш матеріал про те, які фотографії привертають увагу користувачів на сайті .
Ви ж не любите, коли графіка на сайті вантажиться цілу вічність?Так з яким же розширенням краще зберігати картинки?