HTML Images

Example

<img src="images/course-cover.webp"
     alt="HTML Mastery course cover"
     width="1200"
     height="675"
     loading="lazy">

Use accurate dimensions that reflect the source image's aspect ratio. If the image is intentionally cropped, ensure the reserved dimensions reflect the intended presentation.

14. Image Security and Reliability

Images may be served from your own website or from external domains. External image hosting introduces additional availability, privacy and performance considerations.

Use trusted image sources.
Verify that the resource can be loaded over the page's supported security scheme.
Avoid relying on third-party images that may disappear or change without notice.
Use an appropriate Content Security Policy when your application needs to restrict image sources.
Do not assume that hiding an image or using alt text validates the safety of its source.
Test image behavior when resources are missing or blocked.

Browsers generally block insecure active or passive resource requests in many HTTPS contexts according to mixed-content rules. Use secure image URLs on secure websites.

15. Common Image Mistakes

Mistake 1: Missing Alternative Text

<img src="images/product.jpg">

For informative images, provide suitable alt text. For decorative images, use alt="". The correct choice depends on the image's purpose.

Mistake 2: Incorrect File Path

<img src="image/product.jpg"
     alt="Product">

If the actual directory is named images rather than image, the browser may be unable to find the file. Verify the path and filename.

Mistake 3: Distorted Images

<img src="images/landscape.jpg"
     alt="Mountain landscape"
     width="200"
     height="600">

These dimensions may distort an image whose source aspect ratio is different. Preserve the aspect ratio or intentionally crop the image.

Mistake 4: Using Lazy Loading for Every Image

Lazy loading every image, including a prominent above-the-fold image, may delay important visual content. Apply loading strategies according to the image's position and importance.

Mistake 5: Choosing a Format Without Considering Its Purpose

JPEG may work well for photographs, while PNG may be better for certain transparent graphics. WebP and AVIF can offer efficient delivery. Choose based on actual visual quality, file size and browser support requirements.

Mistake 6: Repeating Captions in Alt Text

If a caption already provides the same information, avoid unnecessarily repeating it in the alternative text. Decide what information users need from the image in the context of the page.