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

SEO

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

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

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

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

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

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

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

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

Этот тип изображений формируются из пикселей, содержащих внутри данные о цвете и уровне прозрачности с использованием стандартной RGBA-модели цветов. Каждый из четырех цветовых каналов (красный, желтый, синий и альфа) имеет объем 8 бит, а значит 1 пиксель суммарно занимает 32 бита, или же 4 байта.

Зная размер растрового файла с изображением легко самому рассчитать его объем.

К примеру, имеем изображение 50х50 пикселей. Суммарно в нем содержится 2500 пикселей. Вспоминаем, что 1 пиксель имеет объем в 4 байта, а значит все изображение – 10 тысяч байт, что равно 10 Кб.

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

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

Снижение глубины цвета

Иногда для корректного отображения цветов нет необходимости для применения слишком широкой палитры. К примеру, если каждый из каналов имеет 256 цветовых оттенков, то по итогу вы имеете палитру из более чем 2500 различных цветов. А если ограничиться палитрой из всего 256 цветов для всех каналов, то каждый из них будет занимать 2 бита,  а один пиксель в таком случае будет занимать 2 байта вместо 4. Таким образом можно добиться уменьшения объема изображения в 2 раза, что считается прекрасным результатом.

Использование дельта-кодирования

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

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

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

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

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

Сжатие данных

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

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

Для сжатия файлов с изображениями можно использовать следующий софт:

  1. Сжимает любые изображения, с применением трех режимов от обычного до ультраагрессивного.
  2. лучше всего подходит для .png-файлов, которые могут быть сжаты без серьезной потери качества.
  3. Работает с файлами анимации в формате .gif. Достаточно мощный инструмент для сжатия и обработки анимации.
  4. Подходит для оптимизации .jpeg-файлов. Является утилитой из набора libjpeg. Работает за счет того, что из изображения убирается дополнительная информация. Однако, в случае выбора слишком жесткого соотношения (параметр от 80 до 95) из файла могут быть удалены в том числе и метаданные
  5. Optipng – инструмент от Google. Дает возможность сжатия .png-картинок без потери в качестве.

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

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

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

Здесь речь идет о:

  • Названии файла;
  • Поле Title;
  • Поле Alt.

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

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

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

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

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

Паук - Cтудия интернет-маркетинга
Добавить комментарий