How to add images

Add an image

The src identifies the image and alt supplies a text alternative.

<img src="/images/red-panda.jpg"
     alt="A red panda resting on a tree branch"
     width="800" height="533">

Write the right alt text

• Describe the purpose in the current context, not every visual detail
• Do not begin with “image of” unless the medium matters
• Use alt="" for a purely decorative image
• Do not omit alt; omission and an intentionally empty value mean different things

Improve performance

Resize and compress files before publishing. Modern formats such as WebP and AVIF can reduce transfer size. Width and height attributes reserve space and reduce layout movement.

<img src="/images/campus.webp" alt="Students entering the library"
     width="1200" height="675" loading="lazy">

Use the right tool

Use CSS backgrounds for decorative imagery and img for meaningful content. Do not put important text only inside an image; real text scales, translates, and works better with assistive technology.