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

Формат изображений для сайта

Достаточно часто встречаются сайты на которых загружены фотографии в формате png. Это могут быть фотографии товаров в магазине, просто фотографии на сайте или фоновые изображения. Это грубейшая ошибка, которая сильно увеличивает время загрузки сайта.

В каком случае можно использовать изображения в формате png:

• Формат png поддерживает прозрачные слои (при этом если на прозрачном фоне многоцветное изображение вес картинки получается достаточно большой)
• Для изображений в которых мало цветов и нет градиентов (плавного перехода одного цвета в другой)

Для фотографий можно использовать формат jpg.

Но на данный момент оптимальный формат для загрузки фотографий это WebP.

Как конвертировать изображения в формат WebP?

• Использовать специальную программу, например WEBP Converter
• Установить дополнение к вашему графическому редактору
• Использовать онлайн сервисы

Размеры изображений для сайта

Также важным является и размер картинок на сайте. Размер конечно у всех будет разный, но есть один принцип которого нужно придерживаться.

Если ваша картинка на сайте будет размером 500 на 300px то и картинка которую вы грузите должна быть этого размера, а не 2000 на 1200px. Ваша CMS скорее всего подгонит её визуально под нужный размер или вы сами зададите картинке нужный размер в редакторе. Но при этом картинка по факту будет исходного размера, соответственно и весить будет больше и грузиться дольше чем картинка оптимального размера.