MENU
Image
Accepted graphic file formats include APNG (Animated PNG), BMP, GIF, ICO, JPEG (/JPG), PNG, SVG, TIFF (needs add-ons), and WebP (released by Google in 2010, not supported by the browser Safari).
| BMP | WebP | PNG | JPG | GIF | |
| Lossy compression | No | Yes | Yes | Yes | No |
| Lossless compression | No | Yes | Yes | Yes | Yes |
| Transparency | No | Yes | Yes | No | Yes |
| Animation | No | Yes | No | No | Yes |
(Tip 1: Use the Magic Wand Tool in Paint.NET 22378 to delete any regions meant to be transparent and save the file as a PNG.)
(Tip 2: A popular online graphic designing site is Canva 238 .)
(Tip 3: Visit the site imagecompressor.com 62442 to shrink the storage footprints of image files.)
(Tip 4: animated graphic files can be converted from other formats or groups of static files online, eg. https://www.aconvert.com/search.php 81221 )
<picture> contains zero or more <source> elements followed by one <img> element. This offers alternative image versions for different display scenarios, potentially saving bandwidth and loading times on smaller screens.
<source>used within <picture>, <audio> and <video>, specifies alternative files which the browser may choose from. The first <source> that fulfills the conditions gets chosen
....... src=URL, ignored for <picture>
...... srcset = {URL N{x|w}, }+ possible sources
...... sizes = {Media Condition}+
...... media= media_query; defines a condition, generally based on the size of the display window
...... type= MIME_type; defines a condition that requires the browser to support a particular format
<img> shows an image file.
...... src= URL,treated like a candidate in srcset (1x)
...... srcset = {URL N{x|w}, }+ other possible sources
...... decoding = {sync | async | auto} whether to load asynchronously in parallel with the rest of the content
...... loading = {eager | lazy} whether to load immediately regardless if it is outside the visible viewport
...... alt=text: meaning description / alternative text
...... height=pixels
...... width= pixels
...... sizes = {Media Condition}+ : the intended display size
...... ismap: server-side image map
...... usemap=mapname: client-side image map
...... crossorigin
...... referrerpolicy
‘logo.webp’ will be ignored if the browser does not support webp format or the viewport width is smaller than 2000px. (resize the browser window to change the viewport size)
‘logo.png’ will get chosen if the width of the viewport is between 1500px and 2000px.
If the viewport width is between 1200px and 1500px, ‘logo-768-1.5x.png’ will be chosen because the intended width, ie. 100vw (100% viewport width, or 1200px to 1500px), is bigger than 480px and 768px, but associated with the smallest pixel density descriptor bigger than 1, ie. 1.5x.
If the viewport width is between 900px and 1200px, ‘logo-480.png’ will get chosen because its width descriptor (480w) is the smallest one bigger than the intended width, 400px.
If the viewport width is smaller than 900px, ‘logo-320.png’ will be used.
The ‘sizes’ attribute in <img> will be ignored because it is not associated with any width descriptor in a ‘srcset’ attribute.
The larger the width pixel density descriptor (eg. 2x) or the width descriptor (eg. 480w), the smaller will be the displayed image, where: width descriptor * pixel density descriptor = original image width
‘logo.png’ will get chosen if the width of the viewport is between 1500px and 2000px.
If the viewport width is between 1200px and 1500px, ‘logo-768-1.5x.png’ will be chosen because the intended width, ie. 100vw (100% viewport width, or 1200px to 1500px), is bigger than 480px and 768px, but associated with the smallest pixel density descriptor bigger than 1, ie. 1.5x.
If the viewport width is between 900px and 1200px, ‘logo-480.png’ will get chosen because its width descriptor (480w) is the smallest one bigger than the intended width, 400px.
If the viewport width is smaller than 900px, ‘logo-320.png’ will be used.
The ‘sizes’ attribute in <img> will be ignored because it is not associated with any width descriptor in a ‘srcset’ attribute.
The larger the width pixel density descriptor (eg. 2x) or the width descriptor (eg. 480w), the smaller will be the displayed image, where: width descriptor * pixel density descriptor = original image width
See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.
<map>defines an image-map that splits an image into clickable sections with the <area> tags
.......name=text
<area>
defines a part on an image-map that can be clicked, used within <map>
....... alt= alternate_text
...... shape={rect| circle| poly}
...... coords= commas_ separated_coords _rect(x1,y1,x2,y2), _circle(x1,y1,rad), _poly(x1,y1,x2,y2,x3,y3)
...... download
...... ping=comma-separated list of URLs for tracking
...... referrerpolicy
{......href
......hreflang
......media
......rel
......target
......type } as in <a>.
<figure> can contain a <img> and a <figcaption> tags.
<figcaption> specifies a caption for <figure>, used within <figure>.
Include a ‘#’ when referencing an image map. Here a circular region is carved out of the planet image so that only the circle can be clicked to link to Google.
Additionally, a red dot is displayed using purely the base64-encoded data of a PNG image, instead of a file. An image can be base64-encoded at https://www.base64encode.org/ or with a <canvas> element.
Additionally, a red dot is displayed using purely the base64-encoded data of a PNG image, instead of a file. An image can be base64-encoded at https://www.base64encode.org/ or with a <canvas> element.
See the Pen Untitled by Web Coding Center (@webcodingcenter)on CodePen.