HTML: Image Tag

By Xah Lee. Date: .

The image tag <img> is used to embed a image.

For example,

css is awesome mug

Code:

<img src="i/css_is_awesome_mug_2009-s342x183.jpg" alt="css is awesome mug" width="342" height="183" />

The most common image file formats supported by browsers are jpg png svg .

Attibutes

alt
Optional. A text description for the blind.
width
Optional. Width of image in pixels.
height
Optional. Height of image in pixels.
srcset
For alternate image file sources. New around 2017.

srcset attribute

The srcset attribute is for inline image that has multiple versions each with different size or image quality, for browser to chose a right one for user's device (for example, on home computer with huge screen or on mobile phone with tiny screen). It is invented sometimes around 2015.

Value is list of items, separated by comma, each is of the form:

path density_or_width

The density_or_width is optional.

density_or_width is either a “density”, of the form 1x, 2x, 3x, etc., or a width such as 800w, 1000w, 2000w .

example:

<img src="cat.jpg"
srcset="
cat_small.jpg 1x,
cat_mid.png 2x,
cat_big.png 3x"
alt="cat">

See also: HTML: Picture Tag

JS in Depth
XAH
Buy Xah JavaScript Tutorial

HTML Basics

HTML Table

Misc

HTML4 Frameset