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

Давайте выясним, как размещать на сайте большое количество изображений, при этом не замедляя скорость его загрузки. Для этого потребуется оптимизация изображений и инструмент ImageKit.

Необходимость оптимизации изображений для мобильных устройств

По данным HTTP Archive:

• Средний размер десктопной веб-страницы в 2019 г. составляет 1939,5 КБ.
• Средний размер мобильной – 1745,0 КБ.

График HTTP Archive, демонстрирующий средний размер десктопных и мобильных страниц.

Посмотрим, что HTTP Archive может сказать о размере изображений.

График HTTP Archive, демонстрирующий размер изображений на десктопных и мобильных сайтах.

На сегодняшний день:

• Средний размер изображений на десктопных сайтах составляет 980,3 КБ от общего размера веб-страницы в 1939,5 КБ.
• Средний размер изображений на мобильных сайтах составляет 891,7 КБ от общего размера веб-страницы 1745,0 КБ.

Мы выяснили, что изображения увеличивают вес сайтов и потребляют много трафика. Поэтому нужно применять правильную стратегию их оптимизации.

1. Правильный выбор размера изображений

Предположим, что на Unsplash вы ищете несколько изображений для сайта.

Пример фото, которое вы можете найти на Unsplash.

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

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

Оригинальные размеры изображения от Unsplash: 5591×3145 пикселей.

Не нужно использовать на сайте изображения объемом более 1 МБ и размером более 1200 и 2000 пикселей. Кроме этого мобильно оптимизированные сайты отображают изображения различных размеров в зависимости от устройства или браузера, на котором они просматриваются.

Вот чего вы не должны делать:

• Изменять размеры изображений по одному. Это отнимает много времени и будет неэффективно.
• Полагаться на то, что браузер сможет подстроить размер изображения самостоятельно.

Вместо этого лучше интегрировать сервер изображений (на своем веб-хостинге) с ImageKit. Также можно использовать медиа-библиотеку ImageKit для хранения ваших файлов.

Вот как просто загрузить новый файл в медиа-библиотеку ImageKit.

После интеграции ImageKit начнет контролировать размеры используемых изображений.

ImageKit позволяет контролировать размер изображений.

Вот как это происходит:

• Параметр Image Origin сообщает ImageKit, откуда нужно взять изображение для оптимизации. В данном случае это медиа-библиотека ImageKit.
• Параметр Old Image URL указывает, где располагаются исходные изображения.
• Блок New Image URLs объясняет, как можно использовать оптимизированные изображения.

Формула достаточно проста: вы берете оригинальный URL-адрес изображения и меняете его на URL, предоставленный ImageKit.

Для изменения размеров изображений можно использовать параметры преобразования. Например, это фотография, взятая с Unsplash, размещена на моем сервере.

Как отображается полноразмерное изображение, взятое с Unsplash.

Затем я поменяю URL на адрес, предоставленный ImageKit. После чего добавлю параметры изменения размера изображения и добавлю оставшуюся часть URL-адреса.

Вот что происходит, когда я использую ImageKit для автоматического изменения размера изображения до 1000×560 пикселей.

ImageKit позволяет определять, как нужно изменить размер изображений.

Чтобы создать измененное изображение, я преобразовал URL-адрес ImageKit в следующий:

https://imagekit.io/vq1l4ywcv/tr:w-1000,h-560/…

Именно параметры width (w-) и height (h-) уменьшили размеры файла. Теперь изображение не настолько четкое, как исходное. Но это потому, что его сжали на 80%.

Результат изменения размера изображений с помощью ImageKit.

Ранее это был файл объемом 3,6 МБ и размером 5591×3145 пикселей. Теперь он весит 128 КБ, а размер изображения стал 1000×560 пикселей.

ImageKit позволяет изменять размеры изображений с помощью преобразования на основе URL. Это работает следующим образом:

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

2. Использование более быстрых форматов изображений

Формат PNG используются для логотипов, изображений с текстом и т.д. Но он не подходит для сохранения фотографий из-за слишком больших объемов.

Формат GIF является анимированным аналогом формата PNG и также использует сжатие без потерь.

Формат JPG лучше всего подходит для сохранения красочных изображений и фотографий. Он меньше по размеру и хорошо сжимается с потерями. Можно сжать JPG настолько, чтобы получить приемлемый размер.

Формат WebP обеспечивает на 25-34% меньший размер файла, чем JPG. Более того, вы сможете использовать сжатие с потерями и без потерь для WebP, чтобы уменьшить их размер.

Эта настройка назначает сервис ImageKit ответственным за предоставление лучшего формата файла.

Когда этот параметр указан, ImageKit автоматически определяет наилучший формат для предоставления изображений сайта на конкретном пользовательском устройстве.

3. Сжатие изображений

Теперь поговорим о сжатии изображений. Они бывают двух типов:

Без потерь:

Используется в форматах PNG и GIF. Чтобы сжать файл, из него удаляются метаданные. Благодаря чему целостность изображения остается неизменной, но и сжатие файлов не так существенно.

С потерями:

Применяется в форматах JPG и WebP. Чтобы сжать файл, некоторые части изображения «теряются». В большинстве случаев это едва заметно.

По умолчанию ImageKit устанавливает показатель оптимизации на 80%, что позволяет уменьшить размер файла на 20-25%.

ImageKit позволяет выбрать уровень сжатия с потерями, который нужно применить к файлам JPG.

Также не забудьте активировать дополнительные параметры сжатия.

ImageKit предоставляет дополнительные настройки оптимизации изображений JPG и PNG.

Параметр Save a Copy сохраняет исходные изображения на сервере ImageKit. Второй параметр (Preserve Image Metadata) позволяет применять сжатие без потерь, когда это возможно.

Последняя настройка PNG Image Compression Mode позволяет установить уровень оптимизации без потерь для PNG: максимальный, минимальный или нулевой.

Сравнение оригинального и сжатого JPG-изображения.

4. Сохранение и получение изображения с внешнего сервера

Существует два способа получения изображений от ImageKit. Первый – это загрузка изображений в хранилище сервиса.

ImageKit позволяет хранить используемые изображения в своей медиа-библиотеке.

Второй способ – интеграция с вашим сайтом или внешним хранилищем. В этом случае вы получаете конечные URL.

ImageKit интегрируется с системами управления контентом и сторонними хранилищами.

5. Добавление CDN

CDN – еще один важный инструмент оптимизации больших хранилищ изображений. Считайте его вторым сервером, который кэширует ваш сайт и обслуживает запросы через центры обработки данных, расположенные значительно ближе к посетителям сайта. В результате отправка данных вашего сайта и тысяч его изображений из Нью-Йорка в Бангладеш происходит невероятно быстро.

Заключение

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