Images in HTML support several attributes that control how they are displayed and described.
Using image attributes correctly improves accessibility, layout control, and website performance.
The width and height Attributes
The width and height attributes define the size of an image on the webpage.
Specifying image dimensions helps the browser reserve space and prevents layout shifts while loading.
In this example:
- width sets the image width in pixels
- height sets the image height in pixels
- The browser displays the image within the given dimensions
The alt Attribute Revisited
The alt attribute provides alternative text if the image fails to load.
It is also used by screen readers and search engines, making it essential for accessibility and SEO.
Good alt text should describe the image clearly and briefly.
Avoid using vague text like "image" or "photo". Always describe what the image represents.
The title Attribute
The title attribute provides additional information when users hover over the image.
This attribute is optional and should not replace the alt attribute.
Image Performance Best Practices
- Use optimized image sizes
- Choose correct image formats
- Avoid using very large images
- Use descriptive file names
Organizing Image Files
Store images in a dedicated folder such as images or assets.
Good folder organization makes projects easier to manage and maintain.
Why Image Best Practices Matter for Jobs
Employers expect developers to handle images responsibly to ensure fast-loading websites and accessibility compliance.
Proper image usage reflects professional frontend development skills.
Practice Task
Add an image with width, height, alt, and title attributes. Optimize the image size and place it inside an images folder.
What You Will Learn Next
In the next lesson, you will learn how to create unordered lists using HTML.