Working with Images in HTML and CSS | Web Design & Development Tutorials

About bitmap and vector images

Two different types of images can be displayed in web pages:

Bitmap images: These are made up of tiny dots. The more dots per screen area, the higher the resolution of the image. Resizing bitmap images produces a ‘pixellated’ effect with the result that image quality is degraded: the image becomes blurry and the edges around shapes can appear jagged. Bitmap images can be created and edited with applications such as Adobe Photoshop, Gimp, Microsoft Paint or Apple Paintbrush.
Vector images: These contain mathematical formulas that create lines, curves and other shapes. A vector image can be smoothly scaled up or down, so the result is just as sharp as the original. Vector images can be created and edited with applications such as Adobe Illustrator and Inkscape.

The illustration below is from Bitmaps versus Vectors: Graphics files and formats, by the School of Computer Science and Information Technology, University College Cork.

On web pages, vector images are displayed in SVG format. Bitmap images are typically displayed in JPG or PNG format (see below). In this Tutorial, we will focus only on bitmap images.

JPG format images

This format (pronounced jay-peg) is the best choice for displaying photographs that contain lots of colours and colour gradations. It is not recommended for images containing text, line drawings or areas of solid colour.

Image files in this format end with the filename extension .jpg or .jpeg. You can see some examples of typical JPG-format images below.

PNG format images

This format (pronounced pea-n-g) is typically used for images that contain areas of solid colour, for logos and icons, and for line drawings.

Below are some examples of images suited to this file format. Such files end with the extension .png.

Photographic images can also be saved in PNG-format and will display in a web page with the same quality as if they were JPGs. But the image file sizes will be larger and, as a result, the web page will take longer to load.

Project Animation Google Fonts

Where to find copyright-free images

A wide range of so-called stock photography websites exists from which you can download, modify and use copyright- and royalty-free images, whether for your personal, not-for-profit or commercial web projects.

In most cases, you do not need to credit the image’s creator, but it is good practice and courteous to do so.

Here are some popular sources of general-purpose stock images:

Here are some online libraries that offer less generic and more stylised photography:

For online business-themed images, check out this free gallery from e-commerce giant Shopify:

Burst

The Internet’s largest collection of free online images is the one below. It includes vintage photography and reproductions of classic works of art:

Wikimedia Commons

For illustrations rather than photographs, here are four open-source collections of vector images. Files can be downloaded as bitmap images in PNG-format.

Your work files: tourism.html and tourism.css

In this Tutorial you will work with the following web page and stylesheet:

The web page named tourism.html.
The stylesheet named tourism.css.

These are new files you will download and edit. You will also download five new image files in JPG format for inserting into your tourism.html file.

Download the HTML file

Follow these steps to download the HTML file to your websites folder.

In your web browser, open the following web page:
tourism.html
Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox). The source of the web page now opens in a new tab of your web browser.
In web browser tab that displays the web page source, right-click anywhere on the page and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox).
In the File name: box, change the name of the file to tourism.html.
In the Save as type: dropdown list, change from the default setting from Webpage, Complete to Web Page, HTML Only.
Save the file as tourism.html file in your websites folder.

Download the CSS file

Next: download this CSS file to your websites folder.

In your web browser, go to the following web address:
tourism.css
Right-click on the displayed CSS file and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). There is no need to change the suggested File Name: or Save as type: value when downloading a CSS file with your web browser.
Save the tourism.css file in your websites folder.

Download the five image files

And finally: download the following five image files to your websites folder.

In your web browser, display the following image:
https://ibat-web-dev.github.io/guinness-storehouse.jpg
Right-click on the image and choose Save image as… (Chrome) or Save Image As… (Mozilla Firefox).
Save the guinness-storehouse.jpg file in your websites folder.
Repeat the above steps for these four other image files: https://ibat-web-dev.github.io/book-of-kells.jpg https://ibat-web-dev.github.io/cliffs-of-moher.jpg https://ibat-web-dev.github.io/dublin-zoo.jpg https://ibat-web-dev.github.io/national-aquatic-centre.jpg

You should now have all five images stored in your websites folder.

Images and web browser resets

Before you add any images to your web pages, you will want to change the default way in which images are displayed by web browsers. You can do this by adding two new rules to your CSS stylesheet file.

By default, web browsers display images as inline rather than block elements. Typically, you will want your images to fill the entire horizontal width of their available, containing area. Also, you will want to be able to add margins and/or padding to one or more of the four sides of your images.
By default, web browsers display images at their original widths and heights. In practice, you will want your images to be fluid – to expand or shrink depending on the size of the user’s screen.

To ensure your images appear as fluid, block elements, add the following rule to the web browser resets at the beginning of your tourism.css file.


  img { display: block; width: 100%; height: auto }

Adding images to your web page

Follow the steps below to insert the five supplied image in your web page.

For all web pages that contain images, the linked stylesheet file should include a CSS reset rule which ensures images are displayed as block-level and fluid elements. With your text editor, open the tourism.css file and add the final line below to the web browser resets section.
```
/* ==== BROWSER RESETS  ==== */
* { padding: 0; margin: 0; border: 0; font-weight: normal; font-size: 16px }
body, html { height: 100% } 
body { max-width: 1600px; margin: 0 auto }
img { display: block; width: 100%; height: auto }
```
Save your tourism.css file. You can now begin to insert images in your web page
With your text editor, open the tourism.html file.
Click at the beginning of the <p> text paragraph under the <h2> heading of ‘Guinness Storehouse, Dublin.’ Press the ENTER key three times to open up three lines of blank space.

Type the following code on one of the blank lines:


  <img src="guinness-storehouse.jpg" alt="Guinness Storehouse">

Save your tourism.html file and view the web page in your web browser. It should look as shown below.

Repeat the above steps to insert the four other images under the appropriate <h2> headings in your web page. The four lines of HTML code are as shown below.


  <img src="cliffs-of-moher.jpg" alt="Cliffs of Moher">


  <img src="dublin-zoo.jpg" alt="Dublin Zoo">


  <img src="national-aquatic-centre.jpg" alt="National Aquatic Centre">


  <img src="book-of-kells.jpg" alt="Book of Kells">

Save your tourism.html file and view the web page in your web browser. All five inserted images should now be displayed.
Notice that there is some vertical spacing above each image. This is the result of the margin-bottom property for the <h2> heading. To add some spacing beneath the images, switch to your tourism.css file in your text editor. At the end of the file, add the following new CSS rule for the img selector.
```
/* ==== IMAGES  ==== */
img { margin-bottom: 22px }
```
When finished, save your tourism.css file and view the web page in your web browser. Your images should now have some white space beneath them.

Images and Alternative Text

If as the result of a slow connection or other reason, an image on a web page cannot be displayed, HTML offers an attribute named alt, a short form of ‘alternative.’

In the above example, all five inserted images each include a short alternative description.

If you omit the alternative text for any image on a web page, the official HTML Validator will show an error. See the example below.

Adding heading and background colours

In a final step, you will add colours to your headings and to the web page background. Colours and web pages are covered in detail in the Tutorial named Colours and Web Design.

In your text editor, open the tourism.css stylesheet.
At the end of the PAGE WIDTH section and before the start of the HEADINGS section, add the following CSS selector and rule.
```
body { background-color: #E4F5E8 }

/* ==== HEADINGS ==== */
```
At the end of the HEADINGS section and before the start of PARAGRAPHS section, add the following CSS selector and rule.
```
h1, h2 { color: #008000 }

/* ==== PARAGRAPHS ==== */
```
When finished, save your tourism.css file and view the web page in your web browser. It should now look as shown below.

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your tourism.html file.

You have replaced the name ‘Mary Smith’ with your own name.
You have replaced the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

Adding the privacy pop-up code and message

Your need to add the ‘pop-up‘ privacy code and message to your web page. You can find the instructions for generating this code here.

CSS link: Paste this anywhere in the <head> of the web page. For example, just before the closing </head> tag.


  <link type="text/css" content="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css">
</head>

<body>

JavaScript code: Paste at the end of the web page, just before the closing </body> tag.


<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>
<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "content": {
    "href": "https://username.github.io/privacy.html"
  }
});
</script>
</body>
</html>

Near the end of this code is the sample web address of https://username.github.io/privacy.html.

Change this to the web address of the privacy page on your own website.

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

Go to this web page: https://validator.w3.org.
Click the Validate by Direct Input tab.
Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate.
Click the Check button.
If you see any errors, return to your tourism.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again. In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

Go to this web page: https://jigsaw.w3.org/css-validator.
Click the By direct input tab.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your tourism.css file in your text editor, fix the errors, save the file, and copy the entire file again.
In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your files to GitHub

After validating your web page and stylesheet, you are now ready to upload them along with your five images to your account on GitHub.

Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories.
On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
On the next screen displayed, near the centre of the screen, click the Upload files button.
Select or drag-and-drop the following seven files to upload them to your GitHub account.
After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/tourism.html

It may take a few minutes for your uploaded files to appear on GitHub.

Return to Contents.

Contents >

Working with Images

Learning Goals

Contents