本课程专为初级和高级 Web 开发者设计，涵盖从确保高效请求和呈现图像源的基础知识，到常见图像格式如何从服务器传输到客户端的详细信息。在本课程中，您将学习如何在不影响图像质量的前提下，尽可能减小图像的传输大小——至少，不会以任何人都看得出的方式影响质量。
您可以从头到尾学习本系列课程，全面了解图像在现代 Web 上的工作原理，也可以将其用作日常工作中将使用的特定概念和标记模式的参考。
对于 Web 开发新手，请查看 学习 HTML 课程，了解标记的基础知识；学习 CSS 课程，了解样式基础知识；以及 学习自适应设计 课程，了解图像在自适应布局中的呈现方式。
您将学到以下内容
Web 图片简史
Web 图片历史，从 1993 年的图像元素开始
主要性能问题
学习如何确保您的图片请求尽可能小且性能尽可能高。
矢量图片
了解 SVG，Web 上使用的矢量图片格式。
栅格图片
探索栅格图片，例如 JPEG、GIF、PNG 和 WebP。
图片格式：GIF
了解 GIF 图片格式，以及图片编码工作原理的说明。
图片格式：PNG
了解何时 PNG 是最佳图片格式选择。
图片格式：JPEG
了解 Web 上最常见的图片格式。
图片格式：WebP
了解 WebP，并理解此格式与其他格式之间的区别。
图片格式：AVIF
AV1 图像文件格式 (AVIF) 是一种基于开源 AV1 视频编解码器的编码。
自适应图片
深入了解自适应图片。
描述性语法
使用 srcset 和 sizes 为浏览器提供有关图片源及其使用方式的信息。
规范性语法
了解 picture 元素。
自动化压缩和编码
使生成高性能图片源成为您开发过程中无缝衔接的一部分。
站点生成器、框架和 CMS
探索 WordPress 等 CMS 和其他站点生成器如何使自适应图片更易于使用。
图片内容分发网络
了解图片 CDN 如何能够转换和优化图片内容。
结论
一些其他资源。
那么，您准备好学习图片了吗？