My Web Training

Why Images Matter

Images can make a website more engaging, informative, and memorable. Whether you're showing off a product, reinforcing your brand, or illustrating a concept, visual content can help your visitors understand and connect with your message. But to be effective, images must be added properly and responsibly.

Image Basics

<img>

Displays an image on the page. It does not require a closing tag.

src

The source file path of the image.

alt

Text that describes the image for users who can’t see it.

<img src="images/dog.gif" alt="Cute, happy dog">

Acceptable Image Formats

Filenames must include the correct extension like .jpg, .png, or .webp. If your image doesn’t load, double-check spelling and case sensitivity.

• GIF – Best for logos, cartoons, and solid colors
• JPG – Best for photographs and detailed images
• PNG – Good for transparency and high-quality graphics
• SVG – Ideal for scalable vector illustrations
• WebP – Modern format with excellent compression and quality; ideal for the web

File Management Tips

Use clear, descriptive filenames like golden-retriever.jpg instead of IMG_3249.jpg. This improves organization, accessibility, and search visibility.

File names are case-sensitive on most servers. Dog.jpg and dog.jpg are treated as different files.

Images must be stored inside your website folder. The src path should correctly reflect the file’s location relative to the HTML file.

💡 Tip: Create a dedicated images folder within your project directory to help organize your files.

<img src="dog.jpg">                <!-- same folder -->
<img src="images/dog.jpg">         <!-- in 'images' folder -->
<img src="../images/dog.jpg">      <!-- one folder up -->

Improving Accessibility

Adding alt text improves accessibility for users with screen readers and ensures your page still conveys meaning if the image fails to load. You should consider this a requirement for all images — except for those that are purely decorative and provide no meaningful content.

<img src="dog.jpg" alt="A happy dog">

• Required for accessibility and SEO
• Should be descriptive but concise
• Use W3 image guidelines for best practices
• If an image is purely decorative and adds no informational value, you can set alt="" to hide it from screen readers.

Image Optimization & Sizing

Before you upload any images to your project, you should optimize them for web performance and layout accuracy. Large images can slow down your site, create layout problems, and frustrate users. In most cases, you'll want to create smaller, “right-sized” versions of your original files for each specific layout need.

You can optimize images using built-in editors (like Photos on Windows or Preview on Mac), professional tools (like Photoshop), or free browser-based tools like PhotoPea. These tools let you resize, crop, and adjust quality before saving your image for the web.

💡 Pro Tip: Always keep the original, high-resolution image saved. You can easily crop or scale a large image down to fit your layout — but scaling a small image up will make it blurry or pixelated.

Reduce Dimensions

Use an image editor to resize or crop your image to the size you need. Large images can slow down your site and affect page layout. You can use built-in tools like Photos (Windows), Preview (Mac), PhotoPea, or Photoshop to resize and export for the web.

Keep in mind that image resolution (also called pixel density) affects how sharp your image looks on high-resolution screens. For key visuals like logos or banners, you may want to use a slightly larger version to preserve sharpness.

Adjust Save Quality

When exporting or saving your image, choose a quality level that keeps the file small without making the image look blurry. A quality setting between 60–80% is usually a good balance for web images.

Use the Right Size for the Right Job

Don't just shrink large images in HTML — use different versions with dimensions that match the layout area. For example:

• original-image-name.jpg — full-size original image (not recommended for in-page use)
• original-image-name-lg.jpg — ~1000px wide for banners or full-width images
• original-image-name-md.jpg — ~600px wide for main content
• original-image-name-sm.jpg — ~300px wide for float-left/right sections
• original-image-name-thumb.jpg — under 200px for previews or galleries

💡 Tip: These sizes are general guidelines. You can adjust them based on your layout and how much space the image needs on the page.

Reuse Across Pages

Shared image files can be cached by the browser, speeding up your site on repeat visits.

Limit Colors and Gradients

Fewer colors often result in smaller file sizes, especially for PNGs and GIFs.

Use WebP for Modern Browsers

WebP offers smaller file sizes with similar or better quality than PNG or JPG. Use a fallback format for older browser support.

Constrain Image Size with CSS

To keep your layout clean and responsive, you should control how large your images can appear using CSS.

max-width

Prevents an image from exceeding a certain width. A value of 100% ensures the image never overflows its container.

height

Optional. Set a specific height if needed, but avoid stretching or distorting the image. Use auto to preserve aspect ratio.

img {
  max-width: 100%;
  height: auto;
}

💡 Pro Tip: max-width: 100% tells the browser: “Don't let this image grow bigger than its container.” It won't stretch a small image — it only scales large images down if needed. This makes it a great tool for keeping your layout flexible while still protecting image quality.

This rule ensures your images scale properly on smaller screens, keeping your site layout intact. Avoid setting large fixed widths unless the image is used for decoration only.

Optional Attributes

width and height

Define the display size of the image in pixels. Set only if needed for layout speed.

<img src="dog.jpg" alt="Happy Dog" width="200" height="200">

💡 Tip: Resizing large images in HTML does not reduce file size. Optimize before uploading.

Embellishing Images

Adding Captions with <figure>

The <figure> element semantically groups an image with its caption, helping screen readers and search engines understand the relationship between the image and its description. This is useful whenever an image adds meaning to your content.

<figure>
  <img src="space.jpg" alt="Raining stars">
  <figcaption>Raining Stars from Space</figcaption>
</figure>

Using <picture> for Responsive Images

If you want to serve different image formats (like WebP for smaller file size) or use different images at different screen widths, use the <picture> element. It allows the browser to choose the best image source based on device support and screen size.

<picture>
  <source srcset="space.webp" type="image/webp">
  <img src="space.jpg" alt="Stars in space">
</picture>

Combining <picture> with <figure>

You can wrap a <picture> inside a <figure> if you want to provide responsive images along with a caption:

<figure>
  <picture>
    <source srcset="space.webp" type="image/webp">
    <img src="space.jpg" alt="Stars in space">
  </picture>
  <figcaption>Stars in space, shown using a responsive image format</figcaption>
</figure>

Linking to Full-Size Images (Optional)

If you want users to click and view a full-size version, wrap your smaller image in a link like this:

<a href="original-lg.jpg">
  <img src="original-sm.jpg" alt="Description of image">
</a>

Finding and Using Images

• Generate original images using AI tools like DALL·E, Adobe Firefly, or Canva's text-to-image. Make sure you have rights to use and modify the generated content.
• Take your own photos or scan drawings
• Use free sources like freeimages.com
• Search Google Images with proper usage rights

Always make sure you have permission to use any image you didn’t create. Free image sites and AI tools often have license terms—read them before using.

Using Google Images

1. Search for your topic on Google Images
2. Click Tools > Usage Rights
3. Select “Creative Commons licenses” to find usable images

Adding a Favicon

What is a favicon?

A tiny icon shown in the browser tab, usually 16x16 pixels.

How to add it:

Save as favicon.ico in your root folder and link it in the head:

<link rel="shortcut icon" href="favicon.ico">

Use favicon-generator.org if needed.

Summary / Takeaways

Images add power and clarity to your web pages—but they also come with responsibilities. Use accessible formats, include proper alt text, optimize your files for speed, and always respect copyright. When used wisely, images make your site more usable, expressive, and professional.

Key Terms

<img>

HTML tag that displays an image.

alt

Descriptive text used for accessibility and fallback.

Favicon

A small browser tab icon associated with a website.

Thumbnail

A smaller version of an image used to improve load speed and layout.

WebP

A modern image format that provides superior compression and quality.

Additional Resources

• MDN: <img> Element
• W3Schools: HTML Images
• W3: Writing Good Alt Text