Adding Images and Videos

About JPG and PNG image formats

Images added to web pages are mostly either in jpg or png format.

JPG format images

This format (pronounced jay-peg) is the best choice for displaying photographs that contain lots of colours and colour gradations.

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, for text, and for charts, diagrams and 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.

A feature of PNG format images is that, unlike JPG files, they can have transparent backgrounds.

Where to find copyright-free images

A wide range of so-called stock photography websites exists from where you can download, modify and use copyright- and royalty-free images, whether for 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:

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

For a wide-ranging list of online image libraries, from the National Library of Ireland to the British Library and NASA, visit the following article from CSS Tricks.

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

Adding images to a web page

You add an image to a web page using the single, simple line of HTML code such as shown below.

<img src="assets/img/dog.jpg" alt="My dog Rover, playing in the park">  

Or:

<img src="assets/img/cat-picture.png" alt="My cat Judy, sitting on a chair">  

As you can see from the examples below, the HTML <img> tag for every image has the same format.

After the <img> tag name are the three letters of src that set the source (location and file name) of the image file. This is known as an attribute or property of the <img> tag.

Note that the <img> tag does not need a closing tag. It is one of the few examples of self-closing tags in HTML.

Images and alt 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 text.’

If you omit the alternative text for any image on a web page, your web page is regarded as "invalid".

Below you can see the output produced by the official W3C HTML validity checker on a web page that is missing the alt attribute from an <img> tag.

In this Tutorial, you will add images to two new sample web pages in your exercises folder.

You will also update your website home web page with an image, and with hyperlinks to your two new sample web pages.

Working with the van Gogh web page

First you will work with the sample page-4.html web page, the sample style-4.css stylesheet and four images.

1. In Visual Studio Code, open the following two files:   page-4.html
   style-4.css
2. After the paragraph under the heading “The Arles Years”, type the following code: Or, just copy-and-paste the following:

   Copy 
   <img src="assets/img/bedroom-arles-van-gogh.jpg" alt="Bedroom in Arles, van Gogh"> 

3. Next, add the following three images in the locations shown.  

   Copy 
   <img src="assets/img/yellow-house-van-gogh.jpg" alt="The Yellow House, van Gogh"> 

      

   Copy 
   <img src="assets/img/cafe-terrace-at-night-van-gogh.jpg" alt="The Cafe Terrace at Night, van Gogh">  

      

   Copy 
    <img src="assets/img/starry-night-van-gogh.jpg" alt="Starry Night, van Gogh">  

4. When finished, save your page-4.html file and view it in your web browser.
5. You can see that some vertical space is need under your images.
6. In your style-4.css stylesheet, at the bottom of the file, add a new declaration for img and inside a single style rule for margin-top: as shown below, and save your stylesheet.
7. In your browser, note the effect of adding this spacing under the images.

✅  Task complete.

Working with the Tourism web page

Next you will work with the sample page-5.html web page, the sample style-5.css stylesheet and five images.

1. In Visual Studio Code, open the following two files:   page-5.html
   style-5.css
2. Directly under the sub-heading “Guinness Storehouse, Dublin”, type the following code: Or, just copy-and-paste the following:

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

3. Next, add the following four images to your HTML file in the locations shown.
4. When finished, save your page-5.html file.
5. In your style-5.css stylesheet, at the bottom of the file, add a new declaration for img and inside a single style rule for margin-top: as shown below, and save your stylesheet.
6. Also in the stylesheet file, update the margin-bottom: style rule for the h2 declaration as shown below.

✅  Task complete.

Updating your website home page

Now that you have created and styled four new web pages, let’s add hyperlinks to these new pages to the ‘home page’ of your website.

Updating your home page content

Follow the steps below:

1. In Visual Studio Code, open this HTML file in your websites folder:   index.html
2. Copy-and-paste the following new lines to your web page, directly under the line that contains the link to the page-3.html web page.

   Copy 
   <p><a href="exercises/page-4.html">Vincent van Gogh</a></p> 
   <p><a href="exercises/page-5.html">Irish Tourism</a></p>

3. Save your index.html web page and view the result in your browser.

Adding an image to your home page

Before adding images to your home page, you need to create a sub-folder to store them.

For Microsoft Windows users, here are the steps:

1. Open File Explorer and display your 📁 websites/assets sub-folder.
2. In the blank space at the right side, right-click and choose New | New folder from the context menu.
3. Give your new sub-folder the name img.
   

   DO NOT type upper-case letters. Type img.

   DO NOT type 'Img' or 'IMG'.

✅  That’s it.

The assets sub-folder of your 'main' websites folder now has two sub-folders: one for stylesheets and one for images.

Now, you can add one or more images to the home page of your website.

1. In VS Code, open your home page index.html file.
2. In your web browser, select and download a suitable image from the range of copyright-free, stock photography websites.
3. Copy your selected image from your Downloads folder to your assets/img sub-folder.
4. Add the image to your index.html web page, inside the <header> tag.   In the <img> tag, don’t forget to include the alt attribute with some descriptive text.
5. Save your web page and view it in your web browser.

✅  All tasks complete.

Uploading your files to GitHub

You are now ready to upload your work to your account on GitHub.

1. Open a new tab in your web browser and go to github.com. If you are not already signed in to your GitHub account, sign in now.
2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.GitHub.io
3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
4. From the dropdown list displayed, choose the option Upload files.
5. In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your 📄 index.html file and your 📁 assets and 📁 exercises sub-folders to upload them to your repository on GitHub.
6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
7. Finally, click the green Commit changes button to upload your files.

Your updated home page and two new web pages are now published on GitHub at web addresses similar to the following:

https://username.github.io/index.html
– or simply –
https://username.github.io
https://username.github.io/exercises/page-4.html
https://username.github.io/exercises/page-5.html

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