Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!

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

Какие бывают изображения?
Изображения по типу хранения информации
РАСТРОВЫЕ
ВЕКТОРНЫЕ
• Картинка складывается из множества маленьких элементов — пикселей.

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

Форматы: 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равнить вес файлов до и после.

К следующему уроку подготовить материал для работы над проектом, в том числе изображения.
5 июня 2020 г.
Время прочтения: 6 мин
Подробная статья от СПЕКТР ВЕБ на тему урока: