Отображайте изображения с правильным масштабом на вашем сайте WordPress или Joomla

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

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

Отображение масштабированных изображений в WordPress и Joomla с помощью CSS

Сколько места занимают изображения на веб-страницах? Четких правил нет, но, учитывая их важность и повсеместность, ответ определенно — очень много. Если вы используете изображения, которые все равно будете масштабировать, имеет смысл экономить и предоставлять пользователям WordPress или Joomla изображения, уже уменьшенные в масштабе, чтобы ускорить загрузку сайта.

CSS помогает с помощью набора относительно малоизвестных, но бесценных атрибутов: srcset , sizes и media . Эти атрибуты — все из которых поддерживаются большинством современных веб-браузеров — позволяют указать, какие версии изображений будут отображаться в зависимости от размера области просмотра.

Атрибут srcset дополняет обычную src . Как следует из названия атрибута, вместо указания одного изображения, вы используете его для указания списка масштабированных изображений и ширины, при которой должно использоваться каждое из них. В сочетании с ним используется sizes , с помощью которого можно определить, когда отображать изображения в зависимости от ширины области просмотра.

Подробнее об этих параметрах можно прочитать здесь , но хорошая новость в том, что в последние несколько лет WordPress автоматически изменяет масштаб ваших изображений и отображает их в соответствующих размерах для вашей аудитории. Результат поразителен: портретное изображение размером 511 КБ уменьшается до 42 КБ на мобильных устройствах.

Автоматическое масштабирование и оптимизация с помощью ImageRecycle

Что касается размеров изображений, чем меньше, тем лучше, если при этом не страдает качество. Хотя WordPress помогает в этом, используя атрибут srcset , есть и другие способы минимизировать размеры изображений, в частности, масштабирование и сжатие изображений.

ImageRecycle — это плагин, который позволяет одновременно изменять масштаб и сжимать изображения, и он доступен как для WordPress, так и для Joomla. Самое приятное, что с помощью ImageRecycle вы можете автоматически изменять масштаб и сжимать изображения.

Функция изменения масштаба особенно полезна, если вы используете стоковые изображения в своем блоге на WordPress или Joomla. Эти изображения часто имеют непропорционально большой размер, чтобы соответствовать всем целям, включая печатные СМИ. В интернете крайне маловероятно, что вам когда-либо понадобится использовать их в полном разрешении. С помощью ImageRecycleвы можете автоматически уменьшать масштаб больших изображений до максимальной высоты или ширины при загрузке.

В дополнение к масштабированию используется сжатие, которое оптимизирует размер изображения без ущерба для качества. С помощью сжатия с потерями можно уменьшить занимаемое изображением пространство до 80%. Это относится не только к исходным изображениям, но и к изображениям, масштабированным WordPress. И снова ImageRecycle может сделать это автоматически за вас.

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