Оптимізація зображень для сайту

Щоб сайти завантажувалися швидко, потрібно оптимізувати зображення: зменшити ширину або висоту за допомогою будь-якого графічного редактора (можна використовувати безкоштовні онлайн-редактори), а потім у сервісі TinyPNG стиснути фото.

Що легша картинка, то швидше вона завантажується. Вага залежить від двох параметрів:

1. Величини в пікселях за шириною і висотою (фотографія розміром 3000х2000 пікселів важча, ніж фото 300х200 пікселів).
2. Змісту самої картинки - що більше на фото дрібних деталей і кольорів, то вона більше важить.

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

Яким має бути розмір зображення?

Усі зображення великого розміру під час завантаження на Тільду автоматично зменшуються до 1680 px по більшій стороні. Картинки менше 1680 px зберігають оригінальний розмір.

Оскільки зображення зменшується програмним методом, якість погіршується, а вага оптимізується недостатньо добре.

Перед завантаженням на Тільду фотографії великого розміру скоротіть щонайменше до 1680 px по більшій стороні.

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

Щоб дізнатися розмір зображення, додайте блок на сторінку, увімкніть сітку (у налаштуваннях будь-якого текстового блоку) і подивіться, скільки колонок займає фотографія. Одна колонка - 60 px, відстань між колонками - 40 px.

Як максимально зменшити вагу зображення?

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

Приклади таких сервісів:

• TinyPNG
• Squoosh
• Kraken
• Compressor
• Compressjpeg
• ImageOptim (вимагає встановлення на Mac)

Приклад оптимізації зображення

Розглянемо на прикладі фотографії Christoph Bengtsson Lissalde, завантаженої з Unsplash, як оптимізується зображення.

Вихідні розміри файлу: 4405×2478 px і 3,5 мб.

Завантажимо її на Тільду як є. Фотографія обріжеться до 1680×945 px, а її розмір стане 1,2 мб.

Відкриємо вихідний файл у Photoshop, поміняємо розміри на 1680×945 px, а потім збережемо, то отримаємо 832 кб.

Завантажимо фото в TinyPNG. Фотографія зменшилася до 353 кб.

Якість фотографії не змінилася.

Читати також - Як скласти правильний robots.txt?

Вітаю всіх на нашому інтернет-журналі. Я - Вольдемар Воронцовський. Цей матеріал написаний і опублікований одним з наших авторів (експертом у своїй справі). За кожною статтею стоїть досвідчений співробітник нашої команди, який перевірив матеріал на помилки і актуальність. Познайомитися з нами можна в розділі - «Редакція сайту».

Підписуйтесь на наш канал в Telegram 👉 там все про крипту та інвестиції

• Перелінковка внутрішніх сторінок сайту
• Як скласти правильний robots.txt?