3

4 уровня оптимизации изображений в WordPress

4 уровня оптимизации изображений в WordPress
ОГЛАВЛЕНИЕ
  1. Почему вам следует оптимизировать изображения?
  2. Используйте форматы изображений следующего поколения
    1. WebP
    2. SVG
    3. Base64 / встроенные изображения
  3. Сжать изображения
    1. Сжатие изображений в WordPress
  4. Адаптивные изображения
    1. Что делать, если моя тема не поддерживает SRCSET?
  5. Доставка изображений через CDN
    1. Что такое CDN?
    2. Как выбрать CDN для изображений?
  6. Вывод

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

размер изображения в сети

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

По мере развития технологий качество камеры значительно улучшилось. Даже новые мобильные устройства, такие как iPhone, OnePlus будет захватывать изображения с разрешением 4032 x 3024 пикселей и размером в несколько МБ. Обычные устройства, такие как настольный компьютер, могут иметь ширину 1500–2000 пикселей, а мобильные устройства – до 800 пикселей.

Оптимизация изображений может уменьшить от 50 до 70% общего размера вашей веб-страницы и ускорить общее время загрузки в 2 или 3 раза.

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

Вы уже должны знать о форматах изображений JPEG, PNG и GIF. Но это не единственные варианты и лучшие.

WebP

WebP – это новый формат изображений, разработанный Google. Любое изображение формата JPEG, PNG, GIF можно преобразовать в WebP, что уменьшит размер до 90% .

Вот сравнение:

4 уровня оптимизации изображений в WordPress
JPEG 80 КБ (1000 X 672 PX) vs. WebP 35 КБ (1000 X 672 пикселей)

Как видите, преобразование того же изображения в WebP привело к уменьшению размера на 57% .

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

поддержка webp

WebP в WordPress

Более простой способ доставки WebP – через CDN (рекомендуется, обсуждается ниже). Но если вы по какой-то причине не готовы к CDN, вы можете установить плагин WebP Express WordPress, который выполнит эту работу.

SVG

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

логотип mfy
PNG 14КБ
логотип mfy
SVG 4 КБ

Изображения SVG идеально подходят для значков, логотипов, диаграмм, инфографики и т. Д. В отличие от WebP, не каждое изображение можно преобразовать в SVG (технически это возможно, но результатом будет изображение большего размера). Изображения SVG необходимо рисовать с помощью Adobe Illustrator, Sketch или аналогичного программного обеспечения.

SVG в WordPress

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

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

Base64 / встроенные изображения

Любое изображение, представленное в виде 64 символов текста, называется изображением в формате base64. Трудно понять, правда?

Взглянем на код. Обычное изображение в HTML выглядит так:

<img src="https://example.com/logo.png" width="100px">

Вот как выглядит образ base64:

<img src="data:image/png;base64,iVBORw0KGgoAA......==" width="100px">

Вместо URL-адреса base64 – это строка, которая начинается с data:image/png;base64. Первая часть представляет тип данных. Символы после запятой («,») представляют наше изображение.

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

логотип mfy
PNG 14КБ
waRh9FYQm1nigAAAABJRU5ErkJggg ==
Base64 17 КБ

Плюсы:

  • Никаких дополнительных HTTP-запросов для загрузки изображения
  • Более быстрый рендеринг
  • Идеально подходит для изображений в верхнем сгибе, логотипе, заполнителях и т. Д.

Минусы:

  • Преобразование изображения в base64 приводит к увеличению размера на 30%
  • Не удалось использовать кеширование браузера

Base64 / Встроенные изображения в WordPress

Вы можете преобразовать любое изображение в base64. Перейдите на https://www.base64-image.de/ и загрузите свое изображение. После завершения преобразования нажмите «скопировать код».

В редакторе Гутенберга выберите изображение, выберите «Вставить из URL» и вставьте скопированный код. Готово!

base64 Гутенберг

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

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

Вот пример:

мальчик
80 КБ
мальчик сжат
30 КБ

Оба изображения имеют одинаковые размеры. Но, как видите, размер уменьшен с 80 КБ до 30 КБ (62%) .

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

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

Использование плагинов

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

сжатие коротких пикселей
  • ShortPixel (рекомендуется) – лучшее сжатие, бесплатно до 100 изображений в месяц
  • reSmush.it – совершенно бесплатно для изображений с максимальным размером 5 МБ
  • Optimole – бесплатно до 1 ГБ изображений в месяц

Без использования плагинов

Есть несколько онлайн-инструментов для сжатия изображений. Я обычно использую компрессор.io . Это бесплатно, быстро, с потерями / без потерь и поддерживает все форматы.

Compressor.io

Адаптивные изображения

Ваша тема может быть адаптивной, а ваши изображения – нет. Переносить изображение шириной 1500 пикселей на мобильный телефон шириной 800 пикселей не имеет смысла!

Вот пример. Одно и то же изображение представлено в разных размерах (дайте мне знать, если заметите разницу).

мальчик
80 КБ (1000 x 672 пикселей)
мальчик изменил размер сжатый
9 КБ (350 x 235 пикселей)

Обычно изображение, добавленное в HTML, выглядит так:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

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

HTML поддерживает srcsetизображения, которые сообщают браузеру, какое изображение загружать, в зависимости от ширины устройства / PPI.

Изображения с SRCSET:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

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

srcset wordpress

Что делать, если моя тема не поддерживает SRCSET?

У вас есть три варианта:

  • Попросите разработчика темы исправить это!
  • Используйте плагины, которые будут добавлять srcset, например летающие изображения
  • Изменение размера изображения на лету через CDN (рекомендуется, обсуждается ниже)

Доставка изображений через CDN

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

Что такое CDN?

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

bunnycdn локации

Как выбрать CDN для изображений?

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

Вот факторы, на которые нужно обратить внимание перед выбором CDN:

  • Сжатие изображений на лету
  • Изменение размера изображения на лету
  • Конвертация WebP на лету

Если вы используете ShortPixel, у них есть надстройка CDN, которая будет выполнять эту работу через ShortPixel Adaptive Images .

Я использую BunnyCDN , они оптимизируют изображения на лету.

оптимизация bunnycdn
0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up