Оптимизируйте ваши изображения с заранее определенными размерами изображений [WordPress Совет]
Оптимизация изображений на веб-сайте является непростой задачей. Вы можете использовать меньше изображений, сжатых изображений, спрайтов или svg; список можно продолжить. Одним из мест, где запутались многие сайты WordPress, является определение размеров изображений, что является решающий аспект оптимизации сайтов с большим содержанием.
Размеры изображений имеют жизненно важное значение, поскольку изображения создаются автоматически в соответствии с размерами, указанными при загрузке изображений. Это гарантирует, что даже если у вас есть исходное изображение шириной 3000px, оно никогда не будет использовано, если достаточно изображения 600px. В идеале пространство шириной 600px должно использовать изображение шириной 600px вместо уменьшения большего.
В этой статье я проведу вас через какие размеры изображения а также как их определить.
Как 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 () которые также используют параметр размера изображения. Всякий раз, когда вы используете такую функцию, вы всегда должны указать соответствующий размер изображения.
Регенерирующие миниатюры
Если у вас уже есть сайт, вы не сможете оптимизировать свои статьи ретроспективно, просто указав размер изображения. Размеры изображений учитываются только при загрузке нового изображения, поэтому они не применяются к изображениям, уже находящимся в системе..
Не бойтесь, плагин Regenerate Thumbnails сделает все лучше! Этот плагин может восстанавливать миниатюры для всех ваших изображений, принимая во внимание все определенные размеры изображений. Это также может нацелиться на конкретное изображение, что полезно, если у вас есть несколько или вы проводите тестирование.
Как только ваши эскизы будут восстановлены, вы должны увидеть оптимизированные версии, загруженные на ваш сайт. Вы можете проверить это, просмотрев источник изображения. Если вы загрузили «example.jpeg» и видите «example.jpeg» в качестве источника для вашего избранного изображения, значит что-то не так. Если ты видишь “Пример-178 × 178.jpeg” тогда все хорошо; оптимизированное изображение показано.
Адаптивные изображения
Одной из проблем в поддержании оптимизированного сайта является отзывчивость. Когда я просматриваю статью на iPad, изображение большого размера в посте будет уменьшено, так как максимальная ширина будет 786px или около того..
Самое простое решение - использовать такой плагин, как Hammy. Hammy работает на основе ширины содержимого вашей темы (в отличие от ширины окна браузера) и на этой основе может предоставлять оптимизированные изображения. Это особенно удобно для мобильных пользователей, где могут возникнуть проблемы с вычислительной мощностью и пропускной способностью.
Дальнейшая оптимизация изображения
Как я уже упоминал во введении, существует множество способов оптимизации изображений. От спрайтов до сжатия изображений можно использовать множество методов, чтобы уменьшить время загрузки, которое идет рука об руку с изображениями. Ashutosh KS написал отличную статью, демонстрирующую 9 плагинов WordPress для повышения производительности изображений, я предлагаю прочитать его!
Я также предлагаю взглянуть на Hassle Free Responsive Images, который показывает, как добавить поддержку элемента изображения, что вы захотите использовать, если хотите написать свой собственный код..
