Полное руководство по оптимизации ваших изображений на WordPress

1. Найти бесплатные и лицензионные изображения
2. JPEG
3. GIF
4. PNG
5. Какое разрешение изображения запомнить?
6. Уменьшите размер файла изображения с помощью imagify
7. Прежде чем я доверил эту работу расширению WP Smush.
8. Сегодня я использую Imagify
9. Другие решения
10. Используйте описательные имена файлов
11. Заполните альтернативный текст и название ваших изображений
12. Альтернативный текст
13. Текст заголовка
14. Включите ваши изображения в свой Sitemap
15. Почему имидж важен в социальных сетях?
16. И вот что будет!
17. Мой контрольный список "Оптимизация изображения"
18. Резюме для оптимизации ваших изображений

Каковы преимущества вставки изображений на веб-сайте вашей компании?

Было проведено много исследований о преимуществах изображений на веб-страницах.

Вот тот, который я выбрал:

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

(Источник: Backlinko.com )

Чтобы дать желание читать ваш контент Преимущества изображений очевидны.

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

Это будет крайне вредно для производительности вашего сайта. И это не только заставит вас опуститься в рейтинге Google, но и даст разочарование вашим читателям.

Я повернулся к Лорану, и он сказал мне:

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

Я сразу начал работать, и вот 8 глав по оптимизации изображений, обсуждаемых в этой статье:

1. Les Sources - 3 сайта, где вы можете найти миллионы бесплатных изображений
2. Формат - Выберите между JPEG, GIF или PNG?
3. Разрешение - используйте изображения с теми же размерами, с которыми они отображаются
4. Размер - сжатие изображений для быстрой загрузки
5. Имя - Используйте описательные имена файлов
6. Альтернативный текст и заголовок - обратите внимание, чтобы сообщить им
7. Карта сайта - увеличьте шансы на ссылки на ваши изображения
8. Социальные сети - максимально эффективно используй изображения в социальных сетях

Плюс бонусный трюк, если однажды вы перенесете тему!

Найти бесплатные и лицензионные изображения

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

К счастью, в Интернете существует множество сайтов с миллионами бесплатных изображений.

Вот 3 изображения сайтов, которые я использую чаще всего, чтобы найти мои изображения:

1. Pixabay.com
2. Pexels.com
3. stockvault.net

Если их вам недостаточно, иди копай в моем списке 18 сайтов, где вы можете найти бесплатные картинки ,

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

Большинство снимков экрана на моем сайте создаются с помощью кнопки печати экрана на моей клавиатуре, а затем работают с MS Paint. И да, вам не нужны навыки Photoshop для редактирования простых изображений.

Существует много типов файлов изображений с их преимуществами и недостатками.

Я сосредоточусь на 3 самых распространенных типах файлов: JPEG, GIF и PNG.

JPEG

С изображениями Объединенной группы экспертов по фотографии (JPEG) существует компромисс между размером файла и качеством изображения.

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

Прозрачные фоны не поддерживаются, поэтому JPEG обычно не подходит для логотипов веб-сайтов.

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

GIF

GIF расшифровывается как Graphics Interchange Format.

GIF-файлы, очевидно, хорошо подходят для движущихся изображений.

Ограничение: GIF поддерживает только 256 цветов спектра RGB. Это ограничение делает формат GIF неподходящим для цветных фотографических изображений.

GIF поддерживает прозрачные средства. Это подходящий вариант для логотипов и других элементов страницы, таких как кнопки.

Предупреждение : размер анимированных GIF-файлов часто важен. Я советую вам проконсультироваться с этим размером, прежде чем использовать их на своем сайте.

PNG

PNG расшифровывается как Portable Network Graphics. PNG поддерживает сжатие данных без потери качества. Он был разработан, чтобы заменить формат GIF.

Формат PNG поддерживает прозрачность и широкий диапазон цветов, таких как JPEG.

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

WhoIsHostingThis.com опубликовал инфографику на тему, из которой я извлек изображение ниже:

Мои рекомендации :

• Используйте формат JPEG для ваших фотографий,
• Воспользуйтесь форматом PNG для прозрачных логотипов и изображений с небольшим количеством цветов.
• Используйте анимированные GIF-файлы экономно из-за веса файлов.

Какое разрешение изображения запомнить?

Разрешение изображений сильно влияет на размер файла.

Никогда не забывайте, что у вас должен быть минимально возможный размер файла, чтобы загружать страницы как можно быстрее.

Например, если ваш веб-сайт отображает изображения шириной до 720 пикселей, вам не нужно использовать изображения шириной 2000 пикселей.

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

Из-за этого разница в размере файла между изображением шириной 2000 пикселей и изображением 720 пикселей может превышать 1 МБ!

Точно так же, если вам нужно изображение размером 250 x 250 пикселей, не используйте изображение большего размера (например, 500x500 пикселей), создайте изображение с нужным вам размером, то есть 250 х 250 пикселей.

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

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

Уменьшите размер файла изображения с помощью imagify

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

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

После того как вы оптимизировали их перед загрузкой в ​​CMS, расширения WordPress (или другие CMS) сжимают их еще больше, не теряя качества изображения.

У большинства расширений есть процентный слайдер по качеству. Представьте себе изображение размером 100 КБ и качеством 100. Вероятно, размер может уменьшиться до 30 КБ при качестве, расположенном на уровне 70, и это без какого-либо ухудшения качества, видимого невооруженным глазом.

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

Прежде чем я доверил эту работу расширению WP Smush.

WP Smush очень прост в использовании. Вы будете удивлены, сколько килобайт это может сэкономить без потери качества. Я набрал около трети, а это почти 100 МБ.

Бесплатная версия ограничивает сжатия в пачке из 50 изображений одновременно, что более чем достаточно для небольших сайтов.

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

В последнее время WP Smush добавила возможность конвертировать изображения PNG в JPEG всякий раз, когда считает, что вы выбрали неправильный тип файла. Эта функция также уменьшает ваши файлы изображений.

И изображения автоматически "замазываются" во время загрузки.

Платная версия WP Smush, которую я использовал, еще больше уменьшает ваши изображения до еще меньшего размера. Кстати, это также снимает ограничение сжатия пакетов. Таким образом, вы можете сжать все ваши изображения в один клик, независимо от их количества.

В целом, WP Smush - идеальный плагин для оптимизации изображений для начинающих, или если у вас мало времени, чтобы посвятить себя оптимизации изображения.

Сегодня я использую Imagify

Я мигрировал в Imagify ,

Действительно, оптимизация изображений такая же мощная или даже лучшая, чем у WP Smush.

Но особенно Imagify бесплатно до 25 МБ в месяц, что более чем достаточно для большинства веб-сайтов.

Другие решения

Imagify и WP Smush - не единственные доступные расширения. Лоран также рассказал мне о EWWW Image Optimizer и Imsanity что я не буду здесь освещать, так как я не использую их.

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

Вот, например, 2 сайта для сжатия ваших изображений:

1. TinyPNG.com - для сжатия изображений PNG и JPEG
2. CompressJPEG.com - сжать изображения JEPG

Моя рекомендация : уменьшите размер файлов изображений перед их загрузкой в ​​WordPress. Затем используйте расширение вроде Imagify для WordPress, чтобы еще больше уменьшить размер файлов. Важно поддерживать скорость загрузки ваших страниц подходящая для ваших пользователей.

Используйте описательные имена файлов

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

в его рекомендации Google требует от вас предоставить как можно больше информации об изображении. Он особенно настаивает на названии файла.

Например, для изображения выше имя файла, например «puppy-pug-cute.jpg», является более наглядным, чем «IMG003324.jpg». Таким образом, Google лучше оценивает ваши изображения на страницах результатов.

Тем не менее, именование всех файлов изображений быстро становится утомительным.

Мой совет : я использую расширение " Media File Renamer ». Я настроил его так, чтобы имена файлов изображений брали название заголовка статьи, в которой они присутствуют.

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

Заполните альтернативный текст и название ваших изображений

Альтернативный текст

Альтернативный текст (или альтернативный текст) является одним из наиболее важных элементов в оптимизации ваших изображений.

Alt Text предоставляет поисковым системам способ понять ваши изображения. Для Google это важный фактор в поиске изображений.

Но это еще не все.

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

Я всегда стараюсь добавлять в свои поля «Alt Text» вариант основного ключевого слова на странице.

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

И последнее замечание: Internet Explorer использует Alt Text в качестве всплывающей подсказки, когда указатель мыши наводится на изображение. С другой стороны, другие браузеры, такие как Chrome, используют заголовок изображения в качестве всплывающей подсказки.

Текст заголовка

Текст заголовка априори не является фактором ранжирования для поиска изображений. Это также не считается важным аспектом оптимизации изображения.

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

Примечание:

• Поместите тот же текст в поле Alt Text, и заголовок вполне подходит.
• Используйте обычные пробелы в полях Alt Text и title, а не тире "-" или подчеркивания "_".

Моя рекомендация : заполните поля Alt Text на всех изображениях. От 2 до 6 слов обычно дают достаточное описание.

Включите ваши изображения в свой Sitemap

Хотя это и не так важно, как другие аспекты изображения SEO, обязательно включайте изображения в свои карты сайта XML, чтобы повысить вероятность того, что ваши изображения будут найдены в Google Images.

На изображения можно ссылаться вручную с помощью тегов «image: image» и «image: loc» в вашей карте сайта XML.

Хорошей новостью является то, что, как и я, вы используете расширение WordPress Yoast изображения автоматически добавляются в ваш XML-файл сайта.

Так что тебе нечего делать!

Мой совет : используйте расширение Yoast WordPress, которое автоматически добавляет ваши изображения в карту сайта XML и отправляет их в Google Search Console.

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

Почему имидж важен в социальных сетях?

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

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

Вы можете сделать это, вручную добавив мета-теги OG в раздел заголовка вашей страницы.

Meta OG (Open Graph) теги (используется facebook и Pinterest) и щебет Карты указывают важную информацию о вашем контенте для социальных сетей.

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

Yoast выберет изображение, которое будет «представлено» во время обмена.

Но вы можете легко выбрать собственное изображение, нажав на значок «Поделиться» в боковом меню Yoast. Это покажет варианты обмена Facebook для этой страницы. Рекомендуемый размер изображения для публикации в Facebook составляет 1200 × 630 пикселей.

Нажмите значок Twitter, чтобы просмотреть параметры Twitter и аналогичным образом выбрать изображение своей карты Twitter. Рекомендуемый размер изображения для обмена в Twitter - 1024 × 512 пикселей.

Примечание : именно в этом окне вы указываете заголовок и описание при публикации в Facebook и Twitter, если хотите, чтобы они отличались от вашего мета-заголовка и мета-описания.

Точность для Pinterest : даже если я не говорю много, мне также нравится Pinterest , Pinterest использует Alt Text, который мы видели ранее, как описание вашего изображения, когда кто-то его прикрепляет. Важно знать, хотите ли вы, чтобы ваши изображения хорошо позиционировались в поиске на Pinterest, который может быть удивительным источником трафика.

Если когда-нибудь вы измените какой-либо шаблон сайта:

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

И вот что будет!

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

Вы попытаетесь настроить размеры изображения в « Настройках> Мультимедиа » в консоли администратора WordPress, но это не решит проблему.

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

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

Чтобы решить эту проблему, вы должны сгенерировать новые размеры для всех ранее загруженных изображений. Поэтому необходимо «восстановить ваши эскизы» (или «Восстановить миниатюры на английском языке»).

Существует расширение WordPress, которое делает это очень хорошо: это " Восстановить миниатюры ».

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

Мой контрольный список "Оптимизация изображения"

8 практических советов приведены в контрольном списке ниже.

 Используйте бесплатные изображения, например, на stockvault,  Воспользуйтесь форматом JPEG, за исключением логотипов с прозрачным фоном (png),  Измените размеры изображений в нужном формате для вашей темы, прежде чем загружать их,  Назовите файл изображений из чтобы он мог быть прочитан человеком, ress Сжать размер изображений с расширением imagify,  Введите альтернативный текст и заголовок ваших изображений,  Убедитесь, что ваши изображения включены в карту сайта,  Установите обмен изображениями в социальных сетях.

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

Потратьте время, чтобы навести порядок в ваших изображениях.

Оптимизировать ваши изображения не сложно.

Это состоит из:

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

Убедитесь, что ваши новые изображения всегда хорошо оптимизированы.

Вы легко улучшаете свой рейтинг в поисковых системах.

И поскольку ваши страницы загружаются быстрее, вы также уменьшаете показатель отказов ,

Это означает больше трафика на сайт вашей компании и лучший опыт для ваших пользователей.

Оптимизировать ваши изображения необходимо, но недостаточно.

Затем также обзор другие рекомендации SEO на ваших страницах продвинуть ваш веб-контент на вершину страницы результатов поисковой системы, как Google.

У вас есть другие советы по оптимизации изображений? У вас есть вопросы по оптимизации изображений?

Также опубликовано на среда ,

Похожие

Комментарии