Оптимизируйте ваши изображения с заранее определенными размерами изображений [WordPress Tip]

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

Размеры изображений имеют жизненно важное значение, поскольку изображения создаются автоматически в соответствии с размерами, указанными при загрузке изображений. Это гарантирует, что даже если у вас есть оригинальное изображение шириной 3000 пикселей, оно никогда не будет использовано, если достаточно 600 пикселей. В идеале пространство шириной 600px должно использовать изображение шириной 600px, а не уменьшать его.

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

Рекомендуемое чтение: Оптимизация JPEG для Интернета – полное руководство

Как WordPress обрабатывает изображения

Если вы когда-либо вставляли изображение в статью WordPress, вы должны были выбрать селектор размера изображения. Это позволяет вставлять маленькие, средние и большие версии изображений. Фактические размеры для них могут быть изменены в настройках WordPress.

Всякий раз, когда вы загружаете изображение через WordPress, оно генерирует версии этих изображений и сохраняет их отдельно. Например, если вы загрузите изображение 1200 × 800, WordPress может создать версии 100 × 100, 600 × 400 и 900 × 600. Когда вы вставляете изображение и выбираете «средний», будет использоваться фактическая версия носителя, а не сокращенная версия оригинала.

Это очень выгодно, поскольку экономит полосу пропускания на сервере и время обработки на клиентском компьютере. Думаю, неудивительно, что загрузка изображения 600 × 400 быстрее, чем загрузка изображения 1200 × 800.

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

Правильное изображение в нужном месте

Конечная цель должна заключаться в том, чтобы всегда использовать соответствующие размеры изображения. Если вам нужно изображение 440 × 380, то получите изображение с таким точным размером с сервера. Есть два основных места, где вы будете использовать загруженные изображения: избранные изображения и изображения в посте – я бы посоветовал сначала сосредоточиться на избранных изображениях.

Во всех статьях, кроме самых визуально ориентированных, не имеет значения, будет ли изображение в посте шириной 220 или 245 пикселей. Какая бы версия у вас была доступна, она будет одинаково полезна. Однако показанные изображения обычно отображаются в общих размерах. Для списков статей вы можете использовать миниатюру 178 × 178, для заголовков статей вы можете использовать изображение шириной 1200 × 600.

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

Так что все это сводится к следующему: не было бы замечательно, если бы у нас было два дополнительных размера изображения, которые мы могли бы использовать для показанных изображений? Эти размеры изображения будут созданы рядом с остальными при загрузке изображения. Хорошей новостью является то, что WordPress предлагает вам довольно простую функцию.

Создание размеров изображения

Используя функцию add_image_size (), вы можете определить все размеры изображений, которые нужны вашему веб-сайту. Давайте создадим два примера, упомянутых выше. Поместите приведенный ниже код в файл functions.php вашей темы или в файл плагина.

add_image_size (‘featured_thumbnail’, 178, 178, true);
add_image_size (‘featured_wide’, 1200, 600);

Как видите, эта функция принимает четыре параметра. Первый параметр позволяет установить имя для размера. Второй параметр – максимальная ширина, третий – максимальная высота. Четвертый параметр устанавливает жесткую обрезку. Если установлено значение true, изображение будет создано в точном размере, который вы укажете.

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

Использование размеров изображения

Эти размеры изображения могут быть использованы в ряде функций, связанных с извлечением мультимедиа. Давайте сначала посмотрим на избранные изображения. the_post_thumbnail () обычно используется для отображения избранного изображения поста. Следующий код может быть помещен в цикл WordPress:

the_post_thumbnail (‘featured_thumbnail’);

Первый параметр этой функции позволяет указать размер изображения для использования. Поскольку я указал “featured_thumbnail”, будет использоваться версия этого файла 178 × 178.

Существует ряд других функций, таких как wp_get_attachment_image () и wp_get_attachment_image_src (), которые также используют параметр размера изображения. Всякий раз, когда вы используете такую ​​функцию, вы всегда должны указывать соответствующий размер изображения.

Регенерирующие миниатюры

Если у вас уже есть сайт, вы не сможете оптимизировать свои статьи ретроспективно, просто указав размер изображения. Размеры изображений учитываются только при загрузке нового изображения, поэтому они не применяются к изображениям, уже находящимся в системе.

Не бойся, регенерировать миниатюры плагин все будет лучше! Этот плагин может регенерировать миниатюры для всех ваших изображений, принимая во внимание все определенные размеры изображений. Он также может быть нацелен на конкретное изображение, что полезно, если у вас есть несколько изображений или вы проводите некоторое тестирование.

Как только ваши эскизы будут восстановлены, вы должны увидеть оптимизированные версии, загруженные на ваш сайт. Вы можете проверить это, просмотрев источник изображения. Если вы загрузили «example.jpeg» и видите «example.jpeg» в качестве источника для избранного изображения, значит что-то не так. Если вы видите «example-178 × 178.jpeg», то все хорошо; оптимизированное изображение показано.

Адаптивные изображения

Одной из сложностей в поддержании оптимизированного сайта является отзывчивость. Когда я просматриваю статью на iPad, изображение большого размера в посте будет уменьшено, так как максимальная ширина будет 786 пикселей или около того.

Самое простое решение – использовать такой плагин, как неестественный, Hammy работает на основе ширины содержимого вашей темы (в отличие от ширины окна браузера) и на этой основе может предоставлять оптимизированные изображения. Это особенно удобно для мобильных пользователей, где могут возникнуть проблемы с вычислительной мощностью и пропускной способностью.

Читайте также: 5 методов подачи настоящих отзывчивых изображений

Дальнейшая оптимизация изображения

Как я уже упоминал во введении, существует множество способов оптимизации изображений. От спрайтов до сжатия изображений можно использовать множество методов, чтобы уменьшить время загрузки, которое идет рука об руку с изображениями. Ashutosh KS написал отличную статью, демонстрирующую 9 плагинов WordPress для улучшения производительности изображений, я предлагаю прочитать его!

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