01 Апр 2019
оптимизация фото tip-topstudio wordpress

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

Для тех, кому нужно быстро и просто. Изменяйте размеры фотографий перед заливкой на сайт. Или просите фотографов подготовить фото для размещения в интернете. Для основных страниц обязательно используйте оптимизацию изображений. Это можно делать как вручную, так и через многочисленные плагины (Tinypng, Smush it, EWWW Image Optimizer). Если владеете Paint или, в идеале, Photoshop (хотя бы на уровне изменить размер изображений по комбинации «ctrl i») – уменьшайте ширину до 1920 пикселей.

 

Основной материал

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

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

1. Оптимизация форматов.

Мы рекомендуем клиентам использовать форматы изображений по назначению. К примеру, png важен только тогда, когда в наличии растровая графика и присутствует прозрачность в изображении. Если у вас растр и нет прозрачности – смело конвертируйте в jpeg (jpg). Если у вас векторная графика и важно сохранять пропорции на всех экранах без потери качества вообще – лучше не конвертировать такие изображения в растр.

2. Изменения размеров изображения.

Учитывая адаптивность (респонсивность) верстки, нужны фотографии шириной минимально от 320px (пикселей) до максимальных 1920px (пикселей). Первые для самых маленьких среднестатистических экранов телефонов, а последнее – на среднестатистические большие мониторы. Стандартные на ноутбуках 13-15 дюймовых – 1200-1400 пикселей. Поэтому изображения для слайдеров мы рекомендуем уменьшить до 1920 пикселей в ширину, а небольшие картинки в преимуществах или виджетах – не делать меньше 320 пикселей, если на мобильном такие изображения должны быть корректными.

3. Оптимизация без потери качества. Ее еще называют «web формат», «экспорт для web».

Вы можете воспользоваться как бесплатными сервисами, так и платными. Из-за выборочного уменьшения количества цветов в изображении требуется меньше байтов для хранения данных. Эффект почти незаметен для человеческого глаза, но влияет на размер изображения. Tip-topstudio рекомендует клиентам TINYPNG.COM. Как показала практика – к такой оптимизации Google Pagespeed относится очень лояльно. Или GTMETRIX позволяет также скачать оптимизированные изображения. Оптимизировать уже залитые на сайт фото позволяют плагины Tinypng, Smush it, EWWW Image Optimizer – но у них есть ограничения в использовании и премиум версия для тех, кто хочет отменить лимиты на оптимизацию.

 

Учитывая специфику WordPress важно также выделять оптимизацию размеров миниатюр внутри системы.

Важно деактивировать неиспользуемые размеры и снизить размер сайта и бекапов. Остальные максимально адаптировать под потребности блоков по ширине и высоте использования. После чего обязательно воспользоваться плагином Force Regenerate Thumbnails или аналогом.

Справка:
В зависимости от шаблона (темы, темплейта) – у вас может быть неограниченное количество миниатюр (как правило от 5 до 15 размеров каждой фотографии). Правила их создания, размеры, параметры обрезки – задаются для корректного отображения картинок в разных функциональных блоках. К примеру, в блоге вам нужно фото квадратное 1000 на 1000 пикселей. А для блока команды прямоугольное 1000 на 1600 пикселей. И обрезка выполняется автоматически при заливке каждого изображения, ведь ни разработчик, ни система не знает, какое изображение и в какой блок вы будете использовать. Потому все изображения режет одинаково и создает из одного изображение максимально возможное количество миниатюр.

Владимир Замковой

Владимир Замковой

Занимаюсь разработкой с 2014 года. Создаю шаблоны и плагины Wordpress и кастомизирую все подряд