05

Работа с изображениями

Изображения

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

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

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

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

  • Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
  • Код отформатирован;
  • Корректное использование тегов;
  • Корректно выбранные форматы изображений;
  • Отсутствие ошибок на валидаторе для html и css.

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

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

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

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

<img> - mdn

<picture> - mdn

<figure> - mdn

object-fit - mdn

object-position - mdn

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

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

  1. Назовите случаи, в которых используется формат название формата изображений.
  2. Какие обязательные атрибуты есть у тега img?
  3. В каких случаях можно использовать тег figure применительно к изображениям?
  4. Как работает object-fit/object-position и какие у них есть варианты значений?
  5. Для чего требуется оптимизировать изображения?
  6. Назовите случаи для которых применим тег picture?
Задать вопрос наставнику
Предыдущая Следующая