Как оптимизировать ваши изображения для WordPress

1. Оптимизация ваших изображений для WordPress
2. Размер изображения
3. Избранные изображения
4. Сжатие изображения
5. Плагины сжатия изображений
6. Сжатие и сжатие изображений
7. ShortPixel Image Optimizer
8. Сжатие изображений JPEG и PNG
9. Оптимизация изображений для поисковых систем
10. Alt Text
11. Теги заголовка
12. XML изображения САЙТА
13. Размещение изображения
14. Последние мысли

Есть много причин, по которым вы (и должны) включать изображения в ваши посты и статьи WordPress. В основном вы любите посетителей своего сайта. Изображения - это необходимый способ разбить длинные фрагменты контента и улучшить SEO, привлекая внимание читателя и привлекая новую аудиторию.

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

Изображения и медиа-файлы занимают здоровенную 63 процента пропускной способности на современных сайтах. Поэтому очень важно оптимизировать любое изображение, которое вы загружаете на свой сайт для скорости. Оптимизация изображения на самом деле состоит из двух вещей: оптимизации количества байтов, используемых для кодирования каждого пикселя изображения, и оптимизации общего количества пикселей.

Читайте дальше, чтобы получить дальнейшее объяснение того, почему большие изображения могут тянуть ваш сайт вниз, как эффективно сжимать ваши медиа-файлы, и основные советы по оптимизации изображений для улучшения SEO вашего сайта.

Оптимизация ваших изображений для WordPress

Размер изображения

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

Многие сайты отправляют большие немасштабированные изображения и используют браузер для изменения их размера, что приводит к использованию дополнительных ресурсов ЦП и снижению скорости работы сайта. Если естественный размер изображения составляет 820 × 820 пикселей и он отображается браузером как 400 × 400 пикселей… это 32 400 ненужных пикселей!

Четкость и скорость загрузки страницы во многом зависят от устройства, с которого отображается изображение (мобильное, настольное и т. Д.). В то время как изображение 4k может хорошо смотреться на вашем 27-дюймовом мониторе, следует учитывать следующее: когда посетитель загружает страницу с этим изображением, браузер сначала изменит файл с его полным разрешением, а затем уменьшит его, чтобы уместить на своем экране, который может быть в браузере мобильного устройства, не поддерживающего что-либо больше, чем 400 пикселей.

При экспорте изображений рекомендуется хранить файлы размером менее двух сотен килобайт. Как правило, вы можете уменьшить размер значительно ниже этого порогового значения, сохранив ваши изображения в виде «оптимизированных для Интернета» JPEG или PNG. Также важно понимать, что когда ваши файлы оптимизированы для Интернета, они будут сохраняться с разрешением 72 точки на дюйм (т / д), что является веб-стандартом.

Вы можете использовать Photoshop, Lightroom или аналогичный редактор, чтобы уменьшить размер изображения примерно до 1500 пикселей или менее по ширине (вероятно, меньше, если вы не стремитесь отображать четкие и яркие фотографии на большом мониторе).

В Photoshop просто перейдите в « Изображение», «Размер изображения», чтобы вручную настроить размеры и разрешение изображения. Вы также можете перейти в Файл »Экспорт» Сохранить для Интернета, чтобы оптимизировать ваши изображения для веб-загрузки. Если вы работаете с Lightroom, выберите « Файл»> «Экспорт», чтобы вручную настроить размер изображения при экспорте.

Избранные изображения

Показанное изображение не вставляется в тело сообщения WordPress, а используется структурно по всей теме в качестве эскиза рядом с заголовком сообщения или в заголовке при просмотре определенного сообщения.

Большинство тем и виджетов полагаются на избранные изображения, поэтому вы не захотите пропустить их. Избранные изображения позволяют большую настройку; у вас будет возможность отображать уникальные пользовательские изображения заголовков для определенных сообщений и страниц или устанавливать эскизы для специальных функций вашей темы.

После того, как вы определились с размером, который вы хотите, чтобы ваше рекомендуемое изображение было, этот размер останется установленным для всех будущих избранных изображений. Размер, который вы должны выбрать, зависит от темы вашего сайта WordPress и макета ваших сообщений. Рекомендуемые изображения обычно имеют большую ширину и ширину от 500 до 900 пикселей. Также лучше выбрать изображение с высоким разрешением, а не пиксельное (то есть изображение JPEG без потерь, которое было вырезано из Интернета).

Совет : для управления мультимедиа, которое отображается, когда сообщение или страница публикуются в Facebook или Twitter, установите Yoast SEO. Вы сможете не только настраивать заголовок и описание, но и загружать правильные размеры изображений для каждого социального канала.

Сжатие изображения

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

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

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

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

Плагины сжатия изображений

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

Сжатие и сжатие изображений

Плагин сжатия изображений Smush работает для изменения размера, оптимизации и сжатия всех ваших изображений для Интернета, чтобы они загружались быстрее, чем раньше. Если ваш сайт богат фотографиями, то этот плагин просто необходим!

ShortPixel Image Optimizer

Плагин ShortPixel Image Optimizer работает для сжатия всех прошлых и будущих изображений и PDF-файлов, загруженных в вашу медиатеку. Плагин обеспечивает сжатие с потерями и без потерь для большинства типов файлов. Для фотографов вы можете выбрать их глянцевое сжатие JPEG, которое использует высококачественный алгоритм оптимизации с потерями.

Сжатие изображений JPEG и PNG

Хотите просто оптимизировать JPEG и PNG? Этот плагин использует сервисы сжатия изображений TinyJPG и TinyPNG, чтобы помочь вам в сжатии изображений. В среднем изображения JPEG сжимаются на 40-60 процентов, а изображения PNG - на 50-80 процентов без видимой потери качества.

Оптимизация изображений для поисковых систем

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

Alt Text

Альтернативный текст или альтернативный текст - это атрибут, добавленный к тегу изображения в HTML. Альтернативный текст поможет поисковым системам понять, о чем ваше изображение, описав, что на изображении и какова его функция на странице. Если у вас есть изображение, которое используется для покупки товара, в альтернативном тексте будет написано «кнопка для покупки товара X». Google использует альтернативный текст для определения изображения и окружающего его текста.

WordPress позволяет вам добавлять альтернативный текст к вашим изображениям, когда вы загружаете их с помощью встроенного медиа-загрузчика. Вы также можете добавить альтернативный текст к изображению, зайдя в Media »Library и затем нажав на ссылку Edit под изображением.

Совет: важно отметить, что хотя Alternative Text может помочь вашим изображениям и контенту иметь более высокий рейтинг, текст заголовка не влияет на SEO.

Теги заголовка

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

XML изображения САЙТА

Вы можете подумать о создании карты сайта, которая поможет Google заметить ваши изображения, в том числе те, которые нельзя сканировать (например, изображения, загружаемые с помощью кода JavaScript). Файлы Sitemap дают поисковым системам больше информации об изображениях, доступных на вашем сайте, чтобы они могли лучше понимать и индексировать ваш контент. Таким образом, ни одно из ваших изображений никогда не останется незамеченным поисковыми системами.

Если вы работаете в WordPress, эти плагины помогут вам создать карту сайта: Google XML Sitemaps, Yoast SEO, All-in-One SEO Pack и Udinra All Image Sitemap. Для сайтов, отличных от WordPress, существует множество инструментов, которые могут помочь в создании карты сайта, включая Screaming Frog, Dynomapper и другие. Создав карту сайта, вы захотите отправить ее с помощью инструментов веб-мастеров Google (или других поисковых систем).

Размещение изображения

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

Последние мысли

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

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

Похожие

Комментарии