Getting free images

Intro

For the next part, we need to add an image file to our project.

If you already have an image, you can use that in your project, and I’ll show you how to add it in a bit. The image can be a jpeg, png, or even a gif.

If you don’t have an image file, you can follow along with this lesson where I’ll show you a site where you can download images for free.

Steps

Visit Unsplash

I have my browser open with the website unsplash.com open. Unsplash is a website where photographers upload their images and anyone can download them to use in their projects for free.

Unsplash does request that you give credit to the photographer and Unsplash when you use one of their photos on your site, and I recommend this as well, but technically it’s not mandatory.

Search images

You can search Unsplash for photos around a certain topic. In my case, I’ll search for “computer”, but you can choose a different topic.

When you’ve found a picture you like, you can click on it to expand it, then click on the green arrow to download the image in a particular size.

I generally choose the Medium size for my examples, because it’ll look good full screen or at a smaller size.

Download image

I’ll click on the arrow, and then I need to add it to my project.

I already have this images folder set up in my Desktop folder, so I’ll add it there. This is where we’ll create the HTML file for our next project.

You should also rename the image so it’s easier to reference inside of your code. I’ll rename this image to be “laptop.”

Remember, if your image name needs to contain multiple words, use dashes to separate the words, just like your HTML files. Don’t use spaces in the file name.

You can use the button at the bottom to copy the text to give credit to the photographer on your website.