Excerpt
The HTML
tag and attributes like src, alt, width, and height allow embedding images in web pages. Optimization around hosting, responsiveness, and accessibility improves performance.
Adding images to web pages is a common task in HTML. There are several ways to include images, optimize them, and make them accessible. In this post we’ll look at the essential tags, attributes, and techniques for embedding images in HTML.
Image File Formats
The first choice when adding images is which file format to use. Common options include:
JPEG - Best for complex images like photos. Supports millions of colors. Lossy compression makes files smaller.
PNG - Good for images with solid blocks of color and transparency. Lossless compression.
GIF - Can create simple animated images. Limited to 256 colors.
Each format has advantages based on image type and needs.
The Image Tag
The tag is used to embed an image in an HTML document. The key attributes are:
src - The image file path or URL. Required.
alt - Alternate text describing the image. Required for accessibility.
width - Width of image display size in pixels.
height - Height of image display size in pixels.
For example:
1<img src="image.jpg" alt="Description of image" width="400" height="300" />
The src can be a relative file path like /images/image.jpg or full URL.
Image File Paths
When providing the image source, you have two main options:
Relative path - Points to a file relative to the current page, like /images/image.jpg.
Absolute URL - Points to a full URL like https://example.com/images/image.jpg.
Generally relative paths are used for images hosted on the same server as the HTML page.
Hosting Images
There are a few common options for hosting images:
Same server - Store images on the same server as the HTML and reference using relative paths.
External hosting - Store images on an image hosting service like Imgur and reference the full URLs.
CDN - Use a content delivery network to distribute images globally.
For small sites, hosting on the same server is simplest. Larger sites often use CDNs to optimize performance.
Figure and Figure Caption
For images that benefit from a caption, the <figure> element can be used:
1<figure>
2 <img src="image.jpg" alt="Description" />
3 <figcaption>A caption for the image</figcaption>
4</figure>
The
Responsive Images
There are several ways to make images responsive for different device sizes and resolutions:
srcset - Provides multiple image files that browsers can choose between.
sizes - Specifies image display widths for different breakpoints.
- Allows providing multiple image sources with <source>elements.Art direction - Different image cropping and selection based on breakpoints.
Responsive images help deliver optimized assets in different scenarios.
Accessibility
Images should have descriptive alt text to convey meaning for users relying on screen readers.
For images that are purely decorative and contain no meaningful information, the alt text should simply be empty (alt="").
Optimizing Images
Some tips for optimizing images:
Compression - Reduce file size through tools like Photoshop.
Image optimization - Use tools like ImageOptim to further compress images.
Rendering performance - Avoid very large images, use responsive images, lazy load below the fold.
Optimized and properly sized images load faster and cost less to store and transfer.
Summary
The HTML <img> tag along with attributes like src, alt, width, and height provide the fundamental way to embed images in web pages. Additional optimizations around image formats, responsive sizing, hosting, loading, and accessibility help ensure images are fast, efficient, and usable across devices. Careful management of images goes a long way in overall web performance.
