Учебная практика ПМ. 08

Лабораторная работа- Тема: "Создание, использование и оптимизация изображений для веб-приложений"

1. Цель работы

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

2. Теоретическая часть

2.1. Основные форматы изображений для веб

  • JPEG – для фотографий и изображений с градиентами (с потерями качества).
  • PNG – для изображений с прозрачностью (без потерь).
  • WebP – современный формат с лучшим сжатием (поддержка не во всех браузерах).
  • SVG – векторная графика для иконок и логотипов.

2.2. Методы оптимизации изображений

  • Сжатие без потерь (PNG, SVG).
  • Сжатие с потерями (JPEG, WebP).
  • Использование srcset и <picture> для адаптивности.
  • Ленивая загрузка (loading="lazy").
  • Кэширование и CDN.

3. Практическая часть

3.1. Задание 1: Подготовка изображений

  1. Скачайте 3 изображения (фотография, логотип, иконка).
  2. Конвертируйте их в форматы: JPEG, PNG, WebP.
  3. Сравните размеры файлов и качество.

Инструменты:

  • Photoshop / GIMP / онлайн-конвертеры (TinyPNG, Squoosh.app).

3.2. Задание 2: Вставка изображений в HTML

  1. Создайте HTML-страницу.
  2. Добавьте изображения с:
    • Атрибутом alt для доступности.
    • Адаптивными размерами (width, height, max-width: 100% в CSS).
    • Ленивой загрузкой (loading="lazy").

Пример кода:

html
Copy
<img src="photo.webp" alt="Пейзаж" loading="lazy" width="800" height="600">

Run HTML

3.3. Задание 3: Оптимизация с <picture> и srcset

  1. Создайте несколько версий одного изображения (разные размеры).
  2. Используйте <picture> и srcset для адаптивной загрузки.

Пример кода:

html
Copy
<picture>
  <source srcset="image-large.webp" media="(min-width: 1200px)">
  <source srcset="image-medium.webp" media="(min-width: 768px)">
  <img src="image-small.webp" alt="Пример">
</picture>

Run HTML

4. Контрольные вопросы

  1. Какие форматы изображений лучше использовать для фотографий?
  2. Как работает ленивая загрузка (loading="lazy")?
  3. Зачем нужен атрибут alt у изображений?
  4. В чем преимущество формата WebP перед JPEG?
  5. Как <picture> и srcset улучшают производительность?

5. Отчет по лабораторной работе

  1. Титульный лист (тема, ФИО, группа).
  2. Цель работы.
  3. Выполненные задания с примерами кода.
  4. Скриншоты результатов.
  5. Ответы на контрольные вопросы.

[свернуть]

Loading

Обсуждение закрыто.