Как создать сайт или блог в 2020 году - бесплатное и простое руководство по созданию сайта
Blogs

12 простых советов для начинающих

Как вы загружаете изображение в WordPress? Просто перетащите его в библиотеку мультимедиа и нажмите кнопку «Вставить в сообщение», не оптимизируя изображение?

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

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

Даже доля секунды при задержке загрузки страницы вредит. Последнее исследование Akamai показало, что замедление загрузки всего на 100 миллисекунд может привести к падению конверсии на 7%. Если загрузка страницы занимает две секунды, показатель отказов увеличивается на 103%. Добавьте еще одну секунду к задержке и ожидайте, что 53% ваших мобильных посетителей покинут вашу страницу.

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

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

Что такое оптимизация изображения и почему это важно?

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

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

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

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

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

optimize-wordpress-images "width =" 624 "height =" 416 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1586136801_123_12-consejos-faciles-para-principiantes.jpg 624 Вт, https: //themegrill.com/blog/wp-content/uploads/2018/05/optimize-wordpress-images-300x200.jpg 300 Вт "размеры =" (максимальная ширина: 624 пикс.) 100 Вт, 624 пикс. "></p> <p>Перед загрузкой изображений в WordPress обязательно выполните эти методы оптимизации изображений. Помните: ваша основная цель – использовать файл наименьшего размера без ущерба для качества изображения.</p> <h3><span class="ez-toc-section" id="1_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B9%D1%82%D0%B5_%D1%81%D0%BE%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%89%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_%D0%B2%D0%B0%D1%88%D0%B5%D0%B3%D0%BE_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82%D0%B0"></span>1. Используйте соответствующие изображения для вашего контента<span class="ez-toc-section-end"></span></h3> <div class=

«Картинка стоит тысячи слов», – гласит поговорка. Но это ничего не стоит, когда оно не соответствует предмету его содержания. Например, если ваш блог посвящен путешествию в Юго-Восточную Азию, фотография Эйфелевой башни, безусловно, кажется неуместной, если вы не можете объяснить, почему эта фотография должна быть в сообщении.

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

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

2. Выберите правильный формат изображения

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

GIF

GIF (Graphics Interchange Format) имеет ограниченную палитру, состоящую только из 256 цветов. Это делает его идеальным только для простых изображений с меньшим количеством цветов, таких как логотипы, диаграммы, графики и линейные рисунки.

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

JPEG

JPEG (Joint Photographic Experts Group) идеально подходит для фотографий, градиентов, скриншотов и других многоцветных изображений.

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

Используйте новые форматы JPEG, такие как JPEG 2000 и JPEG XR. Эти новые форматы JPEG имеют более высокий коэффициент сжатия, что означает, что они имеют меньший размер файла, что способствует более высокой скорости страницы.

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

PNG

PNG (Portable Network Graphics) обеспечивает лучшее качество изображения, но за счет размера файла. Поэтому ограничивайте его использование изображениями, требующими высокой детализации и высоким разрешением, такими как векторная графика и компьютерная графика.

SVG

Благодаря типично меньшим размерам файлов SVG (масштабируемая векторная графика) загружается быстрее, чем JPEG и PNG. Это идеальный формат для логотипов, иконок и изображений, образованных геометрическими фигурами. SVG поддерживает резкость изображения в различных размерах или на дисплеях сетчатки.

Избавьтесь от выбора лучшего формата файла для каждого изображения с помощью плагина WordPress под названием EWWW Image Optimizer. Конвертируйте изображения в формат, который дает наименьший размер.

3. Уменьшить размеры изображения

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

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

Большие изображения также требуют больше места на диске. Например, 2500-пиксельное изображение занимает 1 МБ. Меньшие размеры изображения занимают меньшую полосу пропускания.

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

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

Отличный бесплатный онлайн-инструмент для сжатия изображений – TinyPNG. Просто перетащите на сайт до 20 файлов PNG или JPEG. Через несколько секунд все оптимизированные изображения могут быть загружены.

Что касается плагинов WordPress, WP Smush является наиболее популярным для оптимизации изображений и сжатия. Он удаляет все ненужные данные (включая модель камеры, использованную для съемки фотографии и дату создания) из ваших изображений, а затем масштабирует их для вас перед добавлением в библиотеку мультимедиа.

5. Используйте CDN

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

6. Используйте ленивый груз

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

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

Чтобы начать, установите один из ленивых загрузочных плагинов для WordPress.

7. Дайте каждому изображению описательное имя файла

give-image-file-name "width =" 624 "height =" 289 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1586136801_976_12-consejos-faciles-para-principiantes .jpg 624 Вт, https://themegrill.com/blog/wp-content/uploads/2018/05/give-image-file-name-300x139.jpg 300 Вт "размеры =" (максимальная ширина: 624 пикс.) 100 Вт, 624 пикс. " ></p> <p>Какое имя файла говорит о чем изображение: «IMG00045.jpg» или «2017-honda-civic»? Это определенно второй. И это то, что помогает вашему сайту лучше ранжироваться в Google.</p> <p>Поисковые системы сканируют имена файлов изображений. Вот почему описательное и богатое ключевыми словами имя файла изображения является обязательным условием для оптимизации изображения. Включите ключевые слова, относящиеся к вашему веб-сайту или сообщению в блоге, с основным ключевым словом, идеально расположенным в начале имени файла.</p> <h3><span class="ez-toc-section" id="8_%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D1%8C%D1%82%D0%B5_alt_%D1%82%D0%B5%D0%B3%D0%B8_%D0%BA_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%D0%BC"></span>8. Добавьте alt теги к изображениям<span class="ez-toc-section-end"></span></h3> <div class=

Если вы часто оставляете поле «Альтернативный текст» пустым при загрузке изображения в WordPress, вы упускаете возможность добавить SEO-ценность на свой сайт и повысить рейтинг в поисковых системах.

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

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

Вот несколько полезных советов, которые следует иметь в виду при создании альтернативного текстового изображения WordPress:

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

9. Субтитры ваших изображений

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

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

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

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

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

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

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

  • Facebook: 1200 x 628 пикселей
  • Twitter: 1024 x 512 пикселей
  • Google+: 800 x 1200 пикселей

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

11. Правильно подобранные изображения в редакторе

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

  • Что такое оптимизация изображения и почему это важно?
  • 10 простых советов по оптимизации изображений для сайтов WordPress
  • 1. Используйте соответствующие изображения для вашего контента
  • 2. Выберите правильный формат изображения
  • 3. Уменьшить размеры изображения
  • Как изменить размер изображения на Mac?
  • 5. Используйте CDN
  • 6. Используйте ленивый груз
  • 7. Дайте каждому изображению описательное имя файла
  • 8. Добавьте alt теги к изображениям
  • 9. Субтитры ваших изображений
  • 10. Оптимизация изображений для обмена в социальных сетях
  • 11. Правильно подобранные изображения в редакторе
  • Другие темы:

    • Pекомендуемые: