Форматы изображений
Если ваша работа хоть как-то перекликается с графикой, вам крайне необходимо разбираться в форматах изображений и их плюсах и минусах. Для начала давайте разберем понятие растровой графики и векторной графики.
Растровая графика
Растровое изображение (лат. rastrum — скребок, грабли) — изображение, представляющее собой сетку (мозаику) пикселей — цветных точек (обычно прямоугольных) на мониторе, бумаге и других отображающих устройствах.
Векторная графика
Ве́кторная гра́фика — способ представления графических объектов и изображений (формат описания) в компьютерной графике, основанный на математическом описании элементарных геометрических объектов, обычно называемых примитивами, таких как: точки, линии, сплайны, кривые Безье, круги, окружности, эллипсы, многоугольники.
Резюмируем
Файл с растровым изображением должен содержать информацию о цвете каждой отдельной точки, что полезно для отображения высокодетализированных изображений (фотографий, рисунков), что негативно сказывается на размерое файла. Файл с векторным изображением выглядит как описание "отсюда и до заката по формуле икс в кубе плюс константа красить зеленым цветом", в связи с чем весит в разы меньше, но и высокую детализацию себе позволить не может.
Чтобы прикинуть, видите вы растровое изображение или векторное, подумайте, можете ли вы описать простыми предложениями состав картинки. В случае с картинкой справа вы можете сказать "шапка черного цвета без оттенков и градиентов. На ней есть белый блик в виде галочки" и эта информация будет более или менее точно описывать состав картинки, тогда как с фото котом ваше описание будет примерно "участок черный у уха номер 235. Дальше участок бежевый у уха номер 236. Участок бежево-черный у уха номер 237"... В общем, жизни не хватит перечислить детали растрового изображения.
Дальнейшее деление растровой графики
Растровая графика также делится на два типа:
Графика с прозрачностью "весит" больше. Основные форматы изображений, которые поддерживают альфа канал — .PNG, .WEBP, .gif. Самым популярным является .PNG
Для растровой графики с прозрачностью используйте PNG и ни для чего более
Сохраняя картинку без прозрачности в PNG вы накидываете ему дополнительный "вес" не получая никаких плюсов по качеству.
Графика без прозрачности "весит" уже меньше. Основные форматы изображений — JPG, JPG2000, mozJPG.
Снова в вектор
У векторной графики разлет по форматам небольшой — SVG. SVG поддерживает прозрачность, поддерживает анимацию (как и gif, и в отличие от gif SVG не начинает весить под 1мб за одну картинку), также SVG имеет огромную кучу фишек, которые вы можете освоить в дальнейшем (например, можно через "блокнот" прописать ему свойство не сохранять пропорции и такая картинка будет растягиваться на сайте под контент).
Для векторной графики используйте SVG, исключение только для крайне детализированных векторных изображений
Как отличить вектор от растра со 100% вероятностью, чтобы не загружать тяжелые картинки
В видео я затронул тему 2х и 1х сохранения в Figma. Зачем это нужно?
Разные мониторы имеют разное число физических пикселей на единицу площади. На каком-нибудь ксяоми за 5 тысяч рублей плотность расположения самих вот этих диодиков, способных гореть разными цветами, на экране, в 2-3 раза меньше, чем на флагманских моделях этой же фирмы, айфонах, современных ПК-мониторах и ноутбуках.
Для таких вот высококачественных дисплеев при сохранении картинки в 1х соседние пиксели просто будут краситься в те же цвета, из-за чего фотография будет выглядеть одинаково что на дорогом мониторе, что на дешевом. Сохранение в 2х заложит в файл с картинкой информацию о более плавном переходе между соседствующими цветами, хотя это и увеличит размеры изображения.
Компрессоры изображений
Перед загрузкой фотографий на хостинг или в ваш конструктор каждый веб-разработчик всегда прогоняет через компрессоры изображений. Компрессоры позволяют ужать изображение в размерах с минимальными потерями в качестве, незаметными глазу.
Компрессор для картинок без прозрачности — https://squoosh.app/
Компрессор для картинок с прозрачностью — https://tinypng.com/
Бонус-раздел для тех, кто еще не устал
.png и .jpg — самые популярные в вебе форматы, но не самые качественные. Уже более 10 лет как существует формат, который умеет хранить картинки с прозрачностью, но при этом "весит" меньше, чем jpg.
Имя ему — .WEBP. Часть конструкторов сама конвертирует все картинки в него и на этапе подключения пользователя к сайту проверяет, поддерживает ли его браузер этот формат, и если да, отдаем ему картинки в WEBP, ускоряя загрузку страницы. Помимо WEBP существуют и форматы HEIC, AVIF, которые еще лучше ужимают картинки, что дает экономию до 80-90% веса картинки.
К сожалению, широкого применения они все еще не получили и нам вручную не получится загружать WEBP в конструкторы. Максимум, что можем сделать мы — писать код, который будет также, как продвинутые конструкторы, предлагать пользователю на выбор два формата и загружать самый эффективный, если у него есть современный браузер. Однако если вы увидите эти форматы при скачивании картинок, не беспокойтесь, для работы с ним вам нужно лишь переконвертировать его в png/jpg, например тут: https://image.online-convert.com/ru/convert/heic-to-jpg