Adding Images to the Website

1. Image file formats on the web

Images on websites are saved using specific file formats that control quality, size, and transparency, which directly affects how fast a page loads and how clear images appear. Choosing the wrong format can slow down a site or make images look blurrybecause browsers must download larger files than necessary.

Web image formats are designed to balance visual quality with file size. Smaller file sizes are important because every image must be downloaded by the browser before it can be shown.

  1. Think about a website you use often.
  2. Identify at least one image you see on that site.
  3. Explain why slow-loading images would be a problem.

2. What JPEG images are used for

JPEG images are commonly used for photographs and detailed imagesthat include many colours and gradients. They use compression to reduce file size, which makes them faster to load on the web.

JPEG compression removes small details that are hard to notice, which is acceptable for photos but not for sharp graphics. If a JPEG is compressed too much, it can appear blurry or blocky.

  1. Locate a photograph on your computer.
  2. Check if the file extension is .jpg or .jpeg.
  3. Explain why JPEG is suitable for that image.

3. What PNG images are used for

PNG images are used for graphics, icons, and images with sharp edges. They support transparency, allowing backgrounds to show through the imagewithout visible boxes.

PNG files are usually larger than JPEG files. This makes them less suitable for large photographs but ideal for logos and interface elements.

  1. Find an icon or logo image.
  2. Check if it uses a .png file extension.
  3. Explain why transparency might be useful for that image.

4. Adding images to your project

Images used by a website must be saved inside the project folder. Keeping images in a dedicated images folder helps prevent broken links and confusion.

File names should be simple and consistent to avoid errors. Spaces and capital letters can cause problems when linking images in HTML.

  1. Create a folder called images in your project.
  2. Add image files for Tokyo, Osaka, Hiroshima, and Matsuyama.
  3. Rename files using lowercase letters and no spaces.

5. Adding images to HTML pages

Images are added to a webpage using the <img> tag. The src attribute tells the browser where to find the image file.

The alt attribute provides text if the image cannot load. This also improves accessibility for screen readers.

  1. Open one of your city HTML pages.
  2. Add an <img> tag that links to the correct image.
  3. Include a clear alt description.
 
<img src="images/tokyo.jpg" alt="Tokyo skyline at night">

6. Adding images to all four city pages

Each city page should include an image that matches its content. Using consistent image placement makes the site feel organised.

Images should be relevant to the page topic. Random or repeated images can confuse users.

  1. Add a Tokyo image to tokyo.html.
  2. Add an Osaka image to osaka.html.
  3. Add images to hiroshima.html and matsuyama.html.

7. What divs are and why they are used

A <div> is a container used to group related content. It has no visual effect by itself but is used for layout and styling.

Divs help organise complex pages into logical sections. Without divs, controlling layout with CSS becomes difficult.

  1. Add a <div> around the image on one page.
  2. Check that the page still displays correctly.

8. What classes are and how they work

A class is a label added to an HTML element using the class attribute. Classes allow CSS to target multiple elements at once.

Using classes avoids repeating CSS rules for individual elements. This makes styles easier to update and maintain.

  1. Add a class name to the image container div.
  2. Use the same class on images across different pages.
 
<div class="city-images">
  <img src="images/osaka.jpg" alt="Osaka city">
</div>

9. Creating CSS for a class

CSS rules are written to target class names using a dot prefix. This tells the browser which elements should receive the style.

Separating CSS from HTML keeps structure and design independent. This reduces mistakes and improves readability.

  1. Open your style.css file.
  2. Create a rule for the image container class.
 
.city-images {
  margin: 20px 0;
}

10. Using flexbox to position images

Flexbox is a CSS layout system used to arrange elements in rows or columns. It simplifies alignment and spacing compared to older layout methods.

Applying flexbox to a div affects all child elements inside it. This makes it ideal for positioning multiple images consistently.

  1. Add flexbox properties to the image container class.
  2. Refresh the browser and observe the layout change.
 
.city-images {
  display: flex;
  gap: 16px;
}