Images

Images on the Web

Most images on websites are saved in the GIF (.gif), PNG (.png, pronounced as "ping"), or JPEG (.jpg, .jpeg) file formats, as these are the formats most widely supported in browsers. More recently, WEBP (.webp) has grown in use, as the browsers that lack support have decreased in usage.
All of these formats compress the image using different algorithms, in order to reduce file sizes.
GIF (Graphics Interchange Format) is limited in the number of colors it can display (only up to 8-bit, which is 256 colors) and has limited animation and transparency options; it tends to work best (file sizes are most efficient) when images have few colors and large solid areas of color.
JPEG (Joint Photographic Experts Group; often written as JPG) can display significantly more colors (up to 24-bit, which is 16,777,216 colors) than GIF and its compression works best with complex images, so this format is typically used for photographs and other images that have significant numbers of colors as well as gradations. The degree of compression can also be set, which impacts file size and image quality significantly. JPG format does not support transparency or animation.
PNG (Portable Network Graphics) was introduced as an alternative to GIF, due to concerns about licensing fees for the compression algorithm used in GIF. PNG can support a lot more colors than GIF (up to 24-bit, like JPG) and also has more advanced transparency options, as well as support for cross-platform gamma (lightness / darkness) correction. 8-bit PNG files are often smaller than GIF files. PNG has no support for animation.
WEBP, the most recent option, can be superior to JPEG and PNG, offering the same visual characteristics / features at a smaller file size.
Be careful not to resize images saved in these formats to a larger size (either in an imaging program or in your code); the results will not be attractive because the program is having to guess at what colors to use.
Also note that larger dimensions will result in larger file sizes, because these formats are not based on vectors (mathematical formulas).
To reduce file size it is recommended that you use a tool such as kraken to strip away unneeded information and achieve the smallest file size possible.
Some browsers support other image formats, but that support is not broad enough to recommend using those formats.
Browsers that lack support for the image format usually prompt you to download the image, since the browser does not know what to do with the file.

The `<img />` Tag

Images render as inline elements by default and are coded with the <img /> tag, which has no closing tag and therefore is self-terminated.
The <img /> tag is most often a reference to an external graphic, telling it where to appear in the web page.
It is possible to load other graphical files, such as a PDF, using <img />. The limitation is that only the first page of the PDF is shown and the user cannot interact with the PDF (it is a static display). Linking that image to the full PDF would be the best approach.
<img /> can also accept a Data URI for its src, which is the MIME type for the image followed by the base64-encoded image data. This data string can become quite lengthy, so this works best for small logos and icons.

Attribute	Usage and Effect	Values	Deprecated?
align	Used to horizontally move the image (text then wraps around the edge of the image) or to vertically align text relative to the image. Unfortunately, it only accepts one value (defaulting to `bottom`) and it is trying to handle both horizontal and vertical. Once you set a horizontal value (left or right), the vertical alignment shifts to the top.	`bottom` `left` `middle` `right` `top`	Deprecated
alt	This is a required attribute and is essential for accessibility, as the alt attribute's value is read/output by assistive technology such as screen readers and braille output devices. The alt content will display when images are disabled in the browser or when images fail to load for some reason (e.g., a broken path to the image, or the image is in an email and the email client is blocking file display). If the image has no meaning to the user (it is for decoration only) or is used for formatting (such as a block of color), indicate `alt=""` so that assistive technology skips over it. If you omit the attribute the file name is read/output and that is not a good idea (most file names are lacking in descriptiveness).	Text	Not deprecated
border	If an image is linked (surrounded by `<a></a>` tags), a blue border will appear around the image in some browsers. This attribute determines how thick that border is, ranging from `0` (no border) to a number greater than zero that represents the border width in pixels. Unlinked images with borders greater than `0` tend to render that border as black.	Number of pixels, but without sizing unit (e.g., `2`)	Deprecated
height	Always specify a height so that images render just once. If the height is omitted the browser needs an extra pass before determining the correct dimensions (thus causing the image redraw). In almost all cases you should use the actual height of the graphic for the value; while you could specify a larger or smaller height to scale the image this will usually cause distortion because the aspect ratio is off.	Number of pixels, but without sizing unit (e.g., `250`)	Not deprecated
hspace	Horizontal space - the number of pixels on the left and right sides of the image. Other content will not move into that space.	Number of pixels, but without sizing unit (e.g., `10`)	Deprecated
loading	Specifying `loading="lazy"` means the images will not be retrieved until the user scrolls to a point where the image is nearly in view. This speeds up load times for long, image-heavy pages.	`lazy`	Not deprecated
src	This required attribute provides the file path or an inline Data URI. Without this attribute, the `<img />` tag could not work properly.	Path to image or Data URI	Not deprecated
vspace	Vertical space - the number of pixels on the top and bottom sides of the image. Other content will not move into that space.	Number of pixels, but without sizing unit (e.g., `10`)	Deprecated
width	Always specify a width so that images render just once. If the width is omitted the browser needs an extra pass before determining the correct dimensions (thus causing the image redraw). In almost all cases you should use the actual width of the graphic for the value; while you could specify a larger or smaller width to scale the image this will usually cause distortion because the aspect ratio is off.	Number of pixels, but without sizing unit (e.g., `400`)	Not deprecated

Images Example 1: Alignment and Space Defaults

See the Pen Images 1 by Jason Withrow (@jwithrow) on CodePen.

Images and Text Layout

The align attribute becomes useful when text wraps around the image, but keep in mind that you cannot combine top/middle/bottom with left/right, since that attribute only accepts one value.
Specifying a left or right alignment will also cause the default vertical alignment to switch from bottom to top for content.
The hspace and vspace attributes can also be helpful for putting some space between the text and the image. The limitation of hspace and vspace is that they affect both the top/bottom and left/right sides, respectively. There is no way to specify just space on the top or just space on the right side of the image using attributes. CSS gives us more control over this spacing.
It also becomes very helpful to use <br clear="all" /> to prevent layout problems for content below the aligned image.
You will probably find that it takes some trial and error to arrive at the desired layout. Plus there will always be variability in how the text wraps around the image, based on font used and font size, as well as browser window size and resolution.

Images Example 2: align and hspace Attributes

See the Pen Images 2 by Jason Withrow (@jwithrow) on CodePen.

Images Example 3: align, hspace, and vspace Attributes

See the Pen Images 3 by Jason Withrow (@jwithrow) on CodePen.

Images Example 4: align, border, hspace, and vspace Attributes

See the Pen Images 4 by Jason Withrow (@jwithrow) on CodePen.

Recommendations and Considerations

Be mindful of copyright when dealing with images. It is our professional, ethical, and legal responsibility to only use:
- Images where you own the copyright (for example, pictures or art you have created)
- Images in the public domain (these images can be freely used; consult Wikipedia or a site such as BurningWell.org)
- Images under some sort of licensing system (where you are meeting the licensing obligations, which could be as simple as citing the author/creator of the image). A website like MorgueFile is a good option, as their license is very flexible.
- Images you have purchased (perhaps online at a website such as Getty Images)
Quality images matter. Avoid clip art, ASCII art, and low-quality images.
At a minimum, always specify src, height, width, and an appropriate alt attribute value. If you are comfortable with CSS, the height and width can be set with those properties (and the properties override the HTML attributes).
Think carefully about the alt attribute value. In some cases alt="" is appropriate and should be used; in other cases you should provide meaningful text. Ask yourself what text would be helpful to hear aloud or have output in some other fashion (such as braille) to someone experiencing the site in a non-visual fashion. If the image is purely for spacing or decoration, then alt="" is appropriate.
If an image cannot be found, some browsers will leave a placeholder for it, while other browsers render the layout as if the image was not there.
Images must always be transferred as binary when you put them on a server. Never assume that the image arrived properly or that the src is correct - always double-check that it is rendering.