Блог

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

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

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

Замена и удаление изображений

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

Что нужно сделать в первую очередь:

● Все ненужные изображения, которые занимают много места, конструктивнее удалить
● Если есть возможность, эффективнее будет применение эффектов CSS3
● Вместо кодировки текстов в изображениях, лучше использовать веб-шрифты

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

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

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

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

Растровые и векторные изображения

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

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

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

рис. 1 Векторная и растровая графика

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

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

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

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

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

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

Растровые изображения — это отдельные пиксели содержащие в себе данные о цвете и прозрачности (значение RGBA). Чтобы их оптимизировать, необходимо снизить количество битов на один пиксель. Канал имеет 256 оттенков, которые занимают 8 бит. Исходя из этого, можно просчитать размер, который будет иметь изображение.

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

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

Сжатие изображения с потерями и без них

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

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

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

Как выбрать формат изображения

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

● Для цветных анимированных изображений стоит применить GIF.

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

● Для фотографий и скриншотов актуальным будет JPEG.

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

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

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

Похожие записи