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

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

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

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

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

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

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

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

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

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

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

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

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

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