tags " /> Practice and precautions for labeling" />

This article details how to use the tag to embed external images in HTML pages, especially image links from the Content Distribution Network (CDN). We will demonstrate how to directly reference image URLs through actual cases, and explore common problems that may be encountered when using external images, performance optimization strategies, and best practices such as localized images, aiming to help developers display network image resources efficiently and stably.

1. Understand the tag and external image link

In HTML, the tag is the core element used to embed images in a web page. It is an empty tag, meaning it has no closed tag. Its most basic attribute is src (source), which specifies the URL of the image file.

 <img src="/static/imghw/default1.png" data-src="images/instagram_profile.jpg" class="lazy" alt="Image Description">

The image URL here can be a relative path (pointing to an image inside the project) or an absolute path (pointing to an external image on the network). For image links provided by social media platforms like Instagram, they are usually stored on a Content Distribution Network (CDN). These CDN links are usually URLs that point directly to the image file, so they can be used directly as the src attribute value of the tag.

For example, Instagram provides image links: https://scontent-dus1-1.cdnstagram.com/v/t51.2885-19/281440578_1088265838702675_6233856337905829714_n.jpg?stp=dst-jpg_s320x320&_nc_ht=scontent-dus1-1.cdn instagram.com&_nc_cat=1&_nc_ohc=h-rdLy5hFZwAX9TGYME&edm=AAuNW_gBAAAA&ccb=7-5&oh=00_AT_w7YGvusOUvMZr3vi2OQytijTeogbw-J74X1jSyzq9pw&oe=62A11F98&_nc_sid=498da5

Although this link looks long and contains many query parameters, it is a valid URL that points directly to the JPEG image file. Therefore, it can be embedded directly into the tag.

2. Practice: Embed external images in HTML

Embedding external image links into HTML pages is very straightforward. Just assign the full image URL to the src attribute of the tag.

Here is a sample code for embedding the above Instagram image into an HTML page:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embed external image example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        .image-container {
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            text-align: center;
        }
        img {
            max-width: 100%; /* Make sure the image is adaptable in the container*/
            height: auto; /* Keep the picture proportion*/
            display: block; /* Remove blank space at the bottom of the picture*/
            margin: 0 auto; /* center to display */
        }
        p {
            margin-top: 15px;
            font-size: 0.9em;
            color: #555;
        }
    </style>


    <div class="image-container">
        <img src="/static/imghw/default1.png" data-src="images/instagram_profile.jpg" class="lazy" alt="Instagram profile picture example">
        <p>Instagram images embedded by directly referencing CDN links. </p>
    </div>

In this example, we directly use the Instagram image URL as the value of the src attribute. The alt property provides an alternative text for the image, which is important for both accessibility (displaying text when the image cannot be loaded, or for use by screen readers) and SEO.

3. Best practices and precautions

Although it is convenient to embed external images directly, the following points need to be considered in actual projects:

3.1 Picture localization

For core or frequently used images, it is highly recommended to download and store them in your server or project local directory instead of directly referring to external links. advantage:

• Performance improvement: Reduce dependence on third-party servers, and the loading speed is more controllable.
• Reliability: Avoid the image being unable to be displayed due to external link failure, server failure or content policy changes.
• Security: Avoid potential cross-domain issues or content security policy (CSP) restrictions.
• Offline access: For applications such as Progressive Web Apps (PWAs), local images can better support offline access.

Example (local image): Suppose you save the image to the images folder in the root directory of the project, with the file name instagram_profile.jpg.

 <img src="/static/imghw/default1.png" data-src="images/instagram_profile.jpg" class="lazy" alt="local stored Instagram profile picture">

3.2 Performance optimization

• Image size optimization: Ensure the image file size is moderate. Too large images will significantly affect the page loading speed. You can use the picture compression tool, or adjust the image resolution according to the display needs.

• Responsive pictures: Use the srcset and sizes attributes to provide pictures of different sizes for different devices and screen densities, or use the element to provide pictures of different formats or crops based on media queries.

• Lazy Loading: For pictures located at the bottom of the page and users need to scroll to see, you can use the loading="lazy" attribute or JavaScript library to achieve lazy loading, and only load when the image is about to enter the viewport, improving the initial loading performance.

   <img src="/static/imghw/default1.png" data-src="path/to/image.jpg" class="lazy" alt="lazy loading picture" loading="lazy">

3.3 Error handling and user experience

• alt attribute: Always add meaningful alt attribute to the tag. When the image cannot be loaded, the browser will display alt text to improve the user experience.
• Image failed loading style: You can provide styles for failed loading images through CSS, such as displaying a placeholder icon or custom text to prompt the user that the image failed to load.

3.4 Copyright and Use Policy

When using external images, especially social media images, be sure to pay attention to copyright issues and platform usage policies. Unauthorized use of other people's pictures may involve infringement. Platforms such as Instagram usually have clear APIs and embedding rules, and crawling CDN links directly may not comply with their terms of service. In production environments, the use of officially provided APIs or embedding methods should be given priority.

Summarize

Embedding external images in HTML, especially images from CDN, can usually be implemented directly through the src attribute of the tag. However, in order to ensure the performance, reliability and compliance of the web page, it is recommended to localize the key images and combine them with responsive design and lazy loading optimization methods. At the same time, be sure to pay attention to the use policies of the image copyright and source platform to build robust and user-friendly web applications.

The above is the detailed content of Embed external images in HTML: Practice and precautions when using tags. For more information, please follow other related articles on the PHP Chinese website!