HTML Images
HTML Images （HTML图像）
To embed an image to a web page use the <img> tag.
The <img> tag supports a number of required and optional attributes, which give additional information about it.
Syntax
Syntax （语法）
The <img> tag is empty, which means that the closing tag isn’t required. It contains only attributes. But in XHTML, the (<img>) tag must be closed (<img/>).
Required Image Attributes - src and alt
Required Image Attributes - src and alt （所需的图像属性- src和alt）
The src (source) attribute specifies the name or the location of the image to be displayed. The value of src attribute should contain the name of the image file or its URL. （Src (source)属性指定要显示的图像的名称或位置。src属性的值应包含图像文件的名称或其URL。）
<img src="example.jpg" />
or
<img src="https://www.example.com/images/example.jpg" />
The alt attribute is also required for the <img> tag. It is used to provide browsers with an alternate text in case when the image cannot be displayed (in case of slow connection, when a screen reader is used, etc). Browsers often display the alternative text of the image as a pop-up when you put your mouse over it.
Syntax of the <img> tag with required src and alt attributes will look like this:
<img src="https://www.w3cdoc.com/learn-html/" alt="HTML tutorial" />
Use alt attribute for all your images to provide keyword-rich description for search engines to improve rankings of your web pages. （>为所有图片使用alt属性，为搜索引擎提供富含关键词的描述，以提高网页的排名。）
Recommended Image Attributes - width and height
Recommended Image Attributes - width and height （推荐的图像属性-宽度和高度）
The width and height attributes are strongly recommended to use with <img> tag. If these attributes are used, the browser reserves the place for the image when loading the content, and this speeds up rendering the page.
<img src="https://www.w3cdoc.com/learn-html" alt="HTML tutorial" width="200" height="120" />
Example of the HTML <img> tag with the src, alt, width and height attributes:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>
Result
Instead of using the width and height dimensions, you could set the size using CSS max-width or max-height properties to get extra flexibility. This can prevent large images from ruining your layout on a device with a small screen. （>您可以不使用宽度和高度尺寸，而是使用 CSS max-width或max-height属性可获得额外的灵活性。 这可以防止大图像在屏幕较小的设备上破坏您的布局。）
Image Floating
Image Floating （图像浮动）
Generally, the text is above an image, by default. But the position of the image and text can easily be changed with the CSS float property . This property specifies how the image should float, or how the text should be wrapped around it. （通常，默认情况下，文本位于图像上方。但是，可以使用CSS float属性轻松更改图像和文本的位置。此属性指定图像应如何浮动，或文本应如何环绕。）
To show the picture on the left side, and text on the right side, add style=“float:left” to the <img> tag.
Example of the <img> tag and the CSS float property for floating an image to the left:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>
Adding style=“float:right” attribute to the <img> tag positions the text to the left, and the image to the right.
Example of the <img> tag and the CSS float property for floating an image to the right:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>
Result
How to add hyperlink to an image
How to add hyperlink to an image （如何向图像添加超链接）
As the <a> tag is used for inserting hyperlinks, you just need to put the image in the <a> tag to make your image clickable.
Example of the <a> and <img> tags for adding a hyperlink to an image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3cdoc.com/" aria-label="w3cdoc homepage">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>
What image format to choose for web
What image format to choose for web （要为网页选择哪种图像格式）
There are three main types of image formats supported by browsers:
GIF (Graphics Interchange Format) （Graphics Interchange Format）
JPG / JPEG (Joint Photographic Experts Group) （JPEG - 聯合攝影專家組織）
PNG (Portable Network Graphics) （- PNG （便携式网络图形））
GIF has 256 unique colors that make simple and fast-loading graphics. You can use GIF for small drawings, diagrams, charts, buttons, and other simple graphics, that won’t prevent your page from loading fast. （GIF有256种独特的颜色，可以制作简单快速的图形。您可以将GIF用于小图形、图表、图表、按钮和其他简单的图形，这不会妨碍页面的快速加载。）
JPEG being a 16-bit format can blend red, blue and green light to display millions of colors. Thus it is used mainly for photographs. This format gives you the flexibility to choose how much to compress your image – from 0% (heavy compression) to 100% (no compression). You can choose this format if you don’t mind giving up some quality for a reduction in size. Avoid using JPEG for images with text, shapes, or large color blocks, because when the file is compressed, the lines will blur and colors will shift.
PNG format combines all the benefits both the JPEG and GIF formats have, it has millions of colors and allows to compress the file with no loss in quality. You can use PNG for web graphics that require transparency, color heavy, and complex graphics or photographs. （PNG格式结合了JPEG和GIF格式的所有优点，它具有数百万种颜色，并允许压缩文件而不会损失质量。您可以将PNG用于需要透明度、色彩浓厚和复杂图形或照片的网页图形。）
Modern image formats
Modern image formats （现代图像格式）
Today, several modern image formats are used for the web to have smaller, richer, and faster-loading images. （如今，网络使用了几种现代图像格式，以获得更小、更丰富、加载速度更快的图像。）
WebP designed by Google provides lossless and lossy compression for images on the web. Its main goal is to become the primary format for photographs on the web replacing JPEG. (WebP - Wikipedia) （由Google设计的WebP为网络上的图像提供无损和有损压缩。其主要目标是成为网络上取代JPEG的照片的主要格式。(WebP -维基百科)）
Another format designed to replace JPEG format is BPG (Better Portable Graphics), which also boasts high compression ratio (files are smaller than JPEG with the same quality). （另一种旨在取代JPEG格式的格式是BPG （更好的可移植图形） ，它还具有高压缩比（文件比具有相同质量的JPEG小）。）
HEIC is a new image format that Apple uses instead of JPEG in iOS 11. This format utilizes modern compression methods, which make it possible to have higher image quality in smaller files. （HEIC是Apple在iOS 11中使用的新图像格式，而不是JPEG。这种格式采用现代压缩方法，可以在较小的文件中获得更高的图像质量。）