30 seconds per day ⏱ img mason

Introduction to the

< IMG >, SEO, cross-domain, accessible reading, events, image tags

The most direct association is the multiplication table, but it can also be used to describe a person who keeps small ideas and secrets in his mind. The little secret has been used by H1 little secret in this article, in order to reflect the “knowledgeable” of small two, I will change the word (in fact, I think the word head has exploded 💥).

Development of often used < IMG > to hide many things from you, in order to prevent qingqing grassland embarrassing incident with the incarnation of a detective to explore its secrets, to see how much it really!

The img tag is mainly discussed, but the optimization of lazy loading of images is not discussed here.

The Alt attribute

When xiao Er started to learn HTML, he could only use the SRC attribute of , and felt that the Alt attribute was not useful to write, occupying the position and looking uncomfortable. But the Alt attribute is not as simple as you might think.

placeholder

Why is the Alt attribute optional? The Alt attribute is only displayed when:

• Speed is too slow
• Disable images in browser
• Error in SRC attribute
• The image cannot be loaded due to network reasons
• The user uses a screen reader

But usually rarely encountered these situations are not high, so it did not feel the effect. Is the so-called lost, just know to cherish. Some students said: the mouse over the image will also show the content of the Alt attribute. I wrote a demo in Chrome and Safari, but it didn’t show up for a long time. I don’t know if browsers don’t support this anymore.

IE is the front end of the program 🐒 around the past a hurdle.

Later, I did not know that Internet Explorer would show it, and indeed IE was the only one in the browser. The other browser is based on the standard Alt attribute implementation, only when the image does not load. In addition to this IE in there are some unique performance, xiao Erbi is still around it.

SEO

The Alt attribute is also useful for SEO, although now the AI can figure out what’s inside the image. However, search engines are not so smart. When they understand what an image is, they will read the Alt attribute, and organize and save the information of this image with the title and description of the page. This is why you can get so many related pictures when you search keywords on Baidu and Google.

More SEO related knowledge can read SEO first experience and H1 Little secrets.

Special group

For blind people or other visually impaired people who may not be able to see the image, they can read the Alt attribute through screen readers and other assistive tools to understand the image content. Alt should not be used for all images, however, and should be left blank for decorative and nonsensical images to prevent specific groups from confusing the content of the page.

I hope you can put an Alt attribute on it because you can feel the content and the temperature of the image when you don’t feel the color and the beauty of the world. Isn’t it nice to think that your code is making the world a better place?

For more information about accessibility reading, you can read SECRETS of H1 Mason.

collapse

When browsing the web, images are often loaded suddenly, resulting in page flicker and image flash, which affects the experience. This is because the browser does not know how the image should be arranged or rendered before the image is loaded and the width and height are not set. You can solve this problem by using placeholder images or setting the width and height, or you can use libraries that are dedicated to placeholders.

See the browser rendering process for more information.

The event

Pictures have their own events:

However, these three events do not obtain the information about the return of the server. These three events can be used to:

• When the user gives up the image load and the image load fails, you can call the placeholder image to solve the problem of page layout.
• Placeholder images or animations can be displayed while images are loading, and placeholder related content can be closed when loading is successful.
• Re-request the image or give a hint if the image fails to load.

The relevant operation

DOM is obtained and generated using the Image object, and the crossOrigin attribute is used to allow cross-domain:

const urlToImgDOM = ({ url, alt = ' ' }) = > new Promise((reslove, reject) = > {
    let imgDOM = new Image();
    
    imgDOM.alt = alt;
    imgDOM.setAttribute("crossOrigin".'Anonymous');
    
    imgDOM.onload = () = > reslove(imgDOM);
    imgDOM.onerror = () = > reject(err);
    
    // If the image is in the browser cache
    // will not unless the onload function needs to be postloaded
    imgDOM.src = url;
})
Copy the code

Using DOM to generate canvas:

const imgDOMToCanvas = (imgDom) = > {
    // Create Canvas Canvas
    let canvas = document.createElement("canvas");
    canvas.width = imgDom.width;
    canvas.height = imgDom.height;
    
    // Draw a picture
    let ctx = canvas.getContext('2d');
    ctx.drawImage(imgDom, 0.0, canvas.width, canvas.height);

    return canvas;
}
Copy the code

Using Canvas to Base64, note that an error will occur if the image crosses the domain:

canvas.toDataURL()
Copy the code

SEO related content

• Little secret of H1 Mason
• At the beginning of SEO experience
• Img large
• A thousand miles of marriage
• Throw herself
• Rover rule

Grow up together

In the confused city, there is always a partner to grow up together.

• You can click on this if you want more people to see the articlegive a like.
• If you want to inspire your mistress thereGithubGive aLittle stars.
• If you want to communicate more with small two add wechatm353839115.

PushMeTop originally contributed to this article