Adding Images | Front-end Development Tutorials

Learning Goals

At the end of this Tutorial, you will be able to:

Know when to use the JPG and PNG file formats for bitmap images.
Be familiar with common sources of free-to-use stock images.
Insert images in a web page and add alternative text with the alt attribute
Insert spacing beneath images, add drop shadow and rounded corner effects, and remove image backgrounds.

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:

Pexels	Shopify Burst	Unsplash
Pixabay	StockVault	FreeImages

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

Life of Pix	Freerange	KaboomPics
Little Visuals	Gratisography	Picography

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 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.

Unconventional Stock Image Sources

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

Undraw	Ouch
ManyPixels	Humaaans

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.

Downloading your sample files

Your first step is to download the files you need for this Tutorial.

Download the following compressed file to your computer: lesson-images.zip
Copy the ZIP file into your websites folder.
Uncompress the ZIP file as shown below.
The files will unzip into a new sub folder in your websites folder named lesson-images. Inside this new sub-folder you should see 11 files: two HTML files and a group of image files. Next, you will copy these unzipped files to their appropriate sub folders.
From the websites/lesson-images sub-folder, copy the two HTML files to your websites/exercises sub-folder.
Display your websites/exercises sub-folder, and inside it create a new sub-folder named assets.
Display your websites/exercises/assets sub-folder, and inside it create a new sub-folder named img.
To this new websites/exercises/assets/img sub-folder, copy the various image files from your websites/lesson-images sub-folder.
You no longer need the downloaded lesson-images.zip file or the websites/lesson-images sub-folder. You can delete them both.
In your web browser, display these two web pages: page-4.html
page-5.html

You are now ready to work with the sample files you have downloaded.

Working with the van Gogh web page

First you will work with the sample page-4.html web page.

In Visual Studio Code, open the following file: page-4.html

In the <head> of the page-4.html file, add the following to apply TailwindCSS styles.


<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
header {
    @apply flex flex-col justify-around items-center w-full mx-auto
        bg-blue-800
        px-12 lg:px-60 py-8 lg:py-14;
  
    }
    header h1 {
        @apply text-6xl md:text-8xl text-white tracking-tighter text-center
            mb-8 lg:mb-12;
    }

    header h2 {
        @apply text-2xl md:text-3xl/12 text-yellow-100 text-center;
    }

    section {
        @apply bg-yellow-200
        px-12 lg:px-60 pt-4 pb-12 lg:pt-8 lg:pb-18;
    }

    section h3 { @apply text-left text-3xl tracking-tight mt-10 lg:mt-12 }

    section p { @apply text-lg md:text-xl/8 mb-5 }

    section > * { @apply w-full max-w-[48rem] mx-auto; }

    header *:last-child { @apply mb-0! }
    section *:last-child { @apply mb-0! }

    </style>

After the paragraph under the heading “The Arles Years”, type the following code: Or, just copy-and-paste the following:
```
<img src="assets/img/bedroom-arles-van-gogh.jpg" alt="Bedroom in Arles, van Gogh"> 
```

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


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


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


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

When finished, save your page-4.html file and view it in your web browser.
You can see that some vertical space is need under your images. Add the following new style rule for the margin bottom under images.
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 and five images.

In Visual Studio Code, open the following file: page-5.html

In the <head> of the page-5.html file, add the following to apply TailwindCSS styles.


<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
header {
    @apply flex flex-col justify-around items-center w-full mx-auto
        bg-green-300
        px-12 lg:px-60 py-8 lg:py-14;
  
    }
    header h1 {
        @apply text-6xl md:text-7xl tracking-tight text-center
        mb-8 lg:mb-12;
    }

    h1, h2 { @apply text-green-700 font-bold }

    header p {
        @apply text-green-900 text-2xl md:text-3xl/12 text-center font-normal;
    }

    section {
        @apply bg-green-200
            px-12 lg:px-68 
            pt-4 pb-12 lg:pt-8 lg:pb-18;
    }

    section h2 {
        @apply text-4xl lg:text-5xl tracking-tight mt-10 lg:mt-14 lg:mb-2;
    }

    section p {
        @apply text-lg md:text-xl/8 mb-5;
    }

    section p { @apply text-lg md:text-xl/8 mb-5 }

    section > * { @apply w-full max-w-[48rem] mx-auto; }

    header *:last-child { @apply mb-0! }
    section *:last-child { @apply mb-0! }
    </style>

Directly under the sub-heading “Guinness Storehouse, Dublin”, type the following code: Or, just copy-and-paste the following:
```
<img src="assets/img/guinness-storehouse.jpg" alt="Guinness Storehouse">
```
Next, add the following four images to your HTML file in the locations shown.
When finished, save your page-5.html file.
You can see that some vertical space is need under your images. Add the following new style rule for the margin bottom under images.
In your browser, note the effect of adding this spacing under the images.

✅ Task complete.

Adding some visual effects

Next you will add some visual effects to the design of your two sample web pages.

Adding a drop-shadow effect to images

In VS Code, open page-4.htmls, update the img declaration as shown below, save your web page, and view the effect in a browser. screenshot

Drop-shadow also known as box-shadow, is a visual effect that adds a shadow-like border around an element, making it appear as if it's floating above the surface behind it.

✅ Done.

Adding a rounded corner effect to images

In VS Code, open page-5.html, update the img declaration as shown below, save your web page, and view the effect in a browser.

Your images now have smooth, rounded corners on all four sides.

✅ Done.

Adding an image with a transparent background

Follow the steps below to remove the background from an image, and add the image to a web page.

Download the image below to your 📁 exercises/assets/img sub-folder: backpackers.png
In VS Code, open page-5.html and insert the new image in the <header> as shown below.
In a new tab of your web browser, go to the website below: https://www.remove.bg
Upload your backpackers.png image to the website, remove its background, and download the processed image to your 📁 exercises/assets/img sub-folder.
Delete the original backpackers.png file, and rename the new image with a transparent background to the same file name. When you view your web page in a browser, the top of the page should now look similar to that below.

✅ Done.

Highlighting text elements

For example, of the five tourist attractions in page-5.html, there are two paragraphs of text. The second paragraphs always looks like that below.

Let's highlight the text of this second paragraph.

In VS Code, open page-5.html and add a new class the second <p> tag for all five of the tourist attractions. Also add a <span> tag as shown below.
In your page-5.html, add a new .highlight-text class declaration as shown below.
Save your web page view the effect on your web page in a browser.

✅ Done.

About responsive width and height for images

All images have an inherent width and height. For example, the backpackers.png image added to the page-5.html web page has a width of 612 pixels and a height of 408 pixels.

However, TailwindCSS applies a CSS rule that forces images to resize responsively, regardless of their actual dimensions.

This has the following effects:

All images stretch or shrink horizontally (left-to-right) to fill completely the width of their container, such as a <header> or <section> tag.
No image, no matter how wide, ever extends outside its container.
No images are distorted. Their aspect ratio (the relationship between an image's width and its height) is maintained.

This 'reset' makes it much more easy to work with images when designing a web page.

Setting image `width` and `height`

Inside the <img> tag, you can set the width and height of an image. See the example below:

The two values are set in pixels, but you do not enter px units after the width or height.

When the CSS file of a web page is loaded by a web browser, the values for width and height are overwritten.

However, there are two main benefits to setting with and height for an image:

Better user experience at page load: Because a web browser loads HTML before CSS, the browser doesn't know how much space to reserve for images if those images do not have a width and height set. This causes the page to "jump" as images load.
Faster page loads: Because the browser can allocate the correct amount of space immediately before the image loads, the rest of the page can display properly without waiting for image downloads

If you test any web page using the website from Google below, it will recommend setting width and height for images to improve web page performance.

Google Page Speed Insights

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:

In Visual Studio Code, open this HTML file in your websites folder: index.html
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.
```
<p><a href="exercises/page-4.html">Vincent van Gogh</a></p> 
<p><a href="exercises/page-5.html">Irish Tourism</a></p>
```
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:

Open File Explorer and display your 📁 websites folder.
In the blank space at the right side, right-click and choose New | New folder from the context menu.
Give your new sub-folder the name assets.
Inside your newly created assets folder, create another sub-folder named img.

✅ That’s it.

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

In VS Code, open your home page index.html file.
In your web browser, select and download a suitable image from the range of copyright-free, stock photography websites.
Copy your selected image from your Downloads folder to your assets/img sub-folder.
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.
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.

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.
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
On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
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.
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.
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.

More learning resources

Tutorial Quiz

Take the test

Tutorial Podcast

Further resources

A quick guide to website photography
By Eric Karkovack at Speckyboy

Sample AI prompts

For the following prompt, copy the AI-generated HTML output, open VS Code, choose File | New Text File, and then paste in the AI content.

Choose File | Save to save your file in your 📁 exercises folder. Name your file something.html. (Replace 'something' with a suitable file name.) Do NOT use capital letters or empty spaces in the file name.

In the <head> of your new HTML file, copy-and-paste the TailwindCSS styles from your page-5.html file.

Finally, display your file in a web browser.

Build an HTML travel blog page about the city of Venice. Include a main heading and three sections with at least two paragraphs of text about some feature of the city.


Add an <img> tag inside each section with placeholder images of dimensions 1200 x 742 from the picsum.photos website. Ensure each image has appropriate alt, width, and height attributes. You can omit the nav and footer container elements.

Learning Goals

About JPG and PNG image formats

JPG format images

PNG format images

Where to find copyright-free images

Adding images to a web page

Images and alt text

Downloading your sample files

Working with the van Gogh web page

Working with the Tourism web page

Adding some visual effects

Adding a drop-shadow effect to images

Adding a rounded corner effect to images

Adding an image with a transparent background

Highlighting text elements

About responsive width and height for images

Setting image width and height

Updating your website home page

Updating your home page content

Adding an image to your home page

Uploading your files to GitHub

More learning resources

Tutorial Quiz

Tutorial Podcast

Further resources

Sample AI prompts

Images and `alt` text

Setting image `width` and `height`