Images make websites more visually appealing and informative. In HTML, images are added using the <img> tag. Unlike other elements, <img> is self-closing and does not require a closing tag.
Basic Image Syntax
<img src="image.jpg" alt="Description of image">
Explanation
src(source) specifies the image file path.alt(alternative text) improves accessibility and SEO.
Adding External Images
You can use an image hosted on another website by providing the full URL.
<img src="https://example.com/image.jpg" alt="External image">
SEO Tip
Use descriptive alt text to improve search engine rankings.
Controlling Image Size
<img src="image.jpg" alt="Resized image" width="300" height="200">
Or use CSS for better responsiveness:
<style>
img {
width: 100%;
max-width: 500px;
height: auto;
}
</style>
Fun Fact
Before CSS, people used the width and height attributes to resize images (bad idea today!).
Making Clickable Images
Images can act as links using the <a> tag.
<a href="https://example.com">
<img src="image.jpg" alt="Clickable image">
</a>
Adding GIFs for Fun
GIFs can make content more engaging!
<img src="funny.gif" alt="Funny GIF">
Lazy Loading for Performance
Use loading="lazy" to delay image loading until needed.
<img src="image.jpg" alt="Lazy loaded image" loading="lazy">
Fun Fact
Lazy loading can improve page speed, especially on image-heavy websites.
Conclusion
Using images effectively in HTML enhances user experience. Optimize them for performance, SEO, and accessibility!
0 Comments