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

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

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

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

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

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

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

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

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

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

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

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

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

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