Статьи

5 рекомендацій по оптимізації картинок для сайту

  1. 1. Якість зображень
  2. 2. Розмір фотографій
  3. 3. Формат файлів
  4. 4. Назви файлів
  5. 5. Alt і Title

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 - опис, яке можна побачити при наведенні курсору на зображення. Не варто вигадувати занадто довгі описи для цих атрибутів, все повинно бути лаконічно.

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

Ви ж не любите, коли графіка на сайті вантажиться цілу вічність?
Так з яким же розширенням краще зберігати картинки?

Новости

Как оформить группу в вконтакте видео
Дано хотел свой магазин в вк, но не знал с чего начать его делать. Так как хотелось не банальный магазин с кучей ссылок и фото, а красиво оформленный. С меню, с аватаркой. После просмотра видео создал

Как создать видео без программ
Реклама - это один из видов деятельности, который помогает людям продвигать свои товары или услуги. Одним из таких видов рекламы является - раздача листовок или более современное название "флаеров". Раздача

Как создать фото из видео
Кризис заставляет искать дополнительные источники дохода. Одним из таких источников может стать торговля на валютном рынке Форекс. Но чтобы не потерять свои деньги необходимо работать с надежным брокером.

Как оформить диск малыш от рождения до года из фото и видео
Оформить диск "Малыш от рождения до года" из фото и видео можно совершенно разными способами! Кто-то для достижения данной цели идет на шоу-таланты, кто-то пользуется услугами профессионалов, а кто-то

Финансовые новости мира
Вернуться в раздел Профессия экономист Экономисты востребованы в компаниях, где требуется контролировать расходы, правильно рассчитывать средства, где необходим постоянный анализ экономической деятельности

Транспортное средство закон
Пункт 1.5. ПДД гласит: «Участники дорожного движения должны действовать таким образом, чтобы не создавать опасности для движения и не причинять вреда», а в пункте 1.2. указано: «Участник дорожного движения»

Квест кімната дніпро
Законопроект о запрете посещения квестов детьми младше 14 лет прокомментировал один из самых популярных в России квест-агрегаторов. Поправки в городской закон о мерах по предупреждению причинения вреда

Труба в изоляции Valsir Pexal
На сегодняшний день имеется масса самых разных отделочных материалов, которые можно использовать, как внутри, так и снаружи помещения в качестве декоративного элемента, однако большинство из них имеет

Роллы
От того, как и чем мы питаемся зависит очень многое. Это и самочувствие и внешность и общее состояние здоровья. Несмотря на широкое предложение, вопросы правильного и вкусного питания стоят очень остро.

Дешевая доставка суши
Суши можно не только запивать, но и заедать: хорошо с суши сочетаются тэмпура (обжаренные в специальном кляре ломтики овощей, грибы или морепродукты), а также мисо-суп (суп, заправленный бобовой пастой).