Изображения

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

Статья по изображениям

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

1. Изучить форматы изображений:
   • jpeg,
   • png,
   • webp,
   • svg,
   • gif;
2. Изучить сценарии использования форматов изображений;
3. Изучить теги и атрибуты касающиеся изображений:
   • img,
   • picture,
   • figure,
   • figcaption,
   • svg,
   • width,
   • height;
4. Изучить свойства для замещающего контента (img/video):
   • object-fit,
   • object-position;
5. Для выполнения работы необходимо:
   • Из макета в Figma экспортировать изображения в подходящем формате.
   • Несколько изображений оптимизировать с помощью squoosh.app.
   • создать папку в проекте для изображений img или images и все изображения помещать в нее;
   • в index.html и style.css из предыдущей работы:
     • использовать корректные теги для изображений (img или figure);
     • в аттрибуте src использовать относительные пути;
     • использовать подходящие форматы изображений (jpg, png, svg);
     • при наличии фоновых изображений, добавьте их к элементам с помощью background-image. Также для элементов с фоновыми изображениями обязательно добавить цвет (background-color).
     • при необходимости использовать свойства object-fit или object-position;
6. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.
7. Загрузить проект на хостинг.

Алгоритм выбора формата

Требования к html и css:

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

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

Результаты работы проверены наставником.

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

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

• <img> - mdn
• <picture> - mdn
• <figure> - mdn
• object-fit - mdn
• object-position - mdn
• Все о background
• Оптимизация изображений squoosh.app

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

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

Задать вопрос наставнику