Media Best Practices

Introduction

Images can make a website clearer, more welcoming, and more useful. A product photo can show what words cannot, and a diagram can explain an idea quickly. However, adding an image is more than choosing a picture and typing an image tag. Good developers also think about file type, accessibility, loading speed, and organization.

In this lesson, you will practice three media best practices: choosing an appropriate image format, writing useful alt text, and storing media files in a predictable folder. These habits will help your websites work better for more people and remain easier to update.

1. Choose a suitable image format

An image format is the way image data is stored in a file. The format affects quality, file size, and whether the image can have a transparent background.

• JPEG or JPG: A good choice for photographs with many colors. JPEG files are usually smaller, but repeated saving can reduce quality. JPEG does not support transparency.
• PNG: Useful for screenshots, logos, icons, and images that need transparency or sharp edges. PNG files can be larger than JPEG files.
• GIF: Supports simple animation and a limited color range. It is not usually the best choice for photographs.
• SVG: A text-based format that works especially well for simple logos, icons, and diagrams. It can scale to different sizes without becoming blurry. Only use SVG files from trusted sources.
• WebP: A modern format that often provides good quality with a smaller file size. Browser support is now broad, but check your project requirements before using it.

A practical rule is: use JPEG or WebP for photographs, PNG or SVG for graphics with sharp lines or transparency, and GIF only when simple animation is needed. Also resize very large images before adding them to a page. A picture that is displayed at 600 pixels wide usually does not need to be several thousand pixels wide.

2. Write useful alternative text

Alternative text, or alt text, describes an image in HTML. Screen readers can read it aloud, and browsers may show it when an image cannot load. Good alt text communicates the image's purpose, not every tiny visual detail.

For example:

<img src="images/community-garden.jpg" alt="Volunteers planting vegetables in a community garden">

The description tells a visitor what matters: people are planting vegetables, and the setting is a community garden.

Keep these guidelines in mind:

• Describe the important subject and action.
• Be specific, but keep the text reasonably short.
• Do not begin with “image of” or “picture of.” A screen reader already identifies it as an image.
• Do not repeat nearby text that already explains the same information.
• For a decorative image that adds no information, use an empty alt value: alt="".

Alt text should match the image's purpose in the page. The same photograph might need different descriptions in different contexts. If a photo appears beside a story about volunteers, “Volunteers planting vegetables in a community garden” is more useful than “People outdoors.”

3. Organize media files

Small projects become easier to manage when files have a clear structure. A common beginner-friendly arrangement is:

my-site/
  index.html
  about.html
  images/
    logo.svg
    community-garden.jpg
    garden-map.png

Use a folder such as images or media for visual files. Use lowercase names with hyphens, such as garden-map.png. Avoid spaces, capital letters, and unclear names such as IMG_2048.jpg. Clear names help you find files and avoid broken paths.

When the image is inside the images folder and the HTML file is one level above it, the path is images/community-garden.jpg. The path must match the actual folder and filename exactly.

Worked example

Imagine a page for a community garden. The page includes a volunteer photograph and a simple garden map. The photograph is best saved as a compressed JPEG or WebP because it contains many colors. The map may be better as PNG or SVG because it contains labels and sharp lines.

<h1>Visit Our Community Garden</h1>
<p>Volunteers meet every Saturday morning.</p>
<img src="images/volunteers.jpg" alt="Volunteers planting vegetables in raised garden beds">
<img src="images/garden-map.png" alt="Map showing the garden entrance, tool shed, and raised beds">

The filenames explain what the files contain, the paths show where they are stored, and the alt text gives visitors useful information if they cannot see the images.

Guided activity: improve a media section

1. Create an images folder inside your website project.
2. Choose one photograph and one graphic for a pretend “Local Club” or “Favorite Hobby” page. Rename them using lowercase words and hyphens.
3. Decide which format fits each file. Write one sentence explaining each choice.
4. Add both files to an HTML page using the img element, a correct src path, and useful alt text.
5. Open the page in a browser. Check that both images appear.
6. Temporarily change one filename in the HTML. Notice what happens, then restore the correct path.
7. Read your alt text aloud. Ask: would someone understand the image's important purpose without seeing it?

Suggested starting point

<h2>About Our Club</h2>
<img src="images/club-photo.jpg" alt="Club members building a small robot together">
<img src="images/robot-diagram.png" alt="Diagram labeling the robot's sensor, wheels, and battery">

Common mistake

Mistake: Using vague alt text such as alt="photo", or leaving out the alt attribute completely.

Fix: Describe what the image communicates in this page's context. If the image is only decoration, keep the attribute but make its value empty: alt="". Also remember that an incorrect file path can prevent the image from loading, even when the HTML looks correct.

Independent challenge

Create a small “Weekend Event” media section with one photograph and one graphic. Organize both files in an images folder, choose an appropriate format for each, and write meaningful alt text. Then review your work using this checklist:

• Are the filenames lowercase, descriptive, and easy to read?
• Does each format fit the kind of image?
• Does every informative image have useful alt text?
• Does every decorative image use alt=""?
• Do all image paths match the folders and filenames exactly?

Strong media habits make a website more accessible, faster to use, and easier to maintain. You do not need perfect design skills to begin—clear choices and careful organization are already professional practices.