SEO Советы: важность оптимизации изображений сайта

1. От чего зависит скорость загрузки?
2. Как изображения сделаны в Интернете
3. Как сжать изображение, с потерями или без потерь?
4. Небольшой совет
5. Важность (правильного) разрешения
6. Совет № 2, всегда для тех, кто использует WordPress
7. Выбор цвета
8. Формат изображений: векторные, JPEG, PNG или ... WebP?

источник изображения: http://bit.ly/2FSWLo3

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

По последним исследованиям на самом деле, 53 человека из 100 «подключаются» к «назад», если загрузка веб-страницы занимает более 3 секунд .

Даже поисковые системы оказываются особенно чувствительными к скорости загрузки сайта, так что Google ( двигатель использовался более чем в 8 случаях из 10 ) рассмотрим это как фактор позиционирования в настоящее время закрыть активацию индекса «mobile-first» ,

От чего зависит скорость загрузки?

источник изображения: http://bit.ly/2DOv3bK

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

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

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

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

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

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

Как изображения сделаны в Интернете

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

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

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

Мы взяли 20,4-мегапиксельную камеру и сделали это фото (оригинал можно получить, нажав на него).

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

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

Чтобы прояснить этот аспект, мы все еще полагаемся на статистику: именно она показывает, что средний вес веб-страниц в настоящее время в сети , хотя и находится в постоянном росте, в 2016 году было около 2,5 мегабайта : достаточно было бы опубликовать эту фотографию в оригинале, короче говоря, сильно «пробить».

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

Для этого нам нужно использовать инструмент сжатия, а в Интернете есть отличные ресурсы, даже бесплатные (например, Compressor.io , Оптимизатор изображения , CompressNow и т. д.), которые позволяют это.

Как сжать изображение, с потерями или без потерь?

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

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

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

В нашем случае мы решили использовать метод «с потерями» и с помощью CompressNow мы установили уровень сжатия 30%. Вот результат (снова, чтобы увидеть оригинал, нажмите на него):

Заметили ли мы какие-либо различия? Помимо мелких деталей, мы бы сказали «нет», но тем временем мы взяли наше изображение, чтобы весить 0,53 МБ (или 534 килобайта) против начальных 3,8 МБ. Мы практически уменьшили его вес примерно на 85%, практически получив тот же визуальный результат!

Небольшой совет

Для тех, кто использует «король CMS», это WordPress (довольно распространенный случай, учитывая, что используется на 6 сайтах из 10, имеющих систему управления контентом ), есть также плагины, специально разработанные для этой конкретной потребности.

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

В качестве альтернативы есть другие инструменты, такие как Kraken.io (бесплатно для всех изображений до 1 МБ, в противном случае - за плату) или TinyPNG , который, как видно из названия, служит только для сжатия файлов PNG, но бесплатно до 500 оптимизаций в месяц (и лучше использовать его в веб-версия , так как плагин был сильно отвергнут теми, кто это пробовал).

Важность (правильного) разрешения

Мы можем сделать еще лучше.

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

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

Наше оригинальное изображение, также сжатое, всегда имеет размеры 5184 x 3888.

Кто-то просто просит компьютер показать его в более низком разрешении (то есть в техническом жаргоне, чтобы «масштабировать его в HTML»), но без вмешательства в исходное изображение.

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

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

Даже в этом случае вмешаться легко: на Mac просто откройте изображение с предварительным просмотром, перейдите в «Инструменты» и выберите «Размер правила», но вы также можете сделать это с помощью старой и дорогой программы Paint ( следуя указаниям всегда превосходного Сальваторе Аранзуллы , при необходимости), или с онлайн-ресурсами, такими как ILoveImg и многие другие, которые позволяют изменять размер даже нескольких изображений одновременно .

В нашем случае мы пришли, чтобы взвесить изображение размером 6 КБ, практически только 1,5% от оригинала. Просто за копейки! Замечательный результат, который поможет нашему сайту быть более «легким» и быстрее загружаться.

Совет № 2, всегда для тех, кто использует WordPress

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

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

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

Выбор цвета

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

источник изображения: http://bit.ly/2DsczzW

Если, например, вы имеете дело с изображением, предназначенным для печати, обратите внимание на цветовой метод: в этом случае CMYK, но для веб-страниц необходимо, чтобы изображения основывались на цветном методе RGB ,

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

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

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

Наиболее распространенный стандарт использования сегодня - 8 бит на канал (256 возможных вариантов для красного, 256 для зеленого и 256 для синего); в некоторых случаях может быть удобно упростить эту палитру, соответствующую 16 миллионам цветов, уменьшив ее до меньшего числа. Для определенных ситуаций достаточно 256 цветов, в других - только 128, и изображение также становится более светлым.

Формат изображений: векторные, JPEG, PNG или ... WebP?

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

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

Формат «принц» в этом случае - SVG , что означает « Масштабируемая векторная графика» , которая позволяет уменьшать или увеличивать изображения без потери какой-либо информации.

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

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

GIF, PNG и JPEG распознаются всеми браузерами, в то время как самые последние JPEG XR и WebP ( формат, предложенный самим Google ) разрешить лучшее сжатие: например, WebP может уменьшить размер файла до 30% по сравнению с тем же изображением в формате JPEG ,

Каждый формат имеет свои особенности:

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

источник изображения: http://bit.ly/2DndsKN

Мы оставляем JPEG XR и WebP напоследок, потому что их ограничение заключается в том, что они не являются общепризнанными: выбор использования изображения WebP означает принять тот факт, что любой пользователь, просматривающий с помощью Internet Explorer, Microsoft Edge, Firefox или Safari, не может его увидеть : самая последняя статистика они говорят нам, что мы говорим о значительном количестве пользователей.

Таким образом, в настоящее время JPEG XR и WebP нельзя использовать в качестве основной кодировки изображения, но, в лучшем случае, в качестве альтернативы стандартным форматам, когда поддержка гарантирована: если мы думаем о насколько широко распространен Chrome Возможно, стоит специально оптимизировать некоторые аспекты вашей веб-страницы для этого браузера.

Наконец, чтобы завершить обзор, добавим формат HEIF (или .heic) , который был "очищен" по стилю с его введением в iOS 11 для iPhone и iPad.

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

Более того, аббревиатура говорит о многом: это означает высокоэффективный формат файла изображения . И думать, что Альянс Открытых Медиа развивается еще более эффективный формат ...

Обновление от 4 марта 2019 года

Одним из наиболее полных инструментов, доступных в Интернете для оптимизации изображений, является Squoosh, веб-приложение, запущенное в ноябре 2018 года Google ,

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

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

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

С точки зрения SEO, мы могли бы затем пойти дальше в другие оптимизации , такие как выбор значимых имен для изображений (избегая прибегать к устаревшим в настоящее время наполнение ключевыми словами ): вместо image-01.jpg поисковые системы оценят foto-logo-axura.jpg для нашего примера изображения.

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

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

Однако важно «не переусердствовать»: слишком сильное сжатие уведет нас далеко от приемлемого результата, как в этом примере:

Как и во многих других вещах, нужно искать правильный компромисс 😉

Похожие

Комментарии