Когда люди говорят об оптимизации изображений, они рассматриваются только ограниченные параметры, предлагаемые популярных графических редакторов, таких как “ Quality” слайдер, количество цветов в палитре, сглаживание и так далее.Кроме того, несколько утилит, таких как OptiPNG __ и 3 | jpegtran, удалось выжать дополнительные байты из файлов изображений.Все эти довольно известные инструменты, которые обеспечивают веб-разработчиков и дизайнеров с простой техники изображения optimization.

В этой статье we’ покажу вам другой подход к оптимизации изображений, основанный на как данные изображения хранятся в разных formats.Let’ начнем с форматом JPEG и простой метод, называемый восемь пикселей grid.

Восемь-Pixel Grid

Как вы уже знаете, изображения JPEG состоит из серии из 8 × 8 пиксельных блоков, которые могут быть особенно заметны, если вы установите JPEG “ Quality” параметр слишком низким.Как это помогает нам оптимизации изображения?Рассмотрим следующий пример:

32 × 32 пикселей, качество: 10 (в Photoshop), 396 bytes.

И белые квадраты одинакового размера: 8 × 8 пикселей.Хотя качество установлен низко, в нижнем правом углу выглядит нечетким (как можно было бы ожидать), а верхний левый угол выглядит красиво и чисто.Как это случилось?Чтобы ответить на это, мы должны смотреть на это изображение в сетке:

Как вы можете видеть, левый верхний квадрат выстраиваются в восемь-пиксельной сетке, которая гарантирует, что площадь выглядит sharp.

При сохранении изображение разбивается на блоки 8 × 8 пикселей, а каждый блок оптимизирован independently.Поскольку нижний правый квадрат не соответствуют ячейки сетки, оптимизатор ищет индексов цветов среднее между черным и белым (в формате JPEG, каждое 8 × 8 блоков кодируется в виде синусоиды).Это объясняет пуха.Многие передовые утилиты для оптимизации JPEG имеют этой функции, которая называется селективных optimization и в результате коэффициенты разного качества в разных областях изображения и многое другое сохранили bytes.

Эта техника особенно полезна для сохранения прямоугольные объекты.Let’ посмотрим, как он работает с более практической изображения:

13,51 KB.

12,65 KB.

В первом примере, микроволновая печь случайно расположены.Перед сохранением второго файла, мы выравниваемизображения с восьми-пиксельной сетке.Качество параметры одинаковы для обоих: 55.Let’ S присмотреться (красные линии отмечают сетке):

Как вы можете видеть, we’ ве сохранены 1 Кб данных изображения, просто установив изображение правильно.Кроме того, мы сделали изображение немного “ чище, ” too.

Цвет Optimization

Эта техника достаточно сложна и работает только для некоторых видов изображений.Но we’ пойдем по нему в любом случае, если только узнать theory.

Во-первых, мы должны знать, какая цветовая модель используется для формата JPEG.Большинство форматов изображения в цветовой модели RGB, но JPEG также может быть в YCbCr, который широко используется для television.

YCbCr похожа на модель HSV в том смысле, что YCbCr и HSV как отдельные легкость, для которых зрительная система человека очень чувствительна от цветности (HSV должно быть знакомо большинство дизайнеров).Она состоит из трех компонентов: цветовой тон, насыщенность и ценность.Наиболее важным из них для наших целей здесь является значение, также известный как легкость (оптимизаторы, как правило, сжать цветовых каналов, но сохранить значение как можно выше, потому что человек наиболее чувствителен к нему).Photoshop имеет режим Lab Color, которая помогает нам лучше подготовить изображения для сжатия с использованием JPEG optimizer.

Let’ S палку с микроволновой печью в качестве примера.Существует тонкая чистая над дверью, которая является прекрасным образцом для наших цветов оптимизации.После простого сжатия, на качество 55, файл весит 64,39 KB.

990 × 405 пикселей, качество: 55 (в Photoshop), 64,39 КБ. Увеличенную version.

Открыть увеличенное изображение в Photoshop, и включите режим цвета Лабораторная работа: Изображение > > Режим > > Лаборатория Color.

Лаборатория режиме почти, но не совсем, так же, как и HSV YCbCr. lightness канал содержит информацию о image’ легкости с. A канала показывает, как много красного или зеленого цвета есть.И B канал ручки синий и желтый.Несмотря на эти различия, этот режим позволяет избавиться от избыточных цвет information.

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

Мы собираемся делать некоторые …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров