Учим картинки¶
Углубленный курс по изображениям для Web.
Этот курс предназначен как для начинающих, так и для опытных веб-разработчиков и охватывает все аспекты, начиная с основ обеспечения эффективного запроса и рендеринга изображений и заканчивая деталями передачи распространенных форматов изображений с сервера на клиент. На протяжении всего курса вы узнаете, как добиться минимально возможного размера передаваемых изображений без ущерба для их качества - по крайней мере, так, чтобы никто не мог этого увидеть.
Вы можете пройти весь курс от начала до конца, чтобы получить целостное представление о том, как изображения работают в современном Интернете, или использовать его в качестве справочника по конкретным концепциям и шаблонам разметки, которые вы будете использовать в своей повседневной работе.
Для тех, кто только начинает заниматься веб-разработкой, предлагаем ознакомиться с курсами Learn HTML, где рассматриваются основы использования разметки, Learn CSS, где рассматриваются основы стилизации, и Learn Responsive Design, где рассматриваются способы отображения изображений в отзывчивых макетах.
Вот что вы узнаете:
Изображения и производительность¶
-
Краткая история изображений
История изображений в Интернете, начиная с элемента image в 1993 году
-
Ключевые вопросы производительности
Узнайте, как сделать так, чтобы ваши запросы к изображениям были как можно меньше и производительнее.
Форматы и сжатие изображений¶
-
Векторные изображения
Узнайте о SVG - формате векторных изображений, используемом в Интернете.
-
Растровые изображения
Откройте для себя растровые изображения, такие как JPEG, GIF, PNG и WebP.
-
Форматы изображений: GIF
Понимание формата изображения GIF, а также объяснение принципов кодирования изображений.
-
Форматы изображений: PNG
Узнайте, в каких случаях лучше всего выбирать формат изображения PNG.
-
Форматы изображений: JPEG
Узнайте о самом распространенном формате изображений в Интернете.
-
Форматы изображений: WebP
Узнайте о WebP и поймите разницу между этим форматом и другими.
-
Форматы изображений: AVIF
AV1 Image File Format (AVIF) - это кодирование, основанное на видеокодеке AV1 с открытым исходным кодом.
Отзывчивые изображения¶
-
Отзывчивые изображения
Глубокое погружение в отзывчивые изображения.
-
Дескриптивные синтаксисы
Использование
srcsetиsizesпозволяет предоставить браузеру информацию об источниках изображений и о том, как они будут использоваться. -
Прескриптивные синтаксисы
Узнайте об элементе
<picture>.
Высокопроизводительные процессы обработки изображений¶
-
Автоматизация
Сделайте создание высокопроизводительных источников изображений неотъемлемой частью процесса разработки.
-
Генераторы сайтов, фреймворки и CMS
Узнайте, как CMS, такие как WordPress, и другие генераторы сайтов могут упростить использование отзывчивых изображений.
-
Сети доставки контента изображений
Узнайте, как CDN для изображений способны преобразовывать и оптимизировать содержимое изображения.
Авторы
Курс написан Mat Marquis при участии и рецензировании Rachel Andrew, Jake Archibald, Barry Pollard, Aaron Forinton, Eric Portis, Zach Leatherman, и K.Adam White.
Перевод
Перевод этого учебника сделан благодаря подписчикам на Бусти.
Источник — Learn Images