Как правильно добавлять изображения на сайт
Постоянно замечаю, что некоторые неплохие сайты слишком долго грузятся. И скорее всего это происходит из-за тяжёлых фотографий.
[0:28] Как делают многие:
Просто добавляют картинку через экспорт, а потом при приближении в Фигме оно теряет в качестве😐
[1:23] Как делаю я:
Первое – сохраняю изображение гораздо большего размера, чем сам фрейм. Допустим, при размере фрейма 1200px я увеличиваю картинку до 1920px (если она будет занимать весь экран, как на примере).
Второе – перед добавлением изображения в Тильду обязательно проверяю, включен ли максимальный размер файла – обычно это надо делать вручную.
Вроде всё готово, результат стал чётче и круче, но есть проблема: теперь такая фотка весит хренову тучу мегабайт))
[2:39] Как это исправить?
🩵заходим на Squoosh.app и добавляем наше загруженное изображение;
🩵уменьшаем качество до ~75;
🩵наслаждаемся сжатием веса на 94%, сохраняем картинку себе и вот теперь добавляем в Тильду.
[3:11] Какой ещё нюанс работы с изображением есть в Тильде:
Можно добавлять картинки для бэкграунда через Add image, но при этом сохранится соотношение сторон, а это не всегда удобно. В таком случае в значении Fit нужно выставить Cover – и тогда менять и обрезать получится как угодно.
[4:04] Как Тильда решает вопрос оптимизации изображений?
🩵поддерживает формат WebP и дополнительно уменьшает размер файлов;
🩵предлагает адаптивный ресайз для разных мониторов;
🩵работает с Retina-дисплеями и медленным интернетом.
Что в итоге? А в итоге мы получаем максимальное сжатие, сохранение хорошего качества и при этом быструю загрузку изображений.
Так что работайте через Image и пользуйтесь Squoosh.app!)🚀
