本课程面向初级和高级 Web 开发者,内容涵盖方方面面,包括确保高效请求和渲染图片来源的基础知识,以及如何在服务器之间传递常见图片格式的详细信息。在本课程中,您将学习如何在不影响图像质量的情况下以尽可能小的传输大小传输图像,至少不会以任何用户都能够看到的方式降低图像质量。
您可以阅读该系列视频,从头到尾全面了解图像在现代网络上的工作原理,或者将其用作您在日常工作中要使用的特定概念和标记模式的参考。
如果您是网络开发新手,可以学习学习 HTML 课程了解使用标记的基础知识,学习学习 CSS 课程了解样式设置基础知识,并学习学习自适应设计课程,了解图片在响应式布局中的呈现方式。
您将了解以下内容:
网络上的图片简要介绍
网络图片的历史,始于 1993 年的图片元素
关键性能问题
了解如何确保您的图片请求尽可能小且性能出色。
矢量图片
了解 SVG(一种在网页上使用的矢量图片格式)。
光栅图片
探索光栅图片,例如 JPEG、GIF、PNG 和 WebP。
图片格式:GIF
了解 GIF 图片格式,并说明图片编码的工作原理。
图片格式:PNG
了解 PNG 何时是最适合选择的图片格式。
图片格式:JPEG
了解网络上最常见的图片格式。
图片格式:WebP
了解 WebP,以及这种格式与其他格式之间的区别。
图片格式:AVIF
AV1 图片文件格式 (AVIF) 是一种基于开源 AV1 视频编解码器的编码。
自适应图片
深入了解自适应图片。
描述性语法
使用 srcset 和 size,为浏览器提供有关图片来源及其使用方式的信息。
规范语法
了解图片元素。
自动压缩和编码
使生成高性能图片来源成为开发流程的无缝环节。
网站生成器、框架和 CMS
了解 WordPress 等 CMS 和其他网站生成器如何助您更轻松地使用自适应图片。
图片内容分发网络
了解图片 CDN 如何能够转换和优化图片内容。
总结
一些其他资源。
那么,准备好学习 Google 图片了吗?