HTML - Image (Img tag)
Table of Contents
1 - About
The img element represents an image.
2 - Articles Related
3 - Example
<img
src="https://datacadamia.com/wiki/_media/resume/nico.jpg"
alt="nico"
height=50px
width=50px
/>
4 - Attributes
4.1 - src
src stands for “source” that have as value an url or a data scheme.
If the src value begins:
- with a slash ( / ), it will be relative to the domain name.
- without a slash, it will be relative to the page or to base href if defined. See HTML - Base (URL) element (to resolve relative one)
<base href="http://example.com">
Read more: https://html.com/attributes/img-src/#ixzz5J3gk4Sk1
4.2 - img role
See also the related ARIA img role. A container for a collection of elements that form an image. An img can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image.
4.3 - alt attribute
The alt attribute is an Alternate text that is shown when the image cannot be displayed (page read by a screen reader)
4.4 - Height and Width
4.5 - srcset
srcset permits to define responsive image
4.6 - Style
To overcome that the images overflow their container, you can use this rule
img, embed, object, video {
max-width: 100%;
}
5 - Security
5.1 - Port scan
The img element can be used in conjunction with some other features as a way to effect a port scan from the user's location on the Internet. This can expose local network topologies that the attacker would otherwise not be able to determine.
5.2 - 0x0 Fake
In CSRF attack, a 0x0 fake image can be used:
<img src="http://mybank.com/transfer?destinataire=nico&amount=100000" width="0" height="0" border="0">
6 - DOM Accessor
The document property document.images returns an HTMLCollection of the img elements in the Document.
7 - Responsive
8 - Placeholder Image
- http://holderjs.com/ (via javascript)
https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now
9 - Bank
10 - Loaded
You can check if an image was loaded by checking simply the width after the loaded event
10.1 - Lazy Loading
See Lazy loading
10.2 - Preloading
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
10.3 - Image loaded Event
Example:
- An image
<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">
- The script that we want to run after the image has loaded
lennaHasLoaded = function (){
console.log("Lenna has loaded");
}
10.4 - Image in a none displayed container will not load
- An image inside a display=none element will not be loaded.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
- The script that shows the width of the image. An image that has loaded, will have a width.
$(window).on("load", function() {
console.log("image none via div container was not loaded the width is 0. Width: " + $('#none_div').width());
console.log("image none via inline style width was loaded. Width is not null. Width: : " + $('#none_inline').width());
});
- The html
<div style="display: none;">
<img id="none_div" src="https://datacadamia.com/_media/favicon-32x32.png" >
</div>
<img id="none_inline" src="https://datacadamia.com/_media/favicon-32x32.png" style="display: none;" >
11 - Mask
With the mask property directly inside SVG
- Circle
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="circle">
<circle cx="50%" cy="50%" r="19%" fill="white" filter="url(#filter)"></circle>
</mask>
</defs>
<image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#circle)"></image>
</svg>
- Ellipse
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="200">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="ellipse">
<ellipse cx="50%" cy="60%" rx="20%" ry="25%" fill="white" filter="url(#filter)"></ellipse>
</mask>
</defs>
<image xlink:href="/_media/anne_frank_1934.jpg" width="170" height="200" mask="url(#ellipse)"></image>
</svg>