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

Какие бывают изображения?

Изображения по типу хранения информации

РАСТРОВЫЕ

ВЕКТОРНЫЕ

• Картинка складывается из множества маленьких элементов — пикселей.

• Каждый пиксель содержит информацию о цвете.

Форматы: JPEG, PNG, TIFF, PSD, BMP
Программы: Adobe Photoshop, Corel Painter, Gimp

• Можно создать изображение любой сложности — с огромным количеством деталей и широкой цветовой гаммой.

• Фото - это растр.

• Большой занимаемый объём памяти качественных картинок.

• Невозможно масштабировать
без потерь.

• Картинка описывается математическими формулами и не требует наличия информации о каждом пикселе (нет пикселей вообще).

• Объекты могут состоять из линий, кривых и фигур.

Форматы: SVG, AI, CDR
Программы: CorelDraw, Adobe Illustrator, Inkscape

• Можно бесконечно изменять размер изображения без потерь качества.

• Мало весят.

• Сложные картинки с большим количеством деталей и широкой цветовой гаммой не могут быть векторными. Например, фото.

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

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

ПРИМЕР: растровые изображения

ПРИМЕР: векторные изображения

Что такое разрешение?

Качество изображения называют разрешением.

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

Например, если разрешение представлено числом 300 — это означает, что фото включает в себя 300 единиц пикселей на дюйм.

Для печати необходимы качественные изображения не менее 300 DPI. Для веб достачно 72-150 DPI.

Разрешение характерно для растровых изображений и измеряется в DPI или (Dots Per Inch), то есть «точки на дюйм»

В векторной графике качество изображения не зависит от разрешения. При масштабировании такие картинки не теряют в качестве.

Что такое трассировка и растрирование?

• Растровое изображение можно преобразовать в векторное. Этот процесс называется "трассировка".

• Векторное изображение можно сделать растровым. Этот процесс называется "растрирование".

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

Что такое оптимизация и зачем она нужна?

Чтобы картинки на странице быстро загружались, нужно их оптимизировать:

В идеале нужно загружать фотографии такого размера, какими они будут на сайте.

1) Уменьшить размер картинки с помощью любого графического редактора

2) Сжать картинку в специальном для этого сервисе, например, TinyPNG.

Вес изображения можно уменьшить при экспорте картинки в «Фотошопе» («Файл» → «Экспортировать» → «Сохранить для Web»), снизив качество.

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

• Для интернет-магазинов оптимальный вариант — JPEG (лучшее качество при наименьшем размере).

• Если необходима прозрачность, используйте PNG (иногда даже выигрывает у JPEG по весу файла).

• Для логотипов и иконок используйте векторный SVG.

ДОМАШНЕЕ ЗАДАНИЕ:

• Потренироваться оптимизировать картинки:

1) при помощи известных графических редакторов (например, уменьшить размеры изображений в paint или photoshop); 2) пропустить изображения через TinyPNG (TinyJPEG);
3) Cравнить вес файлов до и после.

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

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

5 июня 2020 г.