Лучший формат изображения для скорости сайта WordPress

Лучший формат изображений для WordPress — WebP для фотографий и графики, с JPG и PNG в качестве автоматических резервных копий и SVG для логотипов и значков.. WordPress управляет огромной частью Интернета, а изображения обычно являются самым тяжелым элементом на любой странице, которую он обслуживает, поэтому загружаемый вами формат напрямую влияет на то, насколько быстро загружается ваш сайт и насколько хорошо он ранжируется. WordPress многое делает за вас, генерируя несколько размеров каждой загрузки, но он не выберет идеальный формат, если вы его не настроите. В этом руководстве рассказывается, какой формат использовать, как WordPress обрабатывает изображения, а также настройки и плагины, которые обеспечивают быстроту сайта WordPress.

Почему формат изображения так важен в WordPress

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

Как WordPress обрабатывает загрузку изображений

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

WebP: современный стандарт по умолчанию

WebP — это формат, который необходимо стандартизировать. Он производит файлы На 25–35 % меньше, чем JPG, при том же качестве., поддерживает прозрачность, такую как PNG, и теперь поддерживается всеми современными браузерами. WordPress поддерживает загрузку через WebP начиная с версии 5.8, и с помощью подходящего плагина он может автоматически обслуживать версии WebP ваших существующих файлов JPG и PNG, возвращаясь к оригиналу для любого браузера, который не может его отобразить. Перенос медиатеки в WebP часто является самым большим выигрышем в скорости, который может получить сайт WordPress.

JPG и PNG как запасные варианты

WebP не означает отказ от старых форматов. JPG остается безопасным вариантом для фотографий, а PNG — для графики, требующей прозрачности., а хороший плагин оптимизации сохраняет оригиналы, поэтому любой браузер, не поддерживающий WebP, все равно получит рабочее изображение. На практике вы загружаете JPG или PNG, как обычно, а плагин генерирует и обслуживает вместе с ним WebP, доставляя файл меньшего размера там, где это возможно. Это дает вам экономию при использовании WebP без каких-либо рисков совместимости, поэтому рекомендуется использовать именно эту настройку, а не только WebP.

SVG для логотипов и значков

Для вашего логотипа и значков интерфейса SVG превосходит любой растровый формат. Это вектор, поэтому он остается четким при любой плотности экрана из одного крошечного файла. WordPress не разрешает загрузку SVG по умолчанию по соображениям безопасности, поскольку SVG может содержать скрипт, поэтому вы включаете его с помощью плагина, который очищает файлы при загрузке. После включения логотип в формате SVG становится меньше и четче, чем эквивалент PNG, и никогда не требует создания нескольких размеров. Зарезервируйте SVG для логотипов, значков и простой графики, но не для фотографий.

Выбор подходящего размера изображения

WordPress генерирует несколько размеров, но вы сами контролируете размеры. Установите большой размер, но не шире области содержимого, часто от 1200 до 1600 пикселей, поэтому изображения во всю ширину не являются излишне огромными. Загрузка фотографии размером 4000 пикселей, когда ширина столбца контента составляет 800 пикселей, приводит к потере пропускной способности даже после изменения размера WordPress, поскольку самая большая сгенерированная копия по-прежнему имеет слишком большой размер. Сопоставьте размеры зарегистрированных изображений с фактическим макетом вашей темы, и каждое изображение, которое обслуживает сайт, останется пропорциональным тому, где оно появляется.

Плагины сжатия и оптимизации

Плагин оптимизации автоматизирует весь конвейер. Популярные варианты сжимать каждую загрузку, генерировать версии WebP и удалять ненужные метаданные, и все это без необходимости прикасаться к изображению вручную. Многие также массово оптимизируют существующую библиотеку, конвертируя годами накопленные файлы JPG и PNG в WebP за один проход. Некоторые переносят обработку на свои серверы, чтобы сэкономить на вашем хостинге. Что бы вы ни выбрали, эффект один и тот же: изображения автоматически поступают на страницу в сжатом виде и в наилучшем формате, что гораздо надежнее, чем не забывать оптимизировать каждое из них вручную.

Ленивая загрузка изображений

Отложенная загрузка откладывает изображения до тех пор, пока посетитель не прокрутит их рядом, поэтому при начальной загрузке страницы извлекается только то, что сразу видно. WordPress по умолчанию включает отложенную загрузку на изображениях ниже сгиба, автоматически добавляя атрибут загрузки. Это заметно ускоряет первую отрисовку на страницах с большим количеством изображений. Единственным исключением является самое большое изображение, расположенное над сгибом, часто это главный герой, который должен загружаться быстро, чтобы не задерживать метрику «Самая большая контентная отрисовка». Большинство плагинов оптимизации позволяют исключить это изображение из отложенной загрузки с помощью одной настройки.

Удаление метаданных

Фотографии содержат метаданные, модель камеры, местоположение GPS, цветовые профили, которые редко нужны веб-сайту и которые добавляют веса. Удаление этих метаданных сжимает каждый файл. без видимых изменений, и большинство плагинов оптимизации делают это как часть сжатия. Удаление данных GPS также дает преимущество конфиденциальности, поскольку вы, вероятно, не захотите публиковать место, где была сделана фотография. Единственные метаданные, которые стоит хранить, — это цветовой профиль, если точность цветопередачи имеет значение. В противном случае удаление приведет к бесплатному и незаметному уменьшению размера всей библиотеки.

Рекомендуемая настройка образа WordPress

Соберите это вместе, и настройка проста. Зарегистрируйте размеры изображений, соответствующие макету вашей темы. Установите плагин оптимизации, который сжимает загружаемые файлы, генерирует и обслуживает WebP с резервными вариантами, а также удаляет метаданные. Включите очищенный SVG для вашего логотипа и значков. Сохраните отложенную загрузку WordPress по умолчанию, но загружайте главное изображение с нетерпением. Затем просто загрузите оригиналы разумного размера, и пусть конвейер сделает все остальное. Благодаря этому каждое изображение на сайте сжимается, имеет правильный размер и автоматически отображается в наилучшем формате, а сайт остается быстрым по мере роста библиотеки.

АВИФ:

следующий шаг за пределами WebP

AVIF — новейший эффективный формат, и WordPress его тоже поддерживает. Он сжимает даже меньше, чем WebP, часто снова на 20% меньше, с тем же визуальным качеством, с поддержкой прозрачности и широкого цвета. Поддержка браузеров теперь широка, но немного отстает от WebP, поэтому AVIF лучше всего работает с резервным вариантом WebP или JPG. Некоторые плагины оптимизации могут автоматически генерировать AVIF вместе с WebP. Для сайта, который отбирает последние несколько килобайт из каждого изображения, стоит включить AVIF, хотя WebP на данный момент остается безопасным основным форматом.

Медиатека и ведение домашнего хозяйства

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

Восстановление миниатюр после смены темы

Когда вы переключаете темы или меняете зарегистрированные размеры изображений, существующие загрузки по-прежнему имеют старые сгенерированные размеры. Регенерация миниатюр восстанавливает каждый размер из оригиналов. чтобы соответствовать новым размерам, что специальный плагин делает массово по всей библиотеке. Пропустите это, и изображения могут оказаться растянутыми или отображаться в неправильном размере в соответствии с новой темой. Это одноразовый шаг после любого изменения размеров изображения, и его выполнение обеспечивает соответствие всей библиотеки тому, как текущая тема отображает изображения на самом деле.

CDN-доставка изображений

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

Избранные изображения и превью в социальных сетях

Избранное изображение каждой публикации выполняет двойную функцию: оно появляется в вашей теме и через теги Open Graph в качестве предварительного просмотра при публикации публикации. Установите избранные изображения размера, подходящего для предварительного просмотра в социальных сетях, примерно 1200 на 630., поэтому общие ссылки в ленте выглядят четко. Плагин SEO обычно автоматически сопоставляет изображение с тегом Open Graph. Если вы сделаете это правильно, то каждая публикация, которой поделятся, будет содержать чистое изображение правильного размера, а не обрезанную миниатюру или вообще ничего.

Тестирование производительности вашего изображения

После оптимизации измерьте результат. Такие инструменты, как PageSpeed Insights, сообщают о проблемах, связанных с изображениями., помечая изображения слишком большого размера, отсутствующие современные форматы и изображения без размеров, которые приводят к смещению макета. Они напрямую связаны с Core Web Vitals, поэтому их советы соответствуют измерениям Google. Запуск теста до и после этапа оптимизации показывает, насколько быстрее стала страница, и выделяет все изображения, которые все еще сдерживают ее. Относитесь к этим отчетам как к контрольному списку, позволяющему выжать максимум из ваших изображений.

Распространенные ошибки изображений WordPress

Несколько привычек незаметно замедляют работу сайтов WordPress. Загрузка изображений с камеры в полном разрешении, пропуск сжатия и отключение WebP являются наиболее распространенными, каждый из которых оставляет большие файлы там, где подойдут маленькие. Другие включают забывание установить размеры изображения, что приводит к смещению макета, и использование медленного, многофункционального плагина, который добавляет больше веса, чем экономит. Каждую из этих проблем легко исправить с помощью описанной выше настройки. Избегая их, вы сохраняете скорость сайта WordPress по мере его роста, а не замедляете его год за годом по мере наполнения библиотеки.

Какой формат изображений лучше всего подходит для WordPress?

WebP для фотографий и графики с резервными вариантами JPG и PNG и SVG для логотипов.. Файлы WebP на 25–35 % меньше, чем файлы JPG того же качества, и каждый современный браузер поддерживает их.

Поддерживает ли WordPress WebP?

Да, начиная с WordPress 5.8. Вы можете загрузить WebP напрямую, а плагин оптимизации может автоматически обслуживать версии WebP существующих файлов JPG и PNG с резервными вариантами.

Могу ли я загрузить файлы SVG в WordPress?

Не по умолчанию, из соображений безопасности. Плагин, который очищает SVG при загрузке. включает его безопасно, после чего логотипы и значки в формате SVG становятся меньше и четче, чем PNG.

Нужен ли мне плагин для оптимизации изображений?

Это настоятельно рекомендуется. Плагин сжимает загружаемые файлы, генерирует WebP и автоматически удаляет метаданные., что гораздо надежнее, чем оптимизация каждого изображения вручную.

Должен ли я изменить размер изображений перед загрузкой в ​​WordPress?

Да. Загружайте не шире области вашего контента., часто от 1200 до 1600 пикселей. Огромный оригинал делает любой размер, создаваемый WordPress, слишком большим.

Поддерживает ли WordPress AVIF?

Да. AVIF сжимает примерно на 20% меньше, чем WebP. того же качества, а некоторые плагины оптимизации генерируют его автоматически. Подавайте его с резервным вариантом WebP или JPG для полной поддержки браузера.

Должен ли я использовать CDN для изображений WordPress?

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

Почему мои изображения выглядят неправильно после смены темы?

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

Стоит ли выполнять ленивую загрузку изображений WordPress?

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