Оптимизация изображений для сайта: 5 онлайн-сервисов для качественной оптимизации изображений

5 онлайн-сервисов для качественной оптимизации изображений

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

Типичная для многочисленных Интернет-ресурсов проблема: пользователь в первый раз со своего браузера переходит на определенный сайт, и в процессе загрузки страницы наблюдает за плавным “развертыванием” изображений. Для того, чтобы все картинки отображались мгновенно со всеми основными веб-элементами, необходимо корректно сжать их размер и вес.

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

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

1.  ФОТОМАСТЕР

ФотоМАСТЕР — мощный фоторедактор, позволяющий быстро и качественно улучшать любые снимки.

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

2. Optimizilla

Эффективный оптимизатор изображений, позволяющий сжать изображения JPEG и PNG до минимального возможного размера.

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

3. TinyJpg

Лучший автоматический оптимизатор JPEG файлов сжимает изображения на 40-60%.

Онлайн-сервис позволяет оптимально сжать файл в формате (.jpeg). Конечный результат обработки сравнивается с оригинальной версией и в дальнейшем может настраиваться.

4. ImageOptimizer

Изменяет размер, сжимает и оптимизирует изображения.

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

5. ImageOptim

Сжимает изображения и ускоряет их загрузку без потери качества.

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

6. Compressor

Уменьшает размер фотографий и изображений сохраняя качество.

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

Ускоряем сайт за счёт оптимизации изображений

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

Какие есть варианты?

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

Какие параметры можно оптимизировать?

У изображения есть два параметра, на которые важно обращать внимание. Это разрешение (в пикселях) и объем (в байтах). Во втором случае более привычным будет вариант измерения в килобайтах или мегабайтах. И для примера работаем с исходной картинкой разрешением 5042х3151 пиксель и объемом в 2.5 мегабайта.

Изображение: unsplash.com.

Здесь вы видите результат разрешением 1280×720 пикселей и объемом 58 килобайт. То есть уже неплохо уменьшенный. Изображение стало весить в 43 раза меньше — всего 58 килобайт против исходных 2. 5 мегабайта. По разрешению я его тоже подрезал. Для сайта этого вполне хватит. Исходные 5042×3151 пиксель на сайте ни к чему.

Уменьшаем вручную

Рекомендую сервис Squoosh, он отлично справляется и выдает классные результаты.

Изображение: скриншот главной страницы squoosh.app.

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

Изображение: настройки оптимизации в сервисе squoosh.app.

Что тут у нас есть: по умолчанию картинка сразу уменьшается и справа внизу будет показан процент сжатия и новый размер в мегабайтах (ну, или килобайтах). Качество сжатия можно регулировать. Сейчас картинка сжата по качеству в 75 единиц. Для интереса поставьте там «1» и увидите разницу.

В этом же окне можно включить переключатель Resize, и откроется блок изменения разрешения картинки. Выставляете там новую ширину или высоту, и картинка обновится. По центру экрана есть ползунок. Двигаете его влево-вправо и смотрите на разницу. Слева от ползунка видно оригинал картинки, справа — его оптимизированную версию. Если не видите разницы, значит все хорошо. На этом все, справа внизу есть кнопка для скачивания изображения.

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

Уменьшаем плагином

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

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

Imsanity

Изображение: скриншот страницы плагина Imsanity.

Этот плагин умеет на лету оптимизировать загружаемые изображения, а также может уменьшить уже загруженные картинки. Настроек немного, и в этом его преимущество. После активации плагина заходим в «Настройки Imsanity» и попадаем сюда:

Изображение: скриншот страницы настроек плагина в консоли сайта.

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

EWWW Image Optimizer

Изображение: скриншот страницы плагина EWWW Image Optimizer.

Плагин от того же разработчика, что и предыдущий экземпляр моего обзора. Занятно, но у этого плагина втрое больше активных установок. 900 тысяч против 300 тысяч у Imsanity. Последнее обновление тоже было чуть позже. Похоже, что ставка сделана на него и приоритетная поддержка тоже достается EWWW Image Optimizer.

В любом случае, после установки и активации настройки плагина можно найти там же в «Настройках».

Изображение: скриншот страницы настроек плагина в консоли сайта.

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

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

reSmush.it

Изображение: скриншот страницы плагина reSmush.it.

После установки и активации настройки плагина доступны в разделе Медиафайлы — reSmush.it. В отличие от предыдущих, этот сразу показывает количество не оптимизированных картинок. В моем примере это вообще все изображения, что загружены на сайт.

Изображение: скриншот страницы настроек плагина в консоли сайта.

Чего в нем нет, так это возможности менять разрешение картинки. А вот настройка качества на месте. По умолчанию стоит галочка «оптимизировать при загрузке». Это удобно, не нужно дополнительно что-то настраивать. Из серии «установил — и все сразу работает». Отзывы у плагина хорошие, более 200 тысяч активных установок. Можно пользоваться.

Что в итоге

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

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

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

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

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

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

Согласно исследованию Strangeloop, 1 секунда задержки в загрузке страницы вызывает:

• 7% падение продаж,
• 11% меньше просмотров страниц,
• Посетители сайта удовлетворены на 16% меньше.

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

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

Содержание:

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

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

Программы для оптимизации изображений

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

Оптимизация изображений онлайн

SEO оптимизация изображений

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

Перед публикацией картинки на сайте решите три вещи:

• Физический размер изображения (длина и ширина),
• Формат изображения (jpeg, png, webp или другие форматы),
• Размер изображения (в Килобайтах).

С хорошо подобранными параметрами вы можете уменьшить размер картинки в 5-10 раз по сравнению с первоначальным.

Оптимизируйте длину и ширину изображения

Если вам нужно поместить изображение, которое займет 1/3 экрана, используйте картинку нужного размера, например, 400х300 Пикс.

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

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

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

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

Существует несколько форматов изображений, которые используются для публикации изображений в интернете. Самые популярные — JPEG и PNG.

JPEG — формат, который использует сжатие с потерями (lossy) и не поддерживает прозрачность. В зависимости от степени сжатия, эти картинки можно оптимизировать без потери качества изображения.

PNG — сжатие без потерь (lossless) и поддерживает прозрачность.

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

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

Оптимизируйте размер изображения в Килобайтах

Чем меньше размер изображения в Килобайтах, тем ниже качество картинки.

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

Для картинки размером 400х300 пикселей современные требования Гугл и других сервисов что-то около 20-50 Килобайт.

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

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

• Вы можете сделать это на компьютере с помощью разных программ и загрузить на сайт
• Оптимизировать изображения на сайте с помощью плагина
• Оптимизировать в интернете с помощью специальных сервисов

Многие онлайн сервисы оптимизации поддерживают массовую оптимизацию изображений. На бесплатных тарифах обычно существует ограничение на количество изображений или на объем.

Программы для оптимизации изображений

Фотошоп, Иллюстратор и некоторые другие программы Adobe имеют инструмент оптимизации изображений.

Откройте файл и перейдите File — Export — Save for Web.

Если вы хотите сохранить изображение в формате png, выберите PNG-8, выберите количество цветов изображения и метаданные, которые вы хотите оставить в конечном файле:

Изображение s. salvador с сайта Freepik
Фотошоп — Сохранить для веб — png

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

• No Dither
• Diffusion
• Pattern

No Dither хорошо справляется с разными цветами, но плохо с градиентом. Pattern хорошо с градиентом, но хуже с цветами, на некоторых цветах появляются артефакты.

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

Если вы хотите сохранить изображение в формате jpg, то выберите JPEG, выберите качество изображения или готовую настройку и метаданные, которые вы хотите оставить в итоговом файле:

Изображение edvaldocostacordeiro с сайта Pixabay
Фотошоп — Сохранить для веб — jpeg

Бесплатные альтернативы Фотошопу — программы GIMP и Paint.net.

ImageOptim

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

Альтернатива для Windows — Trimage.

JPEG Mini

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

Вы можете установить триал версию программы на компьютер, или купить плагины для Фотошопа и Лайтрума. После триального периода нужно купить платную версию.

Программа стоит 59$, программа и плагины для Фотошопа и Лайтрума стоят 89$.

Также есть платное подключение по API для разработчиков.

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

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

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

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

Smush Image Compression and Optimization

Плагин создан разработчиком WPMU DEV, регулярно обновляется и имеет более миллиона установок. Оптимизирует jpeg, png и gif форматы. Изображения до 5 Мб оптимизируются бесплатно в любом количестве.

Оптимизирует до 50 изображений за один раз. Автоматически находит изображения, которые замедляют сайт. Плагин может откладывать загрузку изображений до того, как они не появятся в видимой части экрана (lazy load).

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

EWWW Image Optimizer

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

Работает с форматами jpg, png и pdf. После оптимизации выбирает наиболее подходящий формат для показа на сайте, — jpg, png или gif.

Плагин может автоматически конвертировать jpg и png изображения в формат webp.

ShortPixel

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

В бесплатной версии позволяет оптимизировать до 100 изображений в месяц. Если нужно оптимизировать больше изображений, нужно купить одну из платных версий. Можно купить подписку на месяц или сделать единоразовую оплату за 10.000, 30.000, 50.000 или 170.000 изображений.

По этой ссылке вы получите еще 100 бесплатных оптимизаций в месяц каждый месяц.

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

TinyPng

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

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

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

Оптимизация изображений онлайн

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

TinyPNG

TinyPng — бесплатный web сервис оптимизации изображений, который использует lossy компрессию для уменьшения PNG и JPEG файлов. В бесплатной версии есть ограничение 20 изображений. Каждое изображение не должно превышать 5 Мб.

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

Для разработчиков есть подключение по API для автоматической оптимизации изображений.

Optimizilla

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

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

Bulkresizephotos

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

Сервис уменьшает размер и/или объем изображений, и может конвертировать форматы изображений в JPEG, PNG или WEBP.

SEO оптимизация изображений

После того, как вы оптимизировали размер и объем изображения и выбрали подходящий формат, назовите готовый файл так, чтобы было понятно, что изображено на картинке. Не называйте файл Untitled.jpeg, Без-названия. png или 01.webp.

Закачайте картинку на сайт и добавьте атрибуты Alt и Description. Эти теги говорят поисковым системам что изображено на картинках. Заполните как минимум поле Alt.

Добавьте атрибут Alt и Описание

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

Трафик из раздела Картинки поисковых систем

Также эти теги помогают пользователям с нарушениями зрения, так как их программы чтения с экрана могут читать им теги Alt и Title.

Заключение

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

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

Если вы начинаете новый сайт, то оно того стоит.

После оптимизации в Фотошопе картинки имеют маленький размер, так что до-оптимизацию на сайте с помощью плагина можно не делать.

Хороший результат у плагинов TinyPNG и ShortPixel. EWWW Image Optimizer хороший плагин, но его сложнее настроить.

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

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

Читайте также:

1. Где брать бесплатные картинки в хорошем качестве для публикации на сайте без нарушения авторских прав
2. SEO для Вордпресс. Подробная инструкция
3. 12 советов для SEO оптимизации Блога

Надеюсь, статья была полезна. Оставляйте комментарии.

Как оптимизировать изображения в WordPress – Помощь

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

Закажите услугу REG.Site

Попробуйте комплексное решение для создания сайта прямо сейчас!

Попробовать

Для чего оптимизировать изображения

Изображения (картинки, фото, иллюстрации) — один из самых «тяжёлых» типов контента на сайте. В зависимости от формата, количества пикселей и детализации одна картинка может весить даже десятки МБ. Это плохо для сайта.

Разберём на примере. Представьте сайт интернет-магазина с 1000 товаров. Каждый из них нужно показать покупателям, то есть сопроводить не только текстовым описанием с ценой, но и фотографией. Если размер одного изображения — 2 МБ, то все вместе они будут весить больше 2 ГБ и занимать много места на хостинге. Кроме того, из-за размера файлов страницы товаров будут грузиться медленно.

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

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

Благодаря сжатию можно сократить изначальный вес файла вплоть до 80–90%. При этом важно не переусердствовать, ведь чрезмерная оптимизация приведёт к потере качества. Изображение будет мутным, нечётким и вряд ли понравится посетителям.

Для каталога товаров в интернет-магазине оптимальный размер картинок — примерно 70–150 КБ. Если на вашем сайте меньше изображений, нужно смотреть по ситуации и скорости загрузки сайта. В среднем оптимальный вес каждого файла — 200 КБ–1 МБ).

Как оптимизировать картинки

Оптимизация изображений зависит от их типа:

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

Несколько наиболее распространённых способов оптимизации:

1. Загружать картинки в подходящем формате. Предпочтительные варианты: JPG, JPEG (для фотографий, в которых важна цветопередача), PNG (для изображений, в которых важны детали, тени), GIF (для анимации), SVG (для векторных файлов). Эти форматы индексируются поисковыми системами и корректно отображаются в большинстве браузеров.

2. Выбирать подходящий размер картинки. Например, если нужна небольшая картинка (250 на 300 px), не стоит загружать её на хостинг в размере 1000 на 1100 px, а затем масштабировать на сайте. Целесообразно уменьшить размер перед загрузкой.

3. Сжимать картинки. Это работа с самим изображением (снижение глубины цвета, отсечение лишних пикселей и т. п.). Это можно сделать вручную в редакторе Photoshop, с помощью онлайн-сервисов (Compressor, JPEGmini, TinyPNG и т. п.) или бесплатных плагинов в WordPress прямо на хостинге.

Ниже рассмотрим работу с картинками в WordPress.

Как оптимизировать изображения на сайте WordPress

В каталоге WordPress представлено более тысячи решений для работы с картинками:

Мы рассмотрим 2 самых популярных плагина: Smush (1 млн установок) и Compress JPEG & PNG Images (200 тыс. установок).

Плагины для оптимизации изображений:

• Smush (Smush — Lazy Load Images, Optimize & Compress Images) — бесплатная версия плагина позволяет автоматически сжимать изображения, когда вы загружаете их в админку сайта. Также он умеет конвертировать файлы в формат webP и очищает EXIF-данные о фото (дата, время и место создания), которые утяжеляют файл. Важная особенность этого плагина — отложенная загрузка. При работе этой функции, плагин блокирует загрузку изображений внизу страницы до того момента, когда пользователь доскроллит до них. Это также позволяет увеличить скорость загрузки.

• Compress JPEG & PNG Images — для работы с ним потребуется учётная запись и подтверждение через email. После активации вы сможете бесплатно сжимать до 500 файлов в формате JPEG и PNG каждый месяц.

Как установить и настроить плагин сжатия изображений WordPress

1. 1. Откроите административную панель WordPress.
2. 2.

   Перейдите в раздел «Плагины» и нажмите Добавить новый:

3. 3.

   В поиске справа введите название плагина, который хотите использовать: «Smush» или «Compress JPEG & PNG Images».

4. 4.

   Нажмите Установить, а затем Активировать:

Smush

Compress JPEG & PNG Images

1. 5.

   Наведите курсор на раздел Smush и выберите Панель управления:

   При первом запуске вы сможете включить автоматическую настройку.

2. 6.

   На открывшейся странице в настройках включите возможность уменьшать полноразмерные изображения и нажмите Update Settings:

3. 7.

   Для оптимизации новых картинок нажмите Загрузить изображения:

   Добавить изображения в WordPress

4. 8.

   Выберите файлы (максимальный размер — 128 МБ) и загрузите их в админку:

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

5. 9.

   Перейдите в Smush и нажмите Оптимизировать все изображения:

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

1. 5.

   Перейдите в раздел «Плагины» и нажмите Функции в указанной строке:

2. 6.

   Введите имя и почту и нажмите Регистрация аккаунта:

3. 7.

   Перейдите в указанную почту и нажмите кнопку из письма:

4. 8.

   Вернитесь в админку и обновите страницу. После активации вы сможете сжимать картинки.

5. 9.

   Настройте плагин и нажмите Сохранить изменения:

   WordPress размеры изображений

6. 10.

   Перейдите в раздел «Медиафайлы» и нажмите Сжать напротив изображения, которое хотите оптимизировать.

7. 11.

   Также доступно массовое сжатие всех ресурсов. Для этого перейдите в подраздел «Массовая оптимизация» и нажмите указанную кнопку:

   Массовая оптимизация картинок WordPress

Готово, так вы сможете сжимать изображения для быстрой работы сайта.

Полезные рекомендации от PageSpeed Insights

1. Используйте современные форматы изображений: JPEG 2000, JPEG XR, WebP. Инструментам проще сжимать их, чем PNG или JPEG, поэтому они быстрее загружаются и расходуют меньше трафика.

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

Сжатие картинок WordPress — не единственный способ улучшения. Для SEO-оптимизации также будут полезны и другие меры. Например, перенесение всего тяжёлого контента на отдельный домен и подключение CDN (Content Delivery Network). Оно позволит увеличить скорость загрузки за счёт использования распределённой системы серверов. Благодаря этому как бы далеко ни находились пользователи от исходного сервера вашего сайта, контент для них будет загружаться быстрее.

Была ли эта статья полезной?

Да Нет

Пользователи, считающие этот материал полезным: 0 из 0

Оптимизация изображений для сайта — инструмент увеличения производительности

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

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

Согласно HTTP Archive, изображения занимают в среднем 21% от общего размера веб-страницы. Процесс оптимизации изображений является самым простым способом повышения производительности сайта. Но при этом большинство владельцев пренебрегают им.

Среднее количество байт на страницу (кБ)

Преимущества оптимизации графического контента:

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

Основная задача оптимизации – это получение баланс между наименьшим размером файла и приемлемым качеством изображения. Одним из распространенных способов является простое сжатие файлов перед их загрузкой в WordPress. Для этого используют Adobe Photoshop или Affinity Photo. А также плагины, которые мы подробно рассмотрим ниже.

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

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

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

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

Примечание: Объем оригинального изображения составляет 2,06 Мб.

Низкая степень сжатия (высокое качество) JPG – 590 Кб

Высокая степень сжатия (низкое качество) JPG – 68 Кб

Размер первого изображения составляет 590 Кб. Это довольно много для одной фотографии. Второе изображение выглядит ужасно, но при этом весит всего 68 Кб.

Применим к изображению среднюю степень сжатия. В результате мы получили хорошее качество при размере файла в 151 Кб. Это почти в четыре раза меньше размера оригинальной фотографии. Для обеспечения наилучшей производительности сайта изображения в формате PNG не должны весить более 100 Кб.

Средняя степень сжатия (отличное качество) JPG – 151 Кб

Оптимизация с потерями – это «фильтр», который убирает некоторые данные и ухудшает качество изображения. Но при этом размер файла изображения существенно уменьшается. Для этого можно использовать такие программы как Adobe Photoshop, Affinity Photo или любой другой графический редактор.

Оптимизация без потерь качества – сжатие данных без снижения качества изображения. Выполнить сжатие без потери качества можно с помощью Photoshop, FileOptimizer или ImageOptim.

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

Существует множество инструментов и программ для оптимизации изображений. Лично мы – большие поклонники Affinity Photo.

Сжатие фотографии в Affinity Photo

Ниже перечислено несколько инструментов для оптимизации изображений:

• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• ImageResize.org

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

Пример кода отзывчивых изображений srcset

Медиа-библиотека WordPress создает миниатюры на основе ваших установок. Но при этом она сохраняет оригинальные изображения без изменений. Чтобы изменить размер изображений, не сохраняя оригинальные, можно воспользоваться бесплатным плагином Imsanity.

Настройка медиафайлов в WordPress

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

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

Но не стоит полностью полагаться на плагины. Например, не следует загружать изображения размером более 2 Мб в медиа-библиотеку WordPress. Это приведет к быстрому расходованию дискового пространства, предоставляемого хостингом.

Плагин Imagify для оптимизации изображений

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

Изменение размера файлов в Imagify

Плагин ShortPixel

Бесплатный плагин ShortPixel Image Optimizer позволяет сжимать 100 изображений в месяц. Он работает с множеством форматов, включая PNG, JPG, GIF, WebP и даже PDF. Он выполняет сжатие изображений с потерями и без потерь. Плагин конвертирует цветовую модель CMYK в RGB. При оптимизации создается резервная копия оригинальных файлов, что позволяет при желании восстановить их вручную. Данный плагин также поддерживает массовую конвертацию файлов.

Плагин Optimole

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

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

EWWW Image Optimizer Cloud- облачный плагин для оптимизации изображений

Плагин EWWW Image Optimizer Cloud оптимизирует изображения и повышает скорость работы сайта. Пользователи EWWW IO могут использовать функцию Bulk Optimizer («массовый оптимизатор»), предназначенную для сжатия имеющихся изображений.

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

Функция ExactDN позволяет выполнять автоматическое сжатие (без необходимости сжатия на сервере), автоматическое изменение размера и обладает всеми  преимуществами CDN.

Плагин Optimus Image Optimizer

Плагин Optimus WordPress Image Optimizer использует сжатие без потерь. Он поддерживает WooCoomerce и мультисайты, а также включает в себя функцию массовой оптимизации. Плагин также совместим с плагином WP Retina. Если вы совместите плагин Optimus Image Optimizer  с плагином Cache Enabler, то сможете работать с изображениями, сохраненными в формате WebP.

Плагин WP Smush

Плагин WP Smush  сканирует изображения и сжимает их по мере их загрузки на сайт. Он также находит и оптимизирует уже сохраненные рисунки. Он позволяет осуществлять массовое сжатие (до 50 файлов за раз). Плагин поддерживает форматы JPEG, GIF и PNG. Размер исходных файлов ограничен 1 Мб.

• Плагин совместим с WP All Import и WPML.
• Оптимизация изображений выполняется с помощью сжатия без потерь.
• У Smush есть функция автоматической установки ширины и высоты для всех изображений.

Плагин TinyPNG

Плагин TinyPNG использует сервисы TinyJPG и TinyPNG для оптимизации изображений в форматах JPG и PNG. Для экономии места плагин конвертирует CMYK в RBG. Он сжимает файлы JPEG до 60%, а файлы PNG до 80% без видимой потери качества изображения. У него нет ограничений на размер обрабатываемого файла.

ImageRecycle- плагин для оптимизации изображений и PDF-файлов

Плагин ImageRecyle – это автоматический оптимизатор изображений и PDF-файлов. Одной из его полезных функций является способность устанавливать минимальный размер файла для сжатия. Например, если у вас есть изображения размером 80 Кб, вы можете автоматически исключить их из процесса сжатия. Данный плагин также включает в себя функцию массовой оптимизации и автоматического изменения размеров изображений.

Мы решили провести свое небольшое исследование, чтобы показать вам как оптимизация изображений влияет на скорость работы WordPress-сайта.

Мы загрузили шесть несжатых файлов JPG на наш тестовый сайт. Размер каждого из них превышал 1 Мб. Общее время загрузки составило 1,55 секунды, а общий размер страницы -14,7 Мб.

Тест скорости передачи данных несжатых файлов JPG

Затем мы сжали файлы JPG с помощью WordPress-плагина Imagify, используя «агрессивные» установки. Взгляните на новые сжатые файлы JPG, которые все еще выглядят прекрасно. После этого мы провели пять тестов, используя Pingdom, и выбрали среднее значение. В результате общее время загрузки сократилось до 476 мс, а размер страницы уменьшился до 2,9 Мб. Общее время загрузки уменьшилось на 54,88%, а размер страницы — на 80,27%.

Тест на скорость передачи данных сжатых файлов JPG

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

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

• Файлы SVG автоматически масштабируются во всех браузерах и графических редакторах.
• Google индексирует файлы SVG так же, как и PNG и JPG, поэтому вам не нужно беспокоиться о SEO.
• SVG-файлы отличаются меньшим размером по сравнению PNG или JPG. Это положительно сказывается на скорости загрузки.

Файл JPG (оптимизированный размер: 81,4 Кб)

Изображение JPG

Файл PNG (оптимизированный размер: 85,1 Кб)

Изображение PNG

Файл SVG (оптимизированный размер: 6.1 Кб)

Изображение SVG

Как показано выше, SVG- файл уменьшается в размере на 92,51% по сравнению с файлом в формате JPG. А при сравнении с файлом в формате PNG – на 92,83%.

• Используйте WordPress-плагины, которые сжимают и оптимизируют изображения на внешних серверах. Это снижает нагрузку на ваш собственный сайт.
• Используйте векторные изображения, где это только возможно.
• Используйте CDN для быстрого предоставления изображений посетителям со всего мира.
• Используйте эффекты CSS3 как можно чаще.
• Сохраняйте изображения в подходящем разрешении. При этом помните, что WordPress поддерживает адаптивные изображения для их предоставления без изменения размера с помощью CSS.
• Используйте веб-шрифты вместо текста внутри изображений – они выглядят лучше при масштабировании и занимают меньше места.
• Уменьшайте глубину цвета для использования меньшей цветовой палитры.
• Используйте сжатие с потерей качества, где только возможно.
• Экспериментируйте для поиска наилучших установок для каждого формата.
• Используйте GIF, если вам нужна анимация.
• Используйте формат PNG, если вам требуется высокая детализация и разрешение.
• Используйте формат JPG для фотографий общего вида и скриншотов.
• Автоматизируйте процесс оптимизации изображений.
• Используйте формат WebP в Google Chrome для отображения изображений меньшего размера.

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

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

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

Наталья Кайдаавтор-переводчик статьи «How to Optimize Images for Web and Performance»

11 советов по оптимизации изображений для сайта (SEO)

Согласно данным Jumpshot, больше 20% всего поиска в Google приходится на Google Images.

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

Без надлежащей оптимизации изображений вы теряете ценные возможности SEO.

Советы по оптимизации изображений, о которых должен знать каждый

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

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

• PNG: изображение высокого качества, но и большой размер файла.

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

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

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

2. Сжимайте изображения.

Согласно HTTP Archive, изображения в среднем составляют 21% общего размера страницы.

Вот почему рекомендуем вам использовать сжатие изображений перед загрузкой на сайт. Сделать это можно с помощью редактора Photoshop или инструмента TinyPNG.

Использование CDN сетей, так же определяет устройство и оптимизирует способ доставкой контента. Среди достойных представителей Cloudinary и Imgix.

Например, сайт increasingly.com увеличил скорость загрузки на 33% (2 секунды) только благодаря сжатию изображений.

Чтобы проверить и узнать, насколько изображения смогут повлиять на скорость сайта, воспользуйтесь проверенным инструментом Google PageSpeed ​​Insights.

3. Создавайте уникальные изображения.

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

Вспомните хотя бы сайты о бизнесе, все они имеют одни и те же изображения улыбающегося бизнесмена. Наверняка вы такое видели:

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

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

Google рекомендует:

«Большие изображения должны иметь ширину не менее 1200 пикселей и разрешаться настройкой max-image-preview: large или с помощью AMP».

Такие изображения с большей вероятностью попадут в Google Discover.

4. Не забывайте про авторские права на изображения.

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

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

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

Google Images позволяет фильтровать результаты поиска по типу лицензии на использование.

5. Настройте имена файлов изображений.

Когда дело доходит до SEO, создание описательных с ключевыми словами имён файлов имеет важное значение.

Имена файлов изображений предупреждают Google и других роботов поисковых систем о сути изображения.

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

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

Например, изображение шоколада — файл можно назвать «chocolate», но лучше «bar-with-chocolate-flavor».

6. Пропишите альтернативный текст к изображениям.

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

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

Google отмечает:

«Он предоставляет Google полезную информацию об изображении. Мы используем эту информацию, чтобы определить и вывести наиболее релевантное изображение по запросу пользователя».

Альтернативный текст может быть таким:

<img src = ”chocolate.jpg” alt = ”chocolate” />

Но лучше, если альтернативный текст будет более конкретным:

<img src = ”chocolate.jpg” alt = ”dark chocolate coffee flavored bar” />

7. Структурируйте файлы изображений.

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

Повторимся: путь к файлу и имя файла являются фактическим фактором ранжирования.

Например, если это электронная торговля, вместо того, чтобы помещать все изображения товаров в общую папку /media/, правильнее будет структурировать подпапки по темам, связанным с категориями, например /shorts/ или /denim/.

8. Пропишите Title и Description страниц.

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

На странице поддержки Google говорится:

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

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

9. Укажите размеры изображений.

Если вы используете AMP или PWA, необходимо указывать размеры изображений в исходном коде.

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

Атрибуты размеров изображения также важны для предотвращения проблем с CLS, которые могут повлиять на Core Web Vitals.

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

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

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

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

Для этого Mozilla предлагает набор атрибутов srcset и sizes, предоставляя браузерам дополнительные исходные изображения, что позволяет отображать идентичное содержимое изображений с изменёнными размерами для разных устройств.

Пример использования:

<img srcset=»elva-fairy-480w.jpg 480w,

                      elva-fairy-800w.jpg 800w»

        

         src=»elva-fairy-800w.jpg»

         alt=»Elva dressed as a fairy»>

Подробнее об использовании srcset и sizes вы можете узнать на официальном сайте Mozilla.

11. Добавьте изображения в sitemap.

Добавляются изображения в общий или отдельный sitemap неважно, но они там должны быть.

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

После не забывайте загружать ссылку на sitemap в Google Search Console.

Ключевые выводы по оптимизации изображений

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

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

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

С оригиналом статьи вы можете ознакомиться на Search Engine Journal.

Оптимизация изображений для web – База знаний Timeweb Community

Введение

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

1. Повышение производительности

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

1.1. Масштабирование изображений

Адаптируя размеры изображений специально для своего сайта, вы можете значительно сэкономить ресурсы и улучшить производительность сайта. Обращайте внимание на размеры своего изображения и размеры того блока, куда вы хотите это изображение вставить: если ваша картинка больше необходимого размера, то при помощи CSS она все равно будет уменьшена до подходящего размера, но ресурсы, затрачиваемые на ее загрузку, останутся прежними. Поэтому крайне важно загружать изображения в подходящем масштабе: согласно исследованиям, это может сэкономить более половины ваших ресурсов!

1. 2. Сжатие изображений

По информации HTTP Archive, вес изображений составляет 62% от общего веса каждой страницы веб-сайта. Поэтому лучший способ оптимизации – сжатие изображений без потерь. При таком методе сжатия изображение уменьшается по весу, но при этом не теряет в качестве. Используя этот метод оптимизации, вы можете уменьшить использование своих ресурсов на 30%.

1.3. Отзывчивые изображения

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

<img src="flowers.jpg" alt="flowers">

А вот так вы можете добавить дополнительные атрибуты для того, чтобы на сайте использовались разные размеры изображения для разных дисплеев (в данном случае дисплеи с шириной экрана 160, 320, 640 и 1280 пикселей соответственно):

<img src="flowers. jpg" alt="flowers" srcset="flowers-160.jpg 160w, flowers-320.jpg 320w, flowers-640.jpg 640w, flowers -1280.jpg 1280w">

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

1.4. Использование CDN

Оптимизировать загрузку изображений можно при помощи использования CDN (Content Delivery Network). Графические файлы будут загружаться намного быстрее, а значит, общее время загрузки страницы также уменьшится. Проведенные тесты показали, что включение CDN позволяет сократить время загрузки в среднем на 75 процентов.

1.5. Форматы изображений – PNG, JPEG, WebP, SVG

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

WebP

Этот формат был разработан корпорацией Google в 2010 году. Он позволяет наиболее эффектно сжать изображение: проведенные тесты показали, что использование WebP вместо JPEG позволяет примерно в два раза увеличить скорость загрузки страницы и более чем на 70% уменьшить ее вес.

SVG (Scalable Vector Graphics — масштабируемая векторная графика)

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

<img src="flowers. svg">

Совет:
в некоторых CMS (к примеру, в WordPress) файлы с этим расширением могут быть запрещены из соображений безопасности. В этом случае вам нужно воспользоваться одним из плагинов, например, SVG Support или Add Full SVG Support.

2. SEO-оптимизация изображений

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

2.1. Названия файлов изображений

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

Совет:
если в качестве названия вашего изображения вы хотите использовать фразу – к примеру, “Summer Flower Arrangements”, то обязательно разделяйте ее дефисами: “summer-flower-arrangements. jpg”, так как поисковый робот Google рассматривает дефис в названии файла как разделение, пробел. Если вы будете использовать нижнее подчеркивание, то робот всю фразу воспримет как одно целое слово.

2.2. Атрибут alt

Данный атрибут описывает изображение и высвечивается пользователю, если по каким-либо причинам браузер не смог загрузить саму картинку. Поэтому в этом атрибуте должна быть записана короткая, но емкая фраза, которая наиболее точно описывает изображение. Зачастую название файла и атрибут alt могут совпадать:

<img src=" summer-flower-arrangements.jpg" alt="summer flower arrangements">

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

2.3. Атрибут title

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

2.4. Карта сайта для изображений

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

2.5. Индексация изображений

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

User-agent: *
Allow:
Disallow:

Первая строка (User-agent) определяет, к какому поисковому боту относится данное правило. Если вы поставите звездочку (*), то правило будет распространяться на всех роботов; либо вы можете написать название конкретной поисковой системы – Google, Yandex и т. д. Вторая и третья строчки, соответственно, отвечают за те разделы сайта, к которым робот имеет (allow) или не имеет (disallow) доступ.

Если вы используете CDN, необходимо добавить строчку rel=»canonical» в заголовок HTTP для того, чтобы поисковые боты понимали, что CDN-контент – это просто копия, а не продублированный материал:

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

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

3.1. Разметка Facebook Open Graph

Теги Open Graph определяют, как будет выглядеть материал при появлении на Facebook. Когда вы собираетесь поделиться какой-либо статьей, именно мета-теги задают все параметры записи: URL-адрес, заголовок, описание и, самое главное, изображение. Вы можете использовать множество разных мета-тегов, но основные из них:

<meta property="og:url" content="http://www.exmpl.com/arts.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="7 Psychology Books Every Designer Should Read " />
<meta property="og:description" content="Continuous learning. That’s one thing that applies to a lot of fields, especially to the field of design." />
<meta property="og:image" content="http://www.exmpl.com /images/fb-v2.jpg" />

Эти мета-теги можно вручную добавить на любой статический сайт; если вы используете CMS (к примеру, WordPress), то это можно сделать при помощи плагина (например, Yoast SEO).

Рекомендуемый размер изображения для Facebook: 1200 на 630 пикселей.

3.2. Разметка Twitter Cards

Функции этой разметки схожи с Facebook Open Graph: они используются для отображения анонса статьи в Твиттере. Существует 4 основных вида Twitter Cards:

Summary Card: запись состоит из заголовка, описания, миниатюры и авторства;
Summary Card with Large Image: такая же запись, как и Summary Card, но с большим размером изображения;
App Card: запись с возможностью скачивания мобильного приложения;
Player Card: запись с каким-либо медиа-контентом (видео, аудио).

Ниже вы видите код Summary Card with Large Image:

<meta name="twitter:card"    content="summary_large_image" />
<meta name="twitter:description" content=" Continuous learning. That’s one thing that applies to a lot of fields, especially to the field of design." />
<meta name="twitter:title"   content="Example article" />
<meta name="twitter:site"    content="@example" />
<meta name="twitter:image"   content="https://example.com/blog/wp-content/seo-indexing-images.png" />
<meta name="twitter:creator"  content="@example" />

Как и в случае с Facebook Open Graph, эти мета-теги можно добавить самостоятельно на любой статический сайт либо при помощи плагина на CMS.

Рекомендуемый размер изображения для Twitter: 1024 на 512 пикселей.

3.3. Сниппеты Google+

Google+ использует микроданные Schema.org в качестве главного источника получения информации для своих сниппетов, но также использует и разметку Open Graph (как Facebook). Поэтому если выше вы уже настроили эти теги, то больше вам не нужно ничего делать.

Заключение

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

6 стратегий оптимизации изображений для Интернета

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

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

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

К преимуществам оптимизации изображения относятся:

• Снижение показателей отказов – пользователи с большей вероятностью останутся на странице, если она загружается быстро
• Улучшение взаимодействия с клиентами — изображения являются центральной частью взаимодействия с пользователем на современном веб-сайте.Если изображения загружаются медленно (даже если остальная часть контента видна), посетители с меньшей вероятностью будут взаимодействовать с веб-сайтом и в конечном итоге конвертировать.
• Экономия средств – пропускная способность стоит денег, а за счет оптимизации изображений веб-сайты используют ее меньше и экономят на хостинге и доставке контента.
• Улучшение поискового рейтинга — потому что время загрузки страницы и производительность являются факторами ранжирования в Google и других поисковых системах. Оптимизация изображений может напрямую привести к более высокому рейтингу и увеличению трафика.

Стратегии оптимизации изображений

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

1. Выберите правильный формат файла

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

• PNG , который создает изображения высокого качества, но также увеличивает размер файла. PNG без потерь, но вы также можете настроить его для включения сжатия с потерями.
• JPEG — вы можете сбалансировать качество и размер файла, отрегулировав уровень качества JPEG в диапазоне от 1 до 100%.
• GIF — поддерживает только 256 цветов и обеспечивает сжатие без потерь. Редко используется для статических изображений, но становится все более популярным для анимации.

2. Используйте форматы файлов Progressive JPEG и Next-Gen

Изображения

JPEG имеют два режима рендеринга:

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

Использование прогрессивного JPEG на вашем веб-сайте или в приложении может значительно улучшить работу пользователей с медленным подключением к Интернету.

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

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

3. Кэширование

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

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

страниц.

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

4. Сжатие

Методы сжатия используются для уменьшения размера изображения. Существует два распространенных типа сжатия:

.

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

5. Изменение размера

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

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

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

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

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

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

Заключение

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

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

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

Автор биографии: Гилад Давид Мааян

Гилад Давид Мааян — автор технических текстов, который работал с более чем 150 технологическими компаниями, включая SAP, Imperva, Samsung NEXT, NetApp и Ixia, создавая технические и передовые материалы, разъясняющие технические решения для разработчиков и руководителей ИТ. Сегодня он возглавляет Agile SEO, ведущее маркетинговое агентство в технологической отрасли.

LinkedIn: https://www.linkedin.com/in/giladdavidmaayan/

Страница не найдена — Shopify

404: Страница не найдена — Shopify Перейти к содержанию

• Start
  • Начните свой бизнес
  • Брендинг

    Выглядите профессионально и помогите клиентам связаться с вашим бизнесом

  • Присутствие в Интернете

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

  • Настройка магазина

    Используйте мощные функции Shopify для начала продаж

• Продажа
  • Продажа везде
  • Интернет-магазин

    Продажа через Интернет через веб-сайт электронной коммерции

  • Точка продаж

    Продажа в розничных точках, всплывающих окнах 504 90 Transform 90 существующий веб-сайт или блог в интернет-магазин

  • Оформление заказа

    Обеспечьте быструю и удобную процедуру оформления заказа

  • Каналы продаж

    Привлеките миллионы покупателей и увеличьте продажи

  • Оптовый рынок

    Продавайте свои товары оптом розничным торговцам со всех концов США

  • 5
  • Индивидуальные инструменты для витрины

    Выделяйтесь с помощью индивидуализированных коммуникаций erce

  • Международная торговля

    Привлечение покупателей на новых рынках с помощью инструментов международных продаж

Открыть главную навигацию

• Start
  • Начните свой бизнес
  • Брендинг

    Выглядите профессионально и помогите клиентам связаться с вашим бизнесом

  • Присутствие в Интернете

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

  • Настройка магазина

    Используйте мощные функции Shopify для начала продаж

• Продажа
  • Продажа везде
  • Интернет-магазин

    Продажа через Интернет через веб-сайт электронной коммерции

  • Точка продаж

    Продажа в розничных точках, всплывающих окнах 504 90 Transform 90 существующий веб-сайт или блог в интернет-магазин

  • Оформление заказа

    Обеспечьте быструю и удобную процедуру оформления заказа

  • Каналы продаж

    Привлеките миллионы покупателей и увеличьте продажи

  • Оптовый рынок

    Продавайте свои товары оптом розничным торговцам со всех концов США

  • 5
  • Индивидуальные инструменты для витрины

    Выделяйтесь с помощью индивидуализированных коммуникаций erce

  • Международная торговля

    Привлечение покупателей на новых рынках с помощью инструментов международных продаж

• Рынок
• Управление

Открывается в новом окнеОткрывает внешний сайтОткрывает внешний сайт в новом окне

Проверьте веб-адрес и повторите попытку или вернитесь на домашнюю страницу Shopify.

Дополнительные ресурсы

Страница не найдена — Shopify

404: Страница не найдена — Shopify Перейти к содержанию

• Start
  • Начните свой бизнес
  • Брендинг

    Выглядите профессионально и помогите клиентам связаться с вашим бизнесом

  • Присутствие в Интернете

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

  • Настройка магазина

    Используйте мощные функции Shopify для начала продаж

• Продажа
  • Продажа везде
  • Интернет-магазин

    Продажа через Интернет через веб-сайт электронной коммерции

  • Точка продаж

    Продажа в розничных точках, всплывающих окнах 504 90 Transform 90 существующий веб-сайт или блог в интернет-магазин

  • Оформление заказа

    Обеспечьте быструю и удобную процедуру оформления заказа

  • Каналы продаж

    Привлеките миллионы покупателей и увеличьте продажи

  • Оптовый рынок

    Продавайте свои товары оптом розничным торговцам со всех концов США

  • 5
  • Индивидуальные инструменты для витрины

    Выделяйтесь с помощью индивидуализированных коммуникаций erce

  • Международная торговля

    Привлечение покупателей на новых рынках с помощью инструментов международных продаж

Открыть главную навигацию

• Start
  • Начните свой бизнес
  • Брендинг

    Выглядите профессионально и помогите клиентам связаться с вашим бизнесом

  • Присутствие в Интернете

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

  • Настройка магазина

    Используйте мощные функции Shopify для начала продаж

• Продажа
  • Продажа везде
  • Интернет-магазин

    Продажа через Интернет через веб-сайт электронной коммерции

  • Точка продаж

    Продажа в розничных точках, всплывающих окнах 504 90 Transform 90 существующий веб-сайт или блог в интернет-магазин

  • Оформление заказа

    Обеспечьте быструю и удобную процедуру оформления заказа

  • Каналы продаж

    Привлеките миллионы покупателей и увеличьте продажи

  • Оптовый рынок

    Продавайте свои товары оптом розничным торговцам со всех концов США

  • 5
  • Индивидуальные инструменты для витрины

    Выделяйтесь с помощью индивидуализированных коммуникаций erce

  • Международная торговля

    Привлечение покупателей на новых рынках с помощью инструментов международных продаж

• Рынок
• Управление

Открывается в новом окнеОткрывает внешний сайтОткрывает внешний сайт в новом окне

Проверьте веб-адрес и повторите попытку или вернитесь на домашнюю страницу Shopify.

Дополнительные ресурсы

Оптимизация изображений для лучшей веб-производительности в 2022 году

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

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

Посетители не смогут совершить конверсию, если покинут ваш сайт так быстро! И Google тоже будет недоволен: поисковая система указывает скорость загрузки в качестве фактора ранжирования с 2010 года, а в грядущем обновлении Page Experience скорость загрузки страницы будет по-прежнему отдаваться приоритету в качестве важного фактора ранжирования вплоть до 2021 года.

Оптимизация изображений для Интернета: Статистика

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

Наиболее важные стратегии оптимизации веб-сайтов в 2021 году:

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

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

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

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

Оптимизация фотографий продуктов: краткие факты

Источники: Agility PR, eMarketer

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

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

Возьмем, к примеру, этот кейс из 2011 года: Когда исследовательская лаборатория MarketingExperiments заменила популярную стоковую фотографию реальной фотографией основателя тестовой компании, коэффициент конверсии страницы увеличился более чем на 34%. С тех пор отвращение клиентов к стоковым изображениям, вероятно, только усилилось!

Резюме: чтобы повысить конверсию, вам следует…

• Использовать подробные фотографии продуктов
• Избегать стоковых изображений

Оптимизация изображений и скорость веб-сайта

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

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

Когда мы разговаривали с веб-разработчиком Матусом Харманом, он дал нам еще один важный совет по оптимизации времени загрузки веб-сайта: будьте избирательны в отношении количества изображений, которые вы фактически включаете на страницу.

Matus Harman

Full Stack Developer

 

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

А что за кулисами?

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

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

Тестирование скорости веб-сайта

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

Существует ряд бесплатных и платных инструментов, которые помогут вам оставаться в курсе событий. Нам нравится инструмент Google PageSpeed ​​Insights, потому что 1. Он бесплатный и 2.Информация поступает от самой поисковой системы!

Вы даже получите рекомендации по устранению проблем, выявленных Google.

Чтобы получить действенные предложения, все, что вам нужно сделать, это вставить URL-адрес своей страницы и нажать «Ввод».

Еще один бесплатный вариант — GTmetrix. Он работает аналогично PageSpeed ​​Insights: просто введите свой URL-адрес, чтобы получить анализ и некоторые предложения.

GTmetrix отметит улучшения в порядке их важности.

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

Инструменты скорости сайта также являются отличным способом изучения влияния оптимизации изображений на ваши страницы. Когда мы поговорили с Мэттом Томкиным, основателем Tao Digital Marketing, он рассказал нам об оптимизации изображения, которую агентство сделало для британского ресторана The Mouse Trap.

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

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

Резюме: чтобы повысить скорость и удобство для пользователей, вам следует…

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

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

1. Выберите правильный формат

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

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

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

Какой тип файла следует использовать?

Что означают разные типы файлов?

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

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

Сети доставки контента — это мощные инструменты оптимизации веб-сайтов.

Cloudflare — это один из примеров CDN, который балансирует трафик между несколькими пунктами назначения, используя более 155 глобальных центров обработки данных (где размещены серверы). Вы можете пользоваться его основными услугами бесплатно.

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

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

Сжатие изображения может быть без потерь, или с потерями.

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

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

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

1. ImageResizer — бесплатно

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

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

2. TinyPNG — бесплатная базовая услуга или план Pro за 25 долларов в год. Вы можете загрузить до 20 изображений одновременно, каждое с максимальным размером файла 5 МБ, и все это бесплатно. Если вам нужны дополнительные инструменты, подписка TinyPNG Pro за 25 долларов в год увеличивает ограничение размера файла до 75 МБ.

 

 

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

3. Kraken.io — от 5 до 79 долларов в месяц

Kraken.io — это служба сжатия изображений и изменения их размера, которая поставляется с изображениями объемом не менее 500 МБ каждый месяц на самом базовом тарифном плане. Профессиональные пользователи также могут использовать инструмент веб-интерфейса для ввода URL-адреса веб-страницы, а также оптимизации и загрузки всех изображений на этой странице в ZIP-архив.Kraken. io поддерживает форматы JPG, PNG, SVG, GIF и Animated GIF.

 

 

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

Как насчет плагинов WordPress?

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

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

1.Imagify — от 0 до 9,99 долларов в месяц

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

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

«Поскольку большинство моих клиентов используют WordPress, я использую платный сервисный плагин под названием Imagify для дальнейшего автоматического сжатия загружаемых изображений.Самое замечательное в этом плагине то, что вы можете увидеть уменьшение размера изображения на 70%+, что означает более быструю загрузку веб-сайта — и подмигивание от Google, когда дело доходит до SEO».

— Антонио Уэллс, генеральный директор агентства цифрового маркетинга NAMYNOT Inc.

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

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

Для меня это уменьшило в среднем около 30 КБ на изображение. На полное развертывание ушло от трех до четырех часов, поскольку плагин сжимает изображение за изображением, а у меня на сайте почти 1000 изображений.”

— Карисса Хармер, владелец веб-сайта хобби по телефону Детективная школа

3. Smush — бесплатно

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

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

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

— Уилл Пич, владелец личного веб-сайта по телефону WillPeachMD.com

Главный совет: не увлекайтесь плагинами. Идея автоматизировать часть вашей работы по оптимизации изображений заманчива — и, во что бы то ни стало, вы должны использовать несколько плагинов WordPress, которые сделают вашу жизнь проще! Только не переусердствуйте, установив их кучу, потому что слишком много плагинов могут замедлить работу вашего сайта. — это противоположно тому, к чему мы стремимся! Лучше быть избирательным и просто выбрать несколько ваших любимых инструментов.

SEO-оптимизация изображений

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

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

SEO имеет решающее значение для успеха веб-сайта, потому что почти 70 % всех онлайн-опытов начинаются с поисковой системы, а более 90 % глобального трафика приходится на поиск Google, изображения Google и карты Google.

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

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

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

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

1. Оптимизация имен файлов изображений

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

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

…должен называться как-то вроде «шоколадно-замороженный-кекс», а , а не , как «WW8jBak7bo».

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

2. Оптимизация названий изображений

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

3. Включить замещающий текст

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

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

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

4. Используйте карты сайта

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

XML-карта сайта — это, по сути, список всех URL-адресов вашего веб-сайта. Это работает как дорожная карта для Google, чтобы определить, какие страницы доступны для сканирования. Если вы используете WordPress 5.5 или выше, есть базовая функция карты сайта XML, которая позволяет автоматически создавать карту сайта без использования плагина.

Чтобы найти его, просто добавьте «wp-sitemap.xml» в конец имени вашего домена и нажмите Enter.

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

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

Адаптивные изображения — это изображения, которые правильно отображаются на устройствах с различными размерами экрана (например,г. настольные компьютеры, смартфоны и планшеты), и они важны для SEO, потому что они обеспечивают лучший пользовательский опыт. Мы все знаем, что положительный пользовательский опыт важен для сканеров поисковых систем, и сам Google даже назвал адаптивные изображения важной передовой практикой.

Если вы используете WordPress, изображения, которые вы загружаете, будут создаваться автоматически, так что вы уже можете отметить «отзывчивые изображения» в своем списке дел!

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

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

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

Оптимизация изображений: Резюме

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

Таким образом, вы должны стремиться к:

• Выберите правильный формат – Узнайте, нужны ли вам файлы изображений JPG, PNG и/или SVG.
• Используйте CDN — Сократите время загрузки с помощью сети доставки контента.
• Сжатие изображений – Сбалансируйте наименьший размер файла с наилучшим качеством изображения.
• Оптимизируйте имена и заголовки файлов — Убедитесь, что они релевантны, а не случайны.
• Включить замещающий текст — Опишите каждое изображение, чтобы улучшить взаимодействие с пользователем.
• Используйте карты сайта — упростите для Google индексацию ваших изображений.
• Используйте адаптивные изображения . Убедитесь, что ваши изображения хорошо отображаются на разных устройствах.

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

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

Ты не любишь картинки?

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

И знаете что? Мы запрограммированы реагировать на изображения. Вот почему включение изображений в ваш контент — мощный инструмент для маркетинга вашего блога.

Но, если вы не будете осторожны, изображения могут составлять более половины (или более) общего размера вашей веб-страницы. Всего несколько лет назад средний размер веб-страницы составлял 600–700 КБ. Теперь средний размер составляет 2 МБ, и он увеличивается с каждым годом.

Это здорово!

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

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

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

Почему вам нужно оптимизировать изображения

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

Исследования показывают, что до 40% посетителей нажимают кнопку «Назад», если загрузка сайта занимает более трех секунд.

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

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

Излишне большие изображения также занимают место в вашей учетной записи хостинга. Хотя у некоторых из вас может быть хостинг с «неограниченным» пространством для хранения, многие хостинг-провайдеры премиум-класса ограничивают вас примерно 10 ГБ хранилища на планах более низкого уровня.Это может быстро заполниться, особенно если вы размещаете несколько сайтов с большим количеством изображений в одной учетной записи.

Итак, как узнать, замедляют ли ваши изображения работу сайта? Проверьте скорость своего сайта с помощью Google PageSpeed ​​Insights.

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

Основы оптимизации изображений

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

Давайте подробнее рассмотрим каждую из этих областей.

Тип файла

Изображения в Интернете обычно сохраняются в формате файлов PNG или JPEG, а для анимации — в формате GIF. Кто не любит эти веселые анимированные GIF-файлы, гуляющие по сети!

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

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

Итак, почему существуют разные форматы?

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

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

Подробнее о сжатии мы поговорим позже, а сейчас, если вы помните только две вещи, помните: JPEG для фотографий и PNG для текста/графики.

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

Вы когда-нибудь загружали веб-страницу и замечали, что для загрузки крошечной картинки (например, снимка в голову) требуется f-o-r-e-v-e-r? Например, так медленно, что вы можете видеть каждую входящую строку? Вы думаете про себя, как такое маленькое изображение может загружаться так долго?

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

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

И это огромный файл!

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

Теперь некоторые веб-платформы для публикации автоматически создают несколько вариантов вашего изображения в полном разрешении с разными размерами, но если нет, вам следует заранее изменить размер изображений в графическом редакторе, таком как Photoshop, Lightroom, Pixlr или даже MS Paint.Это может означать разницу между файлом размером 50 КБ и файлом 5 МБ.

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

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

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

После активации Imsanity также может искать ваши существующие изображения и соответствующим образом изменять их размер.

Обслуживание ваших изображений

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

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

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

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

Мастер блогов

использует Sucuri (он включает в себя брандмауэр для обеспечения безопасности, а также CDN), но есть и другие качественные поставщики, такие как Cloudfront от Amazon или KeyCDN. Даже популярный CloudFlare, который строго не является CDN, предлагает CDN бесплатно и легко настраивается в большинстве пакетов виртуального хостинга.

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

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

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

Я уверен, что многие, кто использует Photoshop, могут рассматривать его функцию «Сохранить для Интернета » как главное и окончательное средство оптимизации изображений. И даже онлайн-инструменты для редактирования изображений, такие как PicMonkey или Visme, также оптимизируют ваши изображения.

Но знаете ли вы, что существуют инструменты, которые могут взять ваше «оптимизированное» изображение из Photoshop или других инструментов редактирования, сжать его еще на 40% (или больше) и все еще сделать его почти идентичным человеческому глазу?

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

Настольные инструменты

ImageAlpha / ImageOptim

Для пользователей Mac ImageOptim — это бесплатный настольный инструмент, который я использую каждый день для оптимизации изображений PNG — в основном скриншотов — перед их загрузкой. Эти инструменты просты в использовании, вы просто перетаскиваете свои файлы, но вам нужно делать одно изображение за раз.

Совет профессионала : Для тех, кто разбирается в технологиях, есть ImageOptim–CLI, где вы можете оптимизировать всю папку изображений сразу.

ImageAlpha — это компрессор PNG с потерями, который может творить чудеса при сжатии файлов PNG, в то время как ImageOptim выполняет расширенное сжатие без потерь (с опцией сжатия с потерями) — и удаляет ненужные метаданные из файлов PNG, JPEG и GIF.

Для моих изображений PNG я сначала запускаю их через ImageAlpha:

Здесь он уменьшил мой снимок экрана со 103 КБ до 28 КБ.

Затем я прогнал его через ImageOptim и сэкономил дополнительные 10%.

JPEGмини

Для моих файлов JPEG я оптимизирую их с помощью настольного приложения JPEGmini, доступного как для Mac, так и для Windows.

Облегченная версия позволяет оптимизировать до 20 изображений в день бесплатно, снятие ограничения стоит 19,99 долларов.

Совет Pro : опытные пользователи, желающие интегрировать JPEGmini в Photoshop или Lightroom с помощью плагина, могут купить версию Pro за 99 долларов.99.

Онлайн/облако/SaaS-инструменты

TinyPNG

Если вы ищете высококачественный онлайн-инструмент для сжатия изображений, TinyPNG (оно также оптимизирует файлы JPEG, несмотря на название) — это веб-приложение, которое позволяет вам перетаскивать до 20 изображений размером 5 МБ или меньше в браузер и получать их. оптимизируется сразу.

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

TinyPNG дает вам 500 бесплатных оптимизаций изображений в месяц, после чего взимается плата от 0 долларов.002–0,009 за изображение в зависимости от объема.

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

Оптимизатор изображений EWWW

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

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

Подведение итогов

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

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

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

Затем воспользуйтесь преимуществами современного сжатия изображений с помощью настольных приложений, таких как JPEGmini, или облачных инструментов, таких как TinyPNG или Kraken, — если возможно, интегрируйте их в WordPress с помощью плагина.

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

---

Раскрытие информации:  Этот пост содержит партнерские ссылки. Это означает, что мы можем получить небольшую комиссию, если вы совершите покупку.

2022 SEO и методы повышения скорости сайта

Последнее обновление: 4 февраля 2022 г. |

15 мин.

SEO, скорость страницы и удобство работы пользователей — все это значительно выигрывает от tim.

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

Сейчас существует множество методов оптимизации изображений. Вот почему это руководство разделено на 2 раздела:

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

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

Имея это в виду, давайте начнем.

Методы оптимизации изображений: SEO и доступность

Давайте уберем очевидное:

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

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

Присоединяйтесь к NitroPack: бесплатно получите свои изображения и оптимизацию всего веб-сайта

Прямо сейчас изображения появляются как в поиске Google, так и в Google Images.

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

(извините, если вы читаете это прямо перед обедом)

Найдите то же ключевое слово в Google Images, и вы найдете ту же картинку.

Этот пример прекрасно иллюстрирует возможности оптимизации изображений для SEO.

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

Вот что мы пытаемся сделать с помощью этих методов SEO и специальных возможностей.

Посмотрим, как туда добраться.

Переименуйте файлы изображений

По умолчанию большинство файлов изображений имеют имена вроде «IMG_010204».

Это никому особенно не нужно, включая Google.

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

Например, это имя файла фотографии спагетти сверху:

(Серьезно, если вы голодны, идите перекусите.Я буду говорить об этом изображении на протяжении всего руководства)

Как видите, имя не причудливое, но свою работу выполняет.

И это самое лучшее в именах файлов:

Они не должны быть слишком подробными . Это работа альтернативного описания.

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

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

Короче говоря, делайте имена файлов простыми и информативными. Это не ракетостроение.

Использовать описательный замещающий текст

Замещающий текст — это описание (или его текстовый эквивалент) изображения.

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

Очень важно написать хороший замещающий текст для всех ваших изображений. Это также очень просто.

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

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

Итак, как написать хороший замещающий текст?

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

Вернемся к нашему изображению-рецепту:

Это пример отличного альтернативного текста — описательного и подробного, без лишних союзов или ключевых слов.

Любой может визуализировать изображение, даже не глядя на него.

Итак, описание — ваш приоритет номер один.

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

Также не используйте ненужные выражения вроде «Это изображение…». Конечно, это картинка, иначе зачем ей альтернативный текст?

Подводя итог:

Итак, как бы вы написали альтернативное описание для изображения ниже?

Источник фото — https://unsplash.com/photos/eDXRq-2LfNM

Хорошим вариантом будет «Черный современный Ford Mustang, припаркованный возле дерева на закате».

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

Расширение Alt Text Tester Chrome также отлично подходит для этого.

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

Не размещайте важный текст на изображении

Это не столько техника, сколько здравый смысл.

Однако люди все равно все время ошибаются.

Итак, позвольте мне выразиться ясно:

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

Взгляните на этот пример:

Источник фото — https://unsplash.com/photos/l8p1aWZqHvE

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

Но такой способ подачи информации может испортить ваше SEO.

Вот почему:

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

Люди с программами для чтения с экрана тоже все это пропустят.

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

И если по какой-то причине изображение не рендерится или загружается медленно — вы упустили свой единственный шанс донести свое сообщение.

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

Используйте структурированные данные для продуктов, видео и рецептов

Структурированные данные — это код, написанный в определенном формате, который упрощает его интерпретацию поисковыми системами.

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

Давайте рассмотрим пример.

Посмотрите, как Google обрабатывает маленькие кусочки информации под этим изображением:

Структурированные данные делают это возможным.

Вот как это выглядит в коде страницы:

Другой пример — наша страница с рецептами из предыдущего:

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

Комбинируя структурированные данные с другими методами SEO, этот рецепт занимает первые 2 позиции в поисковой выдаче:

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

В Интернете можно найти множество советов и рекомендаций по внедрению структурированных данных.

Но, в конце концов, никто не может сказать вам, как это сделать лучше, чем Google.

Итак, всегда следуйте официальным рекомендациям Google для:

Создайте карту сайта с изображением

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

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

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

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

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

На этом мы закончили с советами по SEO и специальным возможностям.

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

Методы оптимизации изображений: скорость веб-сайта и взаимодействие с пользователем

У вас не может быть быстрого веб-сайта с неоптимизированными изображениями.

И быстрый веб-сайт имеет решающее значение для удовлетворения ваших посетителей.

Вот несколько примеров силы скорости страницы:

• В 2012 году Walmart сократил время загрузки своего сайта на 1 секунду и увеличил количество конверсий на 2%;

• В 2017 году Zitmaxx Wonnen сократил время загрузки до 3 секунд и получил на 50% больше мобильных конверсий и 98.7% рост доходов от мобильной связи;

• Наконец, в 2020 году NDTV снизила показатель отказов на 50% за счет улучшения LCP и CLS.

Я могу продолжать и продолжать, но вы поняли идею. Если вам нужны дополнительные доказательства, ознакомьтесь с этой коллекцией из 18 примеров веб-производительности.

Конечно, оптимизация скорости — это больше, чем просто оптимизация изображения.

Но вот кикер:

Изображения часто являются основной причиной медленной загрузки веб-сайта. На самом деле около 50% всех байтов на средней странице составляют байты изображений.А с 2011 года количество байтов изображения увеличилось почти в 5 раз на средней странице рабочего стола и более чем в 7 раз на средней странице мобильного устройства!

Источник — Состояние изображений HTTP-архива

Вот почему оптимизация ваших изображений — это огромный выигрыш в скорости сайта.

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

Увеличьте скорость своего сайта с помощью NitroPack — навыки программирования не требуются

Имея это в виду, давайте начнем.

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

Вот краткий контрольный список для выбора правильного формата изображения:

• Если вы можете пожертвовать качеством ради производительности, используйте JPEG . Бесплатный инструмент, такой как Optimizilla, может помочь вам настроить уровень сжатия (мы немного поговорим о сжатии), чтобы протестировать различные соотношения качества и размера;

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

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

• Наконец, формат изображения нового поколения, такой как WebP, может еще больше повысить производительность без ущерба для качества. По данным Google, изображения WebP на 26% меньше, чем PNG, и на 25–34% меньше, чем JPEG, при сопоставимом качестве.Единственным недостатком является то, что форматы следующего поколения (включая WebP) не поддерживаются браузерами на 100%. Это усложняет их обслуживание, поскольку вам нужно сохранять резервную копию для старых браузеров.

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

Уменьшить размер файла изображения

Существует два способа уменьшения (сжатия) размера файла изображения — сжатие с потерями и без потерь.

Сжатие изображения с потерями удаляет некоторые пиксельные данные. Сжатие без потерь не работает.

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

JPEG — классический пример изображения с потерями. PNG — формат без потерь. И WebP использует сжатие как с потерями, так и без потерь.

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

На данный момент важно знать, что не существует «хорошего» или «плохого» уровня сжатия. Все зависит от вашего сайта.

Вот что я имею в виду:

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

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

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

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

Существует множество инструментов для сжатия изображений.

• Для технических специалистов Guetzli и Imagemin могут отлично поработать;

• Даже бесплатные онлайн-инструменты, такие как Compress JPEG, TinyJPG и Optimizilla, могут дать хорошие результаты;

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

Самое сложное — это не найти инструмент. Это обеспечивает баланс между производительностью веб-сайта и качеством изображения.

И нет другого способа сделать это, кроме тестирования.

Использование сети доставки контента (CDN)

Настройка CDN — это один из лучших способов повысить скорость сайта в целом.

Это также относится к оптимизации изображения.

Если вы не знакомы с CDN, ознакомьтесь с нашим руководством для начинающих по CDN.А пока вот краткий TL;DR:

. Допустим, ваш сайт размещен на сервере в США. Когда пользователь из Европы посещает, данные должны будут путешествовать из США в Европу.

Расстояние настолько велико, что задержка неизбежна.

CDN решают эту проблему.

Вот как:

CDN хранит кэшированные версии вашего веб-сайта в различных географических точках .

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

То же самое касается посетителей в Южной Америке, Африке, Азии или в любом другом месте, где у провайдера CDN есть серверы.

В этом сила CDN — она сокращает расстояние между вашими посетителями и вашим сайтом .

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

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

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

 

Подача адаптивных изображений

Распространенная ошибка, которую совершают люди, — это загрузка только одного большого изображения и его отображение на всех экранах просмотра.

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

Вот только не все так просто.

Если ваше изображение имеет ширину 700 пикселей, оно может хорошо выглядеть на дисплее с разрешением 300 пикселей. Но все 700px еще надо обработать. Это огромная трата полосы пропускания.

Итак, как сохранить качество изображения и не тратить пропускную способность?

Используйте атрибут srcset.

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

Давайте рассмотрим быстрый пример.

Это стандартный код HTML для загрузки изображения:

Этот фрагмент кода использует атрибут src, который сообщает браузеру, где найти изображение.

Давайте добавим srcset в смесь:

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

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

Сайт Airbnb использует такой подход:

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

Для этого используйте Chrome DevTools.

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

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

Последнее замечание: WordPress (начиная с версии 4.4) автоматически создает разные версии ваших изображений. Он также добавляет атрибут srcset.

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

Удалите ненужные изображения

Это самый простой и часто игнорируемый совет по оптимизации изображений.

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

Вот что вы можете сделать:

• Откройте самые важные страницы и подумайте, чего они пытаются достичь;

• По мере прохождения станет ясно, какие изображения там должны быть, а какие нет.Но пока не начинайте удалять;

• Во-первых, убедитесь, что у вас настроен для отслеживания . Просмотры страниц, показатели отказов, конверсии, время на странице — все эти полезные вещи;

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

• Протестируйте обе версии в течение нескольких недель и выберите победителя.

А если вы хотите сравнить обе версии в режиме реального времени, вы можете использовать такой инструмент, как Google Optimize.

Не злоупотребляйте Стоковые Фото

Не поймите меня неправильно — я люблю бесплатные вещи так же сильно, как и следующий парень.

А люди, которые бесплатно раздают свои качественные изображения, заслуживают тонну похвалы.

Но…

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

Например, как часто вы видели этих ребят в статье о командной работе, сотрудничестве или на подобную общую тему:

Источник фото — https://unsplash.com/photos/Oalh3MojUuk

Или это изображение на веб-сайтах, продающих курсы или юридические услуги:

Источник фото — https://unsplash.com/photos/5fNmWej4tAA

Быстрый обратный поиск изображения для первого photo возвращает около 5800 результатов .

И около 13 500 за второй.

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

Да, это так.

Недавние исследования подтверждают, что стоковые фотографии могут негативно повлиять как на имидж вашего бренда , так и на SEO . Я настоятельно рекомендую вам прочитать его.

Если у вас нет времени, вот цитата, которая прекрасно описывает проблемы со стоковыми фотографиями:

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

 

Хуже всего то, что они демонстрируют полное отсутствие усилий.

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

Но, пожалуйста, будьте тактичны.

Под этим я подразумеваю три вещи:

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

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

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

Дополнительный совет: ленивая загрузка (отложенная) закадровых изображений

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

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

Вот как это работает:

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

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

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

Вот пример того, как работает отложенная загрузка:

 

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

Существуют различные способы реализации этой техники:

• Вы можете попробовать встроенную отложенную загрузку, используя атрибут загрузки со значением lazy. Этот метод довольно прост, но ему не хватает поддержки браузера;

• Вы можете использовать Intersection Observer, чтобы определить, какие изображения следует загружать отложенно.Этот метод требует написания небольшого количества JavaScript. Вы можете найти отличный пример Intersection Observer в действии здесь;

• Вы также можете автоматизировать процесс с помощью NitroPack. Наш сервис лениво загружает все изображения (включая фоновые).

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

Оптимизация изображений с помощью плагинов и сервисов WordPress

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

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

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

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

Например, подключаемый модуль оптимизации изображений, работающий на том же сервере, что и CMS, вероятно, потребует дополнительного процессорного времени для изменения размера и сжатия изображений. С другой стороны, облачный сервис (например, NitroPack) делает за вас тяжелую работу, оптимизируя изображения в облаке и доставляя их через CDN.

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

Оптимизация изображений и Google Core Web Vitals

Если вы заботитесь о поисковой оптимизации, вы, вероятно, слышали, что Core Web Vitals теперь является частью алгоритма ранжирования Google.

Оптимизация изображения может сильно повлиять на два из трех основных веб-жизненных показателей — наибольшую отрисовку содержимого (LCP) и совокупное смещение макета (CLS).

И вот почему:

• LCP измеряет, сколько времени требуется для появления на странице самого большого элемента в верхней части страницы.Этот элемент обычно является изображением. Если изображение не оптимизировано и не доставлено быстро, LCP получает удар, что может привести к снижению производительности Core Web Vitals;

• CLS измеряет визуальную стабильность страницы. Когда изображения не имеют размеров (атрибутов ширины и высоты), браузер заранее не знает, сколько места выделить для них. Это приводит к неожиданным изменениям макета, когда изображения появляются на экране, что ухудшает вашу оценку CLS.

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

Однако предостережение относительно ленивой загрузки:

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

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

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

Заключительные мысли

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

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

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

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

Например, вот что может сделать для вас NitroPack:

• Сжатие изображений. По умолчанию NitroPack использует сжатие с потерями для уменьшения размера файла изображения. Вы также можете вручную настроить качество изображения в дополнительных настройках;

• Преобразование WebP. Для всех браузеров, поддерживающих WebP, NitroPack будет отображать ваши изображения в формате WebP;

• Упреждающее изменение размера изображения. NitroPack решает проблему отсутствия атрибутов ширины и высоты без их добавления. Это ускоряет рендеринг и уменьшает сдвиги макета;

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

• NitroPack также поставляется со встроенным CDN и автоматически лениво загружает все изображения, видео и iFrames.

Наконец, в NitroPack есть все, что нужно для быстрого веб-сайта.

Если вы хотите протестировать все эти функции, подпишитесь на бесплатный план NitroPack сегодня (кредитная карта не требуется).

Free Image Optimizer — Сжатие и изменение размера фотографий

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

Оптимизировать сейчас

Оптимизация

Качество: —Выбрать—Минимальный размер файлаОчень маленький размер файлаМалый размер файлаОбычныйВысокое качествоНаилучшее качество*

Скачать бесплатно!

Теперь вы можете загрузить оптимизатор изображений на свой компьютер и изменять размер и сжимать изображения одним щелчком мыши!

Зачем мне скачивать?

• Это супер быстро!
• Массовое сжатие изображений!
• Это абсолютно бесплатно!
• Больше причин.