How to add pictures to html

To add an image to an HTML page, just perform four steps: get the image file, upload it to the website server, get the image URL, and then insert this code in the HTML code:

How to add images to HTML pages

Step 1: Get Picture File

Find the file you want to use as a picture and save it to a folder on your computer. Make sure the image's file format is HTML-compatible, such as JPG, PNG, or GIF.

Step 2: Upload the image file to the website server

Use File Transfer Protocol (FTP) or File Manager to upload the image file to the website server. Create a folder for pictures on the server to manage and organize them.

Step 3: Get the URL of the image

After uploading the image, copy its URL. The URL usually looks like this:

<code>http://www.example.com/images/my-image.jpg</code>

Step 4: Insert the image in the HTML code

Insert the following code in the HTML code where you want to place the image:

<img src="/static/imghwm/default1.png"  data-src="URL_OF_IMAGE"  class="lazy" alt="IMAGE_DESCRIPTION">

Among them:

• src The attribute specifies the URL of the image.
• alt The attribute provides the alternative text of the image, which is displayed when the image cannot be loaded.

Example:

To add an image named "my-image.jpg" to an HTML named "my-page.html" On the page, the code will look like this:

<img src="/static/imghwm/default1.png"  data-src="http://www.example.com/images/my-image.jpg"  class="lazy" alt="My Image">

Tip:

• Optimize images to reduce loading time.
• Use CSS styles to control the appearance and position of images.
• Consider using an image compression tool to reduce image size.

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!