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

Заказчик кидает вам картинку в 5 Мб, чтобы вы заменили ею background. Так и будете обновлять его в неизменном виде? Конечно же, нет. Большие изображения заставляют сайт грузится медленно и расходую дорогие для кого-то Кб траффика. Чтобы не раздражать других людей, картинки нужно уменьшать.

Во-первых, подумайте, какого максимального размера должна быть картинка. Вполне возможно, что дизайнер сделал ее в 4K (3840 × 2160 px), а ваша картинка не должна тянутся больше, чем на 1920 px. Смело обрезайте ее с помощью графически редакторов, например, Adobe Photoshop.

Во-вторых, для мониторов с высоткой четкостью (например, от Apple) все же потребуется изображение в 2 раза лучше стандартного. Но это не означает, что пользователи не с самым дорогим монитором должны ждать загрузку максимальной картинки. Грузите разные изображения в зависимости от устройства пользователя. Благо CSS и HTML это сделать позволяет.

В-третьих, пользуйтесь сервисами для сжатия изображений без значительной потери их качества. Например, Optimizilla или TinyPNG.

В-четвертых, все создаваемые сайты в открытом доступе проверяйте на скорость загрузки от Google. Вводите адрес и видимо параметры, которые стоит улучшить. Есть подобное расширение для Chrome для локальной разработки.

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