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

1. Оптимизация изображений, часть 2: техническая оптимизация Много было сказано и написано о SEO для...
2. Мобильный сайт
3. компрессия
4. Изображения для Retina и других экранов высокого разрешения
5. CSS спрайты
6. Файлы Sitemap для изображений
7. заключение

Оптимизация изображений, часть 2: техническая оптимизация

Много было сказано и написано о SEO для контента (релевантный текст, правильные заголовки, ключевые слова и описания и т. Д.), Но не слишком много о другом типе контента, а именно изображениях. Как редактор, вы контролируете атрибуты title и alttext, но не всегда над техническими аспектами изображений на вашем сайте. Здесь вам нужно хорошее сотрудничество с вашим веб-разработчиком.

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

«Размер имеет значение», также с изображениями

Настольный сайт

Предположим, вы пишете интересную статью о вашем новом продукте и получаете хорошее представление о нем от поставщика. Вы помещаете это в свою статью и затем просматриваете это в браузере. Черт возьми, сколько времени занимает загрузка страницы . Вы получите это, если используете изображение, предназначенное для печати - 3000 x 2000 пикселей, а затем 12 МБ! Это крайний пример, но это случается чаще, чем вы думаете. Текущая максимальная ширина области содержимого на веб-странице теперь составляет около 1000 пикселей (за исключением ползунков полной ширины, ширина которых может составлять 1600 пикселей). Следовательно, дополнительные 2000 пикселей в этом примере не нужны и стоят только больше пропускной способности и времени загрузки, чем необходимо. Вы также теряете некоторое качество, потому что вы предоставляете браузеру масштабировать изображение. Способ масштабирования и результат различаются для разных браузеров и ОС.

Решения могут различаться в зависимости от системы, но я остановлюсь здесь на наиболее используемой CMS (системе управления контентом): WordPress ,

Решение (я):

1. Если вы используете WordPress, вы можете установить максимальные размеры (и пропорции) всех изображений (Настройки -> Медиа). Они должны / должны соответствовать пространствам, используемым на сайте (полная ширина, содержание блога и миниатюры виджетов). Попросите вашего веб-разработчика установить правильные размеры. WordPress стандартно использует 3 настраиваемых графических формата:
   1. Большой размер - изображения, используемые по всей ширине сайта - обычно от 960 до 1000 пикселей в ширину.
   2. Средний размер - изображения для сообщений в блоге - часто 100% ширины, в которую помещается сообщение +/- 600 пикселей
   3. Миниатюры - изображения для виджетов, например - +/- 150 пикселей
2. При использовании изображений в ваших сообщениях / страницах выберите правильный формат изображения. Смотрите изображение ниже .
3. Для некоторых целей (например, ползунки полной ширины) вам все еще нужны изображения в правильном формате кадрирование и увеличить или уменьшить. WordPress затем использует оригинальный формат изображения для слайдеров, не масштабируя их. Photoshop по-прежнему остается лучшим инструментом для этого. Узнайте у вашего веб-разработчика правильные размеры.
4. Избранные изображения используются для различных целей в WordPress; в виде изображений в списке блогов, портфолио, галереях и т. д. Создатель вашей темы отвечает за использование правильных размеров. Веб-разработчик может лучше оценить, являются ли они слишком большими.

Настройки отображения в страницах / сообщениях

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

Мобильный сайт

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

Решение (я):

1. Используйте отдельную мобильную тему - (например, с WPTouch Темы ). Содержание автоматически форматируется, а изображения уменьшаются.
2. Используя некоторые JavaScript и PHP, ваш веб-разработчик может заставить сайт реагировать на различные устройства и / или разрешения экрана. Для мобильных устройств WordPress будет использовать уменьшенные версии ваших изображений. В случае Сетчатки экрана также будет использовать большие разрешения. Наиболее часто используемый JavaScript для этого на данный момент Retina.js ( см. «Изображения для Retina и других экранов высокого разрешения» ниже ).
3. Все больше и больше тем поддерживают изображения Retina.

Вы также можете сделать скрипт Retina.js возможным с этим удобным плагином (Дополнение май 2017 г.).

компрессия

Даже если вы пишете изображение из Photoshop через «Сохранить для Интернета», это еще не конец истории. Хорошие и приятные, те изображения из Photoshop, которые имеют размер около 80 КБ, но если вы по-прежнему отображаете 12 изображений на странице, то это почти 1 МБ. Это может быть немного меньше? Да, вы можете . Существует разное решение для каждого формата файла (.jpg, .png и даже .gif). Большинство из них удаляют метаинформацию (EXIF) и ненужные цветовые профили из изображений. Ваш 1MB в размере изображения уменьшается до целых 80%! Есть также два типа сжатия; «Без потерь» и «с потерями» или не выбрасывание информации о цвете и, следовательно, сохранение качества или отбрасывание информации и потеря качества. Характерной особенностью сильного сжатия JPEG являются видимые блоки размером 8 х 8 пикселей. Ниже вы можете увидеть крайний пример сжатия с потерями.

Без потерь против сжатие с потерями

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

Решение (я) в зависимости от ОС:

• ImageOptim ; Автономный инструмент, для компьютеров Mac: PNG, JPG
• RIOT ; Автономный инструмент, для компьютеров с Windows: PNG, JPG
• Smush.it ; Онлайн инструмент; Изображения PNG и JPG размером до 1 МБ)
• SuperPNG ; Плагин Photoshop, чтобы сделать файлы PNG даже меньше, чем стандарт Photoshop
• Крошечный PNG ; Онлайн инструмент: для PNG и JPG (ранее только PNG)
• JPGmini Онлайн инструмент: только для JPG
• Компресс PNG / JPG ; Онлайн инструмент для PNG и JPG

NB. Даже при использовании методов с потерями вы часто не увидите разницу. Так что экспериментируйте первым. Часто вы можете выпустить более агрессивное сжатие с потерями на изображениях для экранов Retina. Смотрите следующий раздел.

Изображения для Retina и других экранов высокого разрешения

Предположим, вы используете изображение шириной 320 пикселей на рабочем столе и просматриваете это изображение на экране Retina или другом устройстве с высоким разрешением. Это, вероятно, выглядит менее хорошо. Это связано с тем, что 72 PPI (пикселя на дюйм) экрана вашего рабочего стола «смазаны» (технически «утроены» или более) по сравнению с 220–326 PPI экрана Retina. Меньше информации в большем диапазоне . Вы видите это как размытое изображение:

Изображение подходит для сетчатки против не сетчатки (не подходит для сетчатки)

Чтобы предотвратить это, создайте отдельные изображения для экранов с высоким разрешением , которые в 1,5-2 раза больше, чем для рабочего стола.

Решение (я):

1. Используйте WP Retina 2X плагин. При этом вам просто нужно убедиться, что исходный размер всех ваших изображений достаточен для экранов Retina: в 1,5-2 раза больше. WordPress затем выбирает правильный размер для устройства.
2. С момента появления модификатора высокого разрешения от Apple " @ 2 " будет использовать изображение iPhone / iPad с этим расширением на экране Retina. Наряду с некоторыми Javascript ( Retina.js например) вы можете использовать обычное изображение, скрипт гарантирует, что при обнаружении устройства с высоким разрешением изображение с низким разрешением заменяется версией с высоким разрешением. Это работает на всех устройствах, а не только на продуктах Apple.
3. Для изображений в CSS (изображения, связанные с темой) вы можете использовать медиазапросы CSS :
   • @media
     (-webkit-min-device-pixel-ratio: 2), (минимальное разрешение: 192dpi) {
     / * Правила для сетчатки здесь * /
     }

NB. Поскольку экран мобильного телефона несколько меньше, вы можете более агрессивно сжимать изображения для экранов с высоким разрешением. Например, в Photoshop вы пишете исходное изображение со сжатием JPG 80%, но вы можете использовать сжатие 30% для изображения с высоким разрешением. Это останется острым, потому что артефакты сильного сжатия обычно не выделяются.

CSS спрайты

Предположим, что на вашем сайте 2 разных изображения стрелки (указатели слева и справа) используются для разных целей. И каждая из этих стрелок имеет отдельный эффект наведения мыши . Это означает, что пользователь должен загрузить 4 разных изображения. Существует дополнительная для каждого изображения HTTP-запрос , Тогда почему бы не собрать это в одно изображение? Вместо 4 HTTP-запросов все собирается в одном запросе . Эта коллекция изображений называется «спрайт» .

Отдельные изображения против одного спрайта CSS

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

Решение: на самом деле, есть только одно решение;

К счастью, есть веб-приложение (букмарклет), которое берет на себя тяжелую работу за вас - SpriteMe ,

SpriteMe анализирует вашу страницу на предмет возможных спрайтов

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

Файлы Sitemap для изображений

Файлы Sitemap обычно используются для индексации вашего контента (страниц и сообщений) различными поисковыми системами. Многие люди не знают, что Google, в частности, индексирует ваши изображения и видео отдельно . Для этого вам нужно включить эти медиа в ваш sitemap.xml отдельно.

Пример карты сайта XML для изображений:

<? xml version = "1.0" encoding = "UTF-8"?> <urlset xmlns = "http://www.example.com/sitemap.xml"> <url> <loc> http: //www.example .com / foo.html </ loc> <image: image> <image: loc> http://example.com/image.jpg </ image: loc> </ image: image> </ url> </ urlset >

Решение:

Через плагин Google XML Sitemap для изображений это стало проще в WordPress. Установите плагин и создайте карту сайта для вашего медиа. Плагин гарантирует, что все ваши медиа вместе с вашим контентом будут включены в sitemap.XML. Google и другие поисковые системы будут вовремя индексировать карту сайта, но она будет работать намного быстрее, если вы введете ее самостоятельно Инструменты Google для веб-мастеров запись.

заключение

Кажется, много работы, чтобы принять во внимание все эти методы. И это правда однажды. Но это окупается. Вы, безусловно, наберете на несколько пунктов выше, если Google Page Speed ​​и Y-медленные оценки Yahoo .

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

Похожие

Комментарии