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

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

Подготовка к оптимизации изображений на сайте

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

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

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

Размер и кадрирование для оптимизации картинки на сайте

Когда дело доходит до фотографий, размер имеет значение! И больше не лучше. GTmetrix и Google PageSpeed Insights рекомендуют масштабировать фотографии для повышения производительности.

Обрезка фотографий

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

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

Дополнительные возможности файла, например: прозрачность, ненужные детали и слишком много цветов — всё это увеличивает время загрузки страницы.

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

Форматы файлов картинок

• Формат JPEG лучше всего подходят для больших фотографий. Они поддерживаются всеми браузерами.
• Формат PNG лучше всего подходят, когда важно сохранить детали (например, текст скриншота). В файлах PNG используется сжатие без потерь, поэтому они больше, чем сопоставимые файлы JPEG.
• WebP — это формат от Google, с открытым исходным кодом, который сочетает в себе лучшие возможности JPEG и PNG, но с гораздо меньшим размером файла. Формат WebP, можно создать с помощью плагина или в Photoshop.
• SVG — это язык разметки на основе XML, который позволяет создавать двумерные фигуры для создания векторной графики. Он лучше всего подходит для простых форм, таких как логотипы, диаграммы, флаги, значки и геометрические фигуры.
• Формат GIF отлично подходит для отображения простой анимации.

Сжатие и уменьшение для оптимизации изображений на сайте

Первый шаг — использовать такие инструменты, как GTmetrix и Google PageSpeed Insights, чтобы найти картинки, которые нужно уменьшить на своём сайте.

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

• Optimizilla — этот онлайн-оптимизатор изображений использует умную комбинацию алгоритма оптимизации и сжатия и для уменьшения файлов JPEG и PNG, до минимального размера при сохранении необходимого уровня качества.
• Robin image optimizer — это плагин, который сожмёт фото и уменьшит размер.
• WP Smush — это плагин, который сжимает фото, включает ленивую загрузку и изменение размера изображений. Pro версия платная.

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

Заголовки для изображений

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

Оптимизация картинки в WordPress

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

• Размер эскиза
• Средний размер
• Большой размер

Чтобы сэкономить время, вы можете настроить параметры по умолчанию в разделе «Мультимедиа» — «Настройки», или добавить собственные размеры, чтобы иметь больше возможностей для выбора.

Значение SEO для изображений

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

Важные атрибуты для оптимизации изображений на сайте

Название картинки

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

Добавление атрибута alt

Кроме того, альтернативный текст, используемый в атрибуте замещающего текста, зависит от типа фотографии, используемой в содержимом. Подписи и другой текст, окружающий её, создают контекст картинки.

Другие элементы на странице рядом с изображением

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

Графические карты сайта

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

Ленивая загрузка картинок

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

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

Резюме

Помните об этих правилах при добавлении изображений в свою статью:

• Используйте правильное фото, чтобы оно соответствовало тексту
• Выберите подходящее имя файла
• Убедитесь, что размеры соответствуют размеру отображаемого изображения
• Уменьшите размер файла, чтобы ускорить загрузку
• При необходимости добавьте подпись, чтобы было удобнее сканировать страницу
• Используйте их в XML-файлах Sitemap
• Включите отложенную загрузку
• Используйте кеш браузера
• Используйте новый формат WebP

На этом мы завершаем наш обзор, про оптимизацию изображений на сайте! Также вы можете узнать, про скорость загрузки страницы сайта и что мы должны об этом знать?

Если статья вам понравилась, поделитесь с друзьями этой информацией, просто нажав на кнопки соцсетей!