Изображения

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

Порядок выполнения лабораторной работы:

Теория

1. изучить основные форматы изображений:
   • jpeg,
   • webp,
   • avif,
   • png,
   • svg;
2. изучить сценарии использования форматов изображений;
3. изучить свойства для замещающего контента (img/video): object-fit и object-position;
4. Как добавлять фон и использовать свойства из background:
5. градиенты: linear, radial;
6. тени для элементов box-shadow;

Практика

1. Из макета в Figma экспортировать изображения в подходящем формате.
2. Два изображения оптимизировать с помощью squoosh.app.
3. Изображения добавить к проекту в папку img или images.
4. В index.html в тегах img проставить корректные относительные пути до изображений.
5. При необходимости в css используйте свойства object-fit или object-position.
6. При наличии фоновых изображений, добавьте их к элементам с помощью background-image. Также для элементов с фоновыми изображениями обязательно добавить цвет (background-color).
7. Добавьте использование теней, если они требуются по дизайну, если таких элементов нет - добавьте тень для элемента, который выглядит как кнопка.
8. Добавьте градиенты по дизайну, если нет, то для крупного текста сделайте буквы с градиентом.
9. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.

Экспорт изображений из Figma

Выберите изображение в макете и посмотрите, как оно выглядит в слоях в левой панели.

Если в слоях показывается иконка пейзажа (пример ниже), то это изображение в макете хранится в растровом формате и его нет смысла экспортировать в векторном.

Если в иконках отображаются конкретные фигуры и в именах слоев встречаются Vector или описания фигур (пример ниже), то в макете это заложено кривыми и их стоит экспортировать в векторном формате. Если иконка состоит из нескольких фигур/слоев, выбирайте слой объединяющий их.

Далее в правой панели в Design, внизу есть раздел Export. В нем ваша задача выбрать подходящий формат.

Растровые изображения можно оптимизировать с помощью squoosh, а векторные - svg omg.

Пример решения с волнами

Требования к коду:

1. Отсутствие ошибок на валидаторе для html и css;
2. Код отформатирован.
3. Использованы правильные форматы изображений.

Результаты выполнения лабораторной работы

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

Дополнительные источники

• Про тег <img>
• Оптимизация изображений - squoosh.app
• Все о background
• Тени с котиками
• Все о градиентах
  • MDN: linear-gradient()
  • MDN: radial-gradient()

Вопросы для защиты

1. Какие два способа формирования изображений вы знаете?
2. В чем разница между двумя способами формирования изображений?
3. Какие форматы изображений вы знаете?
4. Для чего подходит какой-то формат?
5. Когда полезны object-fit и object-position?
6. Что сокращает свойство background?
7. Какое свойство надо использовать если требуется только задать цвет фона?
8. Можно ли добавлять несколько фонов на один элемент?
9. Какими параметрами можно управлять у тени?
10. Чем отличается линейный и конический градиенты?