How to add pictures to html

Nowadays, with the development of the Internet, web design has become an important skill. In web design, pictures are often very important elements. Therefore, how to add images in HTML is basic knowledge that every web designer needs to master. This article will introduce the basic image tags, image attributes and common image formats in HTML, as well as how to optimize and quote images.

1. Basic image tags and attributes

In HTML, images can be inserted through the <img src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="How to add pictures to html" > tag. The following is the most basic syntax of the <img src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="How to add pictures to html" > tag:

<img  src="/static/imghwm/default1.png" data-src="图片的url" class="lazy" alt="How to add pictures to html" >

Among them, the src attribute is required, which specifies the URL of the image file, that is, the address of the image on the server. The alt attribute is optional and defines the alternative text that is displayed when the image cannot be loaded. For example:

<img  src="/static/imghwm/default1.png" data-src="https://example.com/image.jpg" class="lazy" alt="How to add pictures to html" >

If the image file and the HTML file are located in the same directory, you can use a relative URL:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to add pictures to html" >

You can also use a relative path to specify the subdirectory where the image is located:

<img  src="/static/imghwm/default1.png" data-src="images/image.jpg" class="lazy" alt="How to add pictures to html" >

In addition to the src and alt attributes, there are also some commonly used attributes that can be used to control the appearance and behavior of images, such as:

• width and height attributes: specify the width and height of the image respectively, Units can be pixels (px) or percentages (%).
• border attribute: Specify the border width of the image, the unit can be pixels (px).
• align attribute: Specifies the horizontal alignment of the image, the value can be left, right or center.
• title attribute: Specifies the prompt text displayed when the user hovers the mouse over the image.

For example, the following code can center a picture and specify the width, height and border at the same time:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="How to add pictures to html" >

2. Common picture formats

In web design, there are three commonly used image formats: JPEG, PNG and GIF.

JPEG (also known as JPG) is a lossy compression format commonly used to store photos and other real-life images. The compression quality of JPEG can be controlled by adjusting the compression ratio. The higher the compression ratio, the worse the image quality and the smaller the file size.

PNG (Portable Network Graphics) is a lossless compression format that can display transparency and higher color depth and is suitable for saving pixel-level graphics and icons. PNGs generally have larger file sizes than JPEGs, but have better quality.

GIF (Graphics Interchange Format) is a bitmap-based graphics format that supports animation and transparency, and can compress multiple pictures into one file. GIF is usually used to save small dynamic pictures, such as emojis and small animations.

When choosing an image format, you need to decide which format to use based on the type and purpose of the image. For example, when you need to save color gradients and rich details in the picture, you can use the JPEG format; and when you need to save transparency and higher quality, you can use the PNG format.

3. Optimize and quote images

In web design, optimizing and citing images is also very important. Optimizing images can reduce file size and make pages load faster. Here are some common optimization methods:

• Compress images: Reduce file size without affecting image quality.
• Crop the image: Keep only the required part of the image and reduce the file size.
• Caching images: Use browser cache to avoid downloading the same images repeatedly.
• Use CSS Sprites: Merge multiple small pictures into one large picture, use background positioning in CSS to display the required parts, and reduce the number of HTTP requests.

When quoting images, you need to pay attention to the following points:

• The image file path must be correct: if the path is wrong, the image cannot be loaded.
• Pictures should match the theme of the webpage: inappropriate pictures may make the webpage look cluttered.
• Don’t oversize images: Overly large images will increase page loading time.

There are many ways to reference images. For example, you can use relative URLs and absolute URLs, or you can use the base tag to specify the base URL. Here is some sample code:

Use relative URL:

<img  src="/static/imghwm/default1.png" data-src="../images/image.jpg" class="lazy" alt="How to add pictures to html" >

Use absolute URL:

<img  src="/static/imghwm/default1.png" data-src="https://example.com/image.jpg" class="lazy" alt="How to add pictures to html" >

Use base tag:

  


  <img  src="/static/imghwm/default1.png" data-src="images/image.jpg" class="lazy" alt="How to add pictures to html" >

Summary

In web design, pictures are a very important element. In order to correctly reference and optimize images, we need to understand the basic image tags and attributes in HTML, as well as choose the correct image format and optimization method. Only by mastering this knowledge can we design beautiful and efficient web pages.

The above is the detailed content of How to add pictures to html. For more information, please follow other related articles on the PHP Chinese website!