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

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

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

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

Чтобы дизайн хорошо выглядел на всех устройствах делается несколько версий одного макета (адаптив). Полная адаптация требует ресурсов, поэтому иногда делают сначала одно разрешение. Десктоп-first (1280) - 90% ЦА используют мониторы. Мобайл-first (320) - 90% ЦА используют смартфоны.

Чаще делают адаптив сразу в обеих вариантах: Десктоп + Мобайл.

Полный адаптив делается при заказе сайта на заказ, когда после сдачи проекта не планируется возвращаться к разработке. Ну или если каждый посетитель важен (например сайт госуслуг)

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

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

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

Для создания атмосферы используются тематические объекты, дольки лимона, клубника и другие дополняющие элементы.

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

Сверху вы видите путь, который проходит изображение от фотоаппарата до вебсайта.

.raw/dng - исходники с фотоаппарата. Весят много, открываются не всеми программами, поэтому сразу конвертируются в .tiff или .jpg.

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

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

.hevc - сжатый формат при съемке на технику apple. В профессиональной работе не используется, требует конвертацию в .jpg

Представляют из себя кусок html-кода с координатами точек. Можно менять размер без потери качества, весят мало

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

Разделяют два типа наложения цвета: через обводку и через заливку

Для получения сложных фигур можно использовать режимы смешивания

Учитывая, что вектор это кусок кода, то всё определяется приложением, которое его интерпретирует

Два главных приложения по работе с вектором:
Figma (.fig) - UX/UI дизайн
Adobe Illustrator (.ai) - графический дизайн

На выходе получаем три формата:
.pdf - для презентаций и печати
.eps - для иллюстраций
.svg - для иконок и другой веб-графики

Другие приложения, конвертируем из этих форматов в те, что выше:
Sketch (.sketch) - аналог Фигмы, потерял актуальность. Можно найти неплохие мокапы
Corel Draw (.cdr) - векторный редактор для архитекторов. Иногда логотипы присылают в этом формате