Картинки делают сайт привлекательным и красивым. Но они же могут сделать его медленным. А медленные сайты раздражают пользователей — в конце концов, никто не хочет ждать.
Чтобы сделать сайт одновременно красивым и быстрым, картинки нужно оптимизировать. И вот как это можно сделать:
- Уменьшите разрешение. Каждая картинка — это комбинация пикселей. Чем больше пикселей в изображении, тем больше его размер. Но при уменьшении количества пикселей, теряются детали картинки.
- Уменьшите количество цветов. У каждого пикселя в изображении есть значение цвета. Чем больше в картинке цветов, тем больше это значение занимает места. Уменьшив количество цветов, можно уменьшить размер картинки в разы — но и качество при этом может пострадать.
- Измените метод сжатия. Методы сжатия бывают разные. JPEG — самый эффективный, но картинка часто искажается. PNG поддерживает прозрачность и не даёт искажений, но и картинки получаются больше в размере. WebP объединяет достоинства JPEG и PNG, но для нормальной работы с ним нужен современный процессор. Также есть разные версии этих методов, со своими плюсами и минусами.
Не каждая картинка должна быть 4096*2160 с миллионом оттенков — черно-белому фото хватит 256 цветов, а маленькой иконке не нужно разрешение больше 128*128. Для любого изображения можно найти идеальное соотношение «размер / качество» вручную, но это неудобно и долго.
К счастью, для WordPress есть плагины, которые сделают это за вас.
EWWW Image Optimizer
Бесплатный плагин
Лучший плагин для оптимизации изображений. EWWW оптимизирует все картинки — как новые, так и уже загруженные на сайт. Так что, если некоторые изображения нужно сохранить в полном качестве — добавьте их в исключения.
Плагин поддерживает многие методы сжатия. Самые эффективные — TinyJPG и TinyPNG. Они позволяют уменьшать размер картинок до 60% без видимой потери качества.
Чтобы подключить TinyJPG и TinyPNG, вам понадобится ключ API — специальная лицензия, которая позволит EWWW использовать эти методы сжатия. Получить ключ бесплатно можно на https://tinypng.com/developers.
WP Smush.it
Бесплатный плагин
WP Smush.it — хорошая альтернатива EWWW. Хотя его алгоритмы не настолько хороши, в WP Smush.it есть функция автоматического изменения разрешения. Просто задайте максимальное разрешение изображений и плагин будет автоматически подгонять под него все картинки, которые вы загружаете на сайт.
Также WP Smush.it умеет разбивать .gif анимацию на индексированные .png. Это оптимизирует размер анимации на сайте.
В целом, хотя EWWW и сжимает лучше, но функционал WP Smush.it — богаче.
Imsanity
Бесплатный плагин
Простейший плагин для сжатия картинок. Задайте максимальные высоту, ширину и качество сжатия, после чего Imsanity будет автоматически сжимать все изображения под указанные вами стандарты.
Imsanity — не настолько гибкий плагин, как EWWW или WP Smush.it, но он намного быстрее. Поэтому если вашему сайту не хватает мощности хостинга — лучше использовать Imsanity. А вот если хостинг хороший или плагинов на блоге мало — установите EWWW или WP Smush.it.
Hammy
Бесплатный плагин
Hammy получает от нас приз «За неординарный подход». Плагин рассчитан на сайты с адаптивным дизайном и потому создает множество версий для каждого изображения. Таким образом, пользователи с телефонами видят маленькую картинку, которая загружается за миллисекунды, а пользователи с большими мониторами — полноразмерную, без потерь качества.
Hammy позволяет заметно ускорить работу мобильных версий сайта. Однако пользователи ПК не почувствуют никакой разницы в скорости загрузки вашего сайта.
Похожий метод использует плагин PB Responsive Images.
Lazy Load
Бесплатный плагин
Lazy Load ускоряет начальную загрузку страницы, но увеличивает время загрузки сайта в целом. Плагин загружает только те изображения, которые видны читателю в данный момент — все остальные подгружаются по мере пролистывания страницы.
Решение интересное — но оптимальным оно становится только на сайтах с HTTP/2. На сайтах с HTTP 1.1, Lazy Load создает лишние HTTP-запросы, которые забивают трафик. Поэтому перед установкой Lazy Load, уточните версию HTTP у своего хостера.
Требование к качеству иллюстраций
Unihost рекомендует следовать формату Retina. Retina — это когда изображение настолько четкое, что глаз читателя не может увидеть отдельные пиксели. Впервые название Retina использовала Apple, чтобы описать экран нового iPad Air. С тех пор, так называют все высокочеткие экраны и контент для них.
Другие советы об ускорении сайта — в статье «9 способов ускорить работу сайта». Также вас может заинтересовать переход на HTTP/2 — новый стандарт, который делает сайты еще быстрее.
Понравилась статья? Подписывайтесь на новостную рассылку блога Unihost и наши группы в социальных сетях, чтобы не пропустить другие интересные материалы!