1. The method of displaying pictures on browser web pages
1.1. HTML <img> tag
<!DOCTYPE html>
<html>
<head>
<title>图片展示</title>
</head>
<body>
<h1>图片展示</h1>
<img src="example.jpg" alt="Example Image" width="500" height="300">
<p>这是一张示例图片。</p>
</body>
</html>
<img> tag common attributes
| serial number | Attributes | describe |
| 1 | src | Used to specify the URL or path of an image. |
| 2 | alt | It is used for the alternative text displayed when the image cannot be displayed. When optimizing SEO, pay attention to adding this attribute. |
| 3 | width/height | Used to specify the width and height of the image display. If only one of these values is specified, the other value is automatically calculated at the original scale. |
| 4 | title | When the mouse stays on the picture, a floating box is displayed, and the text displayed in it |
1.2. HTML <picture> tag
<!DOCTYPE html>
<html>
<head>
<title>响应式图片展示</title>
</head>
<body>
<h1>响应式图片展示</h1>
<picture>
<source srcset="example-large.jpg" media="(min-width: 1200px)">
<source srcset="example-medium.jpg" media="(min-width: 768px)">
<source srcset="example-small.jpg" media="(min-width: 320px)">
<img src="example-small.jpg" alt="Example Image">
</picture>
<p>这是一张响应式示例图片。</p>
</body>
</html>
The <picture> tag can contain multiple <source> tags and one <img> tag. The browser will automatically select the most suitable picture for display based on factors such as the screen size and resolution of the device. The <img> tag is an alternative to the <picture> tag and is used as the default image to display when all other alternatives fail.
Note: The <picture> tag can only be used normally in browsers with HTML5 and above.
Common attributes of <picture> tag
| serial number | Attributes | describe |
| 1 | srcset | It is used to specify the URL or path of the picture, and the corresponding resolution information. |
| 2 | media | Used to specify the media queries that apply to this image. If the current device does not qualify for this media query, the image will not be loaded. |
1.3. SVG reference image
<!DOCTYPE html>
<html>
<head>
<title>引入 SVG 图片示例</title>
</head>
<body>
<h1>引入 SVG 图片示例</h1>
<img src="image.svg" alt="SVG 图片示例" />
<p>这是一个 SVG 图片示例。</p>
</body>
</html>
<img> tag to import an SVG image.
The src attribute of the <img> tag points to the URL of the SVG file, and the alt attribute is used to specify alternative text.
Note: SVG images must be imported with the suffix .svg, otherwise they may not be rendered correctly.
It should be noted that the SVG file must be a valid XML file, and its content must be legal.
In HTML5, the <img> tag can directly use images in SVG format without using special processing methods.
1.4, SVG drawing pictures
<!DOCTYPE html>
<html>
<head>
<title>SVG 图片示例</title>
</head>
<body>
<h1>SVG 图片示例</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<p>这是一个简单的 SVG 图片示例。</p>
</body>
</html>
In this example the <circle> element is used to draw a circle.
The <svg> tag defines an SVG graphic area, which can contain multiple SVG graphic elements.
Note: SVG images can be styled via CSS, or JavaScript events can be added.
In this example the <circle> tag has the following attributes
| serial number | Attributes | describe |
| 1 | cx | Specifies the x-coordinate of the center of the circle. |
| 2 | cy | Specifies the y-coordinate of the center of the circle. |
| 3 | r | Specifies the radius of the circle. |
| 4 | stroke | Specifies the stroke color. |
| 5 | stroke-width | Specifies the stroke width. |
| 6 | fill | Specifies the fill color. |
1.5, HTML5 Canvas drawing pictures
Define the Canvas element and get the context
Load the picture
Draw the picture
<!DOCTYPE html>
<html>
<head>
<title>Canvas Image Demo</title>
<meta charset="utf-8">
<style type="text/css">
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
// 加载图片
let image = new Image();
image.src = "https://abc.com/random/800x600";
// 绘制图片
image.onload = function () {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
1.6, HTML5 Canvas draw snow effect
Define Canvas elements and properties
Define snowflake properties and density
Start painting and moving snowflakes
Listen for window size changes and reset Canvas size
Render animation
<!DOCTYPE html>
<html>
<head>
<title>Snowfall</title>
<meta charset="utf-8">
<style type="text/css">
html {
background:rebeccapurple;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
// 获取Canvas元素
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
// 设置Canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义雪花属性
let snowflakes = [];
let snowflakeCount = 400;
for (let i = 0; i < snowflakeCount; i++) {
snowflakes.push({
x: Math.random() * canvas.width, // 雪花x轴坐标
y: Math.random() * canvas.height, // 雪花y轴坐标
r: Math.random() * 2 + 1, // 雪花半径
d: Math.random() * snowflakeCount // 雪花密度
})
}
// 开始绘画
function drawSnowflakes() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.beginPath();
for (let i = 0; i < snowflakeCount; i++) {
let snowflake = snowflakes[i];
ctx.moveTo(snowflake.x, snowflake.y);
ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveSnowflakes();
}
// 移动雪花
let angle = 0;
function moveSnowflakes() {
angle += 0.01;
for (let i = 0; i < snowflakeCount; i++) {
let snowflake = snowflakes[i];
snowflake.y += Math.pow(snowflake.r, 0.5) + 1;
snowflake.x += Math.sin(angle) * 2;
// 重置雪花位置
if (snowflake.y > canvas.height) {
snowflakes[i] = {
x: Math.random() * canvas.width,
y: 0,
r: snowflake.r,
d: snowflake.d
}
}
}
}
// 重置Canvas尺寸
function resetCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// 监听窗口尺寸变化
window.addEventListener('resize', resetCanvas, false);
// 渲染动画
setInterval(drawSnowflakes, 25);
</script>
</body>
</html>
2. Common image formats
| serial number | Format | describe | Is the browser available |
| 1 | PNG | PNG (Portable Network Graphics) is a lossless bitmap graphics format that supports multiple color modes such as index, grayscale, and RGB, and supports alpha channels, which means that transparent background effects can be achieved. PNG preserves more details while compressing images, so it is often used in web design, game development and other fields. | yes |
| 2 | JPG、JPEG | Both JPG and JPEG are abbreviations for image file formats. In fact, they are the same format, but the suffixes are different. JPG (.jpg) is a common file extension for the JPEG (.jpeg) file format, and there is no difference between the two. JPEG (Joint Photographic Experts Group) is a lossy compressed image file format suitable for storing digital photographs and other types of images. JPEG files can be opened in any image editing software, but because they are lossy compressed, they lose some image quality every time they are resaved. | yes |
| 3 | WebP | WebP is an image compression format introduced by Google, which aims to provide a more efficient way to compress images. It uses both lossy and lossless compression methods, and compared to JPEG and PNG formats, the file size of WebP format can be reduced by 30% to 80%. At the same time, the WebP format also supports transparency and animation, which makes it a very suitable image format for use on the web. The WebP format is currently supported in most modern browsers, such as Chrome, Safari, Firefox, etc. |
yes |
| 4 | AVIF | AVIF is a new image compression format, the full name is AV1 Image File Format. It is an image format based on AV1 video coding technology, designed and developed by the Alliance for Open Media (Open Media Alliance). The AVIF format has extremely high compression rate and image quality, and can support images up to 16-bit depth. Since its compression efficiency is much higher than other commonly used image formats such as JPEG, WebP, and HEIF, it has received more and more attention and support in recent years. At present, the AVIF format has been supported by many mainstream browsers and operating systems, and it is expected to gradually replace other image formats and become one of the mainstream formats on the Internet in the future. | yes |
| 5 | PSD | PSD is a proprietary file format of Adobe Photoshop, and its full name is Photoshop Document. It is an editable advanced image format widely used in fields such as graphic design, illustration, and image editing. PSD files can contain images, layers, vector graphics, filters, masks, text and other elements. It also supports advanced features like transparency, gradients, layer styles, channels, and more. Due to its very rich image processing capabilities, the PSD format is widely used in the image processing industry. | no |
| 6 | SVG | SVG refers to Scalable Vector Graphics, which is an XML format standard for describing two-dimensional vector graphics. Unlike pixel graphics, SVG images are built based on vectors and a set of instructions that describe object properties such as color, shape, position, and padding, so they can be losslessly scaled and resized at any resolution without affecting the quality of the image . This makes SVG ideal for creating and displaying graphics such as icons, maps, dashboards, etc. in web and mobile applications. Since the SVG format can be rendered in almost any web browser, it has become one of the widely used graphics formats in web development. | yes |
| 7 | GIF | GIF is a graphic file format (Graphics Interchange Format), which supports animation and transparent background, and can save file size. Originally developed by CompuServe, the GIF format is one of the most popular animation formats on the Web. GIF images can work like a continuous-frame animation, showing a series of images that give the viewer the impression that the images are moving. Due to its relatively small file size, GIF is widely used in web applications, such as sharing emojis and short animations in social media, etc. Since animated GIFs are bitmap-based, they can be distorted when working with complex images and are not suitable for larger, high-resolution images. | yes |
| 8 | XMP | XMP是指“可扩展元数据平台”（Extensible Metadata Platform），它是由Adobe开发的元数据格式。XMP格式主要用于存储关于图像、文档、视频和音频等媒体文件的信息。与其他文件格式不同，XMP元数据不会影响图像或文档本身，它只是在文件中添加了一些标记和信息，以便应用程序和系统可以更好地管理和使用这些文件。XMP元数据可以包括文件的作者、标题、关键字、版权信息、创建日期等，这些信息可以在文件存储和共享过程中提供有用的信息和保护。XMP格式还支持多语言和扩展自定义元数据。 XMP格式是元数据格式，通常包含在图像文件中，用于保存有关图像的信息，例如拍摄时间、相机设置和位置等。虽然某些浏览器可以显示图像元数据，但通常不支持显示XMP格式的元数据。浏览器通常只支持显示图像的常规元数据，例如EXIF格式的元数据。因此，XMP格式的图像会像其他图像格式一样在浏览器中显示，但是其中的元数据通常不会被浏览器显示。 |
是 |
| 9 | DDS | DDS是一种特殊的图像文件格式，它是英文“DirectDraw Surface”的缩写。它是一种专门用于存储图像的格式，通常用于游戏制作和其他图形应用程序中，因为它可以提供高效的图像压缩和快速的图像加载。 DDS格式支持许多不同的压缩算法，如DXT1、DXT3、DXT5等。这些算法可以在不损失质量的情况下将图像压缩到较小的文件大小，这对于需要大量图像资源的游戏和应用程序来说非常有用。此外，DDS格式还支持多层级贴图（MIP映射）、透明度（Alpha通道）和立方贴图等高级功能。 总之，DDS格式是一种高效、灵活和功能强大的图像格式，可以提供高质量的图像，并在游戏和应用程序中提高性能和速度。 DDS格式图片在Web浏览器中通常不被支持，因为它们是为游戏和图形应用程序等专业领域而开发的。常用的Web浏览器支持的图片格式包括JPEG、PNG和GIF等。如果您需要在Web上展示DDS格式的图片，可以考虑将其转换为常用的图片格式。 |
否 |
| 10 | BMP | BMP是一种非压缩位图图像格式，全称为“位图图像文件”（Bitmap Image File）。BMP格式最初由微软开发，是Windows系统中最常见的图像格式之一。 BMP格式文件以像素为单位保存图像数据，每个像素的颜色信息可以使用24位RGB模式或32位ARGB模式保存。由于BMP格式不进行压缩，它的文件大小通常比其他压缩图像格式（如JPEG或PNG）更大，因此不太适合在网络上共享或储存大量图像资源。 BMP格式有一个较大的优点，即它不涉及特殊算法或专有技术，这意味着任何程序都可以读写BMP格式文件，并且不需要额外的软件支持。这使得BMP格式在某些特定应用场景下依然有其价值，如图像处理软件或打印机驱动程序。 尽管BMP格式通常不是最优的选择，但它的广泛应用使得它成为图像处理中的一个基本概念。 是的，BMP格式图片可以用于浏览器。但是，BMP文件通常比其他常见的图像格式（如JPEG和PNG）更大，因此加载速度可能会更慢。在Web上，通常使用JPEG或PNG格式的图像，因为它们更适合Web。 |
是 |
| 11 | PDT | PDT（Portable Document Format / Personal Document Format）是一种由Adobe Systems公司开发的文件格式，用于以不依赖于应用软件、操作系统和硬件的方式存储和传输文档。PDT格式的目的是为了能够方便地共享和发布文件，如文档、图像、表格等等，使其不会被篡改或意外更改。这种格式中还包括PDF/A，它专门是为存档用途而设计的PDF文件格式。 PDT文件通常具有高度的可移植性和安全性，可以在各种操作系统和硬件平台上使用。此外，它还支持文字、图像、链接、数字签名和多媒体对象等丰富的内容，能够满足各种不同的需求。无论是在学术界、商业界和政府机构中，PDT格式都得到了广泛的应用。 PDT（Portable Document Format）格式的文件通常用于文档的打印和交流，与浏览器不太相关。但是，如果你想在网页上显示PDT格式的图片，可以转换为其他常用的图片格式（如JPEG、PNG等），然后在网页中使用HTML代码来嵌入图片。或者，你也可以使用特定的PDT插件或应用程序来在浏览器中查看PDT文件。 |
否 |
| 12 | TIFF | TIFF（Tagged Image File Format）是一种用于存储图像、照片和其他图形图像的标准文件格式之一。它最初由Aldus Corporation开发，现在由Adobe Systems维护。TIFF格式可以存储高质量、无损的图像，支持多种颜色模型和像素深度，并可保存多个图像层和透明度信息。 TIFF格式具有广泛的应用，尤其适用于印刷和出版行业，以及医学影像和数字摄影领域。与其他图像格式相比，TIFF格式可以存储更大的文件大小，具有更多的细节和更高的分辨率，使得用户可以更准确地保留和传输高质量的图像和照片。虽然TIFF格式具有很多优点，但它也文件会比较大，存储和处理时可能需要较高的计算机性能。 是的，TIFF格式图片可以用于浏览器上显示，但并不是所有的浏览器都支持该格式。一般来说，TIFF格式图片在专业图像处理软件中使用较多，浏览器上常用的图片格式为JPEG、PNG和GIF。如果要在网页中使用TIFF格式图片，建议先将其转换成其他常用的格式。 |
是 |
三、各大网站使用图片格式举例，仅参考，本人未在以下站点做详细寻找
| 序号 | 网站 | 标签 | 格式 | 截图 |
| 1 | CSDN | <img> | jpg、png |    |
| 2 | bilibili/B站 | <picture> | avif、webp |    |
| 3 | 淘宝 | <img> | jpg |   |
| 4 | 京东 | <img> | jpg、avif |   |
| 5 | 华为 | <img> | jpg |   |
四、欢迎交流指正，关注我，一起学习。
五、相关内容
记录一、同样大小的图片，jpg格式比png格式加载的快？
同样大小的图片，jpg格式就比png格式加载的快。原因是同样大小的jpg和png图片下载的时间是相同的,但是jpg图片是有RGB三种描述的, 而png是有ARGB四种描述的,带有透明度,所以浏览器解码png图片要花更多的时间,因此jpg格式比png加载的快。
记录二
JPG只有RGB三种描述，没有透明度，PNG有ARGB四种描述，带有透明度。
记录三、Base64是不是一种图片格式？
Base64并不是一种图片格式，而是一种编码方式。它可以将二进制数据转换为可打印的ASCII字符，以便在文本协议中传输，比如在HTTP协议中传输图片数据。
在Web开发中，Base64常被用来将图片转换为字符串的形式，以便在HTML或CSS中直接使用。使用Base64编码的图片字符串以"data:image/[type];base64,"开头，其中[type]表示图片格式，比如jpeg、png等。例如：
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRg..."/>
Base64编码虽然可以用于传输图片数据，但它会使图片文件变得更大，因为它将二进制数据转换成了文本。所以，如果不需要在文本协议中传输图片数据，建议还是使用原本的二进制格式。
六、参考连接
浅谈Blob及使用场景_blob的使用场景_snow@li的博客-CSDN博客