Які формати зображень на моєму веб-сайті Kokmoka

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

моєму

Різні формати

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

Ось зведена таблиця форматів зображень, які можна використовувати в Інтернеті.

Дозвіл

Роздільна здатність зображення - це співвідношення між розміром та кількістю пікселів, яке воно містить.

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

Роздільна здатність взагалі не має значення в Інтернеті, сьогодні важливим є лише розмір зображення в пікселях (за винятком svg). Якщо ви використовуєте Photoshop, під час створення файлу вставте потрібне число у поле роздільної здатності, це нічого не змінить!

Розмір

Розмір пікселів кожного зображення буде залежати від контексту (де це зображення буде розміщено на сайті).

Для зображення, призначеного для фону веб-сайту, яке займе 100% сторінки, необхідно досягти компромісу між розміром/вагою та якістю на всіх екранах. Ми рекомендуємо розмір 1920 x 1080 пікселів, що дозволяє правильно відображати на більшості екранів.

Стиснення jpg

Одним з найважливіших параметрів при збереженні JPEG є рівень стиснення, що називається "Якість" у Photoshop. Чим більше компресія (чим вища якість), тим більша вага. Ви повинні знайти хороший компроміс між вагою та якістю зображення, для цього вам потрібно перевірити рівень стиснення.

Як правило, ступінь стиснення 80 забезпечує збереження якісної картинки.

Інша оптимізація зображення

Можна заощадити ще кілька кілобайт за допомогою інструментів стиснення, таких як TinyPNG. Ці інструменти видаляють приховані дані, що містяться у файлах зображень (метадані, кольорові профілі тощо), які не впливають на візуальний візуалізацію зображення.