Этот курс создан как для начинающих, так и для опытных веб-разработчиков и охватывает все: от основ обеспечения эффективного запроса и рендеринга источников изображений до подробностей о том, как распространенные форматы изображений передаются от сервера к клиенту. В ходе этого курса вы узнаете, как добиться минимально возможного размера передаваемых изображений без ущерба для их качества — по крайней мере, так, чтобы каждый мог их увидеть.
Вы можете просмотреть эту серию от начала до конца, чтобы получить целостное представление о том, как изображения работают в современной сети, или использовать ее в качестве справочника по конкретным концепциям и шаблонам разметки, которые вы будете использовать в своей повседневной работе.
Для тех, кто плохо знаком с веб-разработкой, ознакомьтесь с курсами «Изучение HTML» , чтобы узнать основы использования разметки, курсами «Изучение CSS» , чтобы изучить основы стилизации, и курсами «Изучение адаптивного дизайна» , чтобы понять, как изображения будут отображаться в адаптивных макетах.
Вот что вы узнаете:
Краткая история изображений в сети
История изображений в сети, начиная с элемента изображения в 1993 году.
Ключевые проблемы с производительностью
Узнайте, как обеспечить минимально возможный размер и производительность запросов изображений.
Векторные изображения
Узнайте о SVG — формате векторных изображений, используемом в Интернете.
Растровые изображения
Откройте для себя растровые изображения, такие как JPEG, GIF, PNG и WebP.
Форматы изображений: GIF
Изучите формат изображений GIF, а также объясните, как работает кодирование изображений.
Форматы изображений: PNG
Узнайте, когда PNG — лучший формат изображения.
Форматы изображений: JPEG
Узнайте о наиболее распространенных форматах изображений в Интернете.
Форматы изображений: WebP
Узнайте о WebP и поймите разницу между этим форматом и другими.
Форматы изображений: AVIF
Формат файла изображения AV1 (AVIF) — это кодировка, основанная на видеокодеке AV1 с открытым исходным кодом.
Адаптивные изображения
Глубокое погружение в адаптивные изображения.
Описательный синтаксис
Использование srcset и размеров для предоставления браузеру информации об источниках изображений и о том, как они будут использоваться.
Предписывающий синтаксис
Узнайте об элементе изображения.
Автоматизация сжатия и кодирования
Сделайте создание высокопроизводительных источников изображений неотъемлемой частью процесса разработки.
Генераторы сайтов, фреймворки и CMS
Узнайте, как CMS, такие как WordPress и другие генераторы сайтов, могут упростить использование адаптивных изображений.
Сети доставки имиджевого контента
Узнайте, как CDN изображений могут преобразовывать и оптимизировать содержимое изображения.
Заключение
Некоторые дополнительные ресурсы.
Итак, вы готовы изучать изображения?