Unsplash is a great place to find images for your blog posts and pages. It’s free and all the images are yours to “legally” do whatever you want with.
In this post I’m going to show you how to use an image from Unsplash.com and do it right. Ready?
Ok, so first… I assume you are using WordPress. Hopefully it’s a site that was properly built so that it loads fast (like the one’s I build). 🙂 While images are important for readability, large image files can bog down the loading times for pages.
Step 1: Find the image in Unsplash
Head on over to https://unsplash.com/ and you might see a grid of the most current images. If you don’t, there’s a little toggle on the right side.
From here you can start scrolling to find something that works for you. With over 200,000 images, scrolling doesn’t work for me. I always head straight to the search bar at the top.
I like using an image that relates to the post in some way. That might be directly, or it might be in a cute way. For this example I’m going to search for…
With that search I can now start scrolling to find the one that works best for me. I like this one.
Step 2: Click on the image
That sounds simple enough right? When you do, you’ll see full sized version of the image you like. There’s links and buttons in each of the corners but for now we’ll pay attention to the upper right.
Next click the download button.
When you do, you’ll start the download dialogue. I always place the images on my desktop. You’ll see why next. Download the image to your desktop.
You’ll note that the image names are usually the Photographers name and a few numbers. That’s ok.
Step 3: RESIZE YOUR IMAGE
Yeah, I did that in BOLD because it’s so important. The image you just downloaded is full size. While it’s a .jpg and so it has a good amount of compression it’s still going to be huuuuuuge in file size as well as pixels. This image I’m using is 5,000+ pixels wide and 2.1 Mb. The blog post you are reading this in is only 800px wide. All those extra pixels are going to be wasted.
NOTE: I’m on my Mac so I’m simply going to use Preview. If you are on a PC – I suggest you download something like Irfanview.
Open up the image in Preview. Under Tools you’ll see Adjust Size.
In Preview here’s what that looks like and note the change in file size!
I figure, 1,000 px wide is just fine. It’s a much smaller file but large enough to show well in a post.
Next thing I’m going to do is rename the image. This goes for EVERY image you upload. Images from my camera might be named something like img1234.jpg – that’s not very good for SEO.
While Unsplash named it the way they wanted – we can easily rename it to whatever makes better sense. In my case, I’m going to rename it as
Really! Why you ask? Because Google looks at a few things in images in how it ranks things. While that’s a horribly long name, I want better SEO for this post.
Step 4: Upload your image
Put your cursor where you want it to go in the post and click the “Add Media” button at the top bar. It’s kind of meta to do this but it’s right here…
You might not have any of the other buttons next to it, but you will have that Add Media Button.
When you start the upload there will be a few boxes we’re going to want to fill in. I’ll explain each of those from the top down.
You’ll see the title we renamed the image shows up in the “Title” box. I generally will copy that and paste the same thing into the Alt Text box and Description box.
If you want, you can use the caption box as well. I generally don’t but I did for the Before / After size comparison image above.
Google pays attention to the image title and description for SEO purposes so it’s a good place to responsibly use your keywords.
The next box is all about what you want your image to look like in the post and what people can do with it.
If you recall, I resized my image to 1,000 px wide yet my post is only 800 px wide. WordPress is smart enough to take my picture and make it fill the space available.
For most images I’ll align them as centered. That way they just fill the space. These two images about upload options are right justified. It’s dangerous and I don’t recommend it. If my viewer is reading it in a desktop they’ll see that everything looks ok. If they are on a mobile device those images are only 270 px wide. If their viewport is slightly larger than that you’ll look foolish as the words try to skirt around the image.
PROTIP: Right or Left Justified can come back to bite you. Be safe, just use Centered.
Ok, so now we have our image in the post and we’re just about done right?
Yes … and well, no. How much did you pay for that excellent image again? Yeah. Let’s give credit where credit is due.
Step 5: Giving Credit
If you look back at that image, you’ll see another box popped up.
I count 4 different ways to “Say Thanks” in that box.
Facebook: Click on the Facebook icon and you know how all that works. In my case I just posted to my page.
Twitter: Still one of my favorites! Click the icon, adjust the tweet if you like or use their pre populated tweet and go! Pretty simple.
Thanks to Geetanjal Khanna for making this photo available freely on @unsplash ? https://t.co/xjTTFoRD3s
— Mike Mueller (@MikeMueller) July 24, 2017
Copy the Text: Copy and past just as you normally would. If you in Text mode it’ll just be a simple “a Photo by Geetanjal Khanna on Unsplash” but if you are in Visual mode it’ll add links like this “Photo by Geetanjal Khanna on Unsplash“. I’ll always go in and make those links open in a new window.
Embed a Credit Badge: For this you’ll need to switch over to Text mode. By clicking on this a popup box will pop up (like what else would it do?) and give you a script. Don’t look at it – it’s very long and will just confuse you. Just copy and paste that into your post in text mode and it’ll look like this.
Speaking of credit, one of my clients, Vick Melancon, asked me a question which inspired this post. So if you got value out of this you should go thank Vick (he’s really cool)!
Step 6: Always set a Featured Image
You didn’t think I was going to let you get away with reminding you of that did you? Well, I’ll make it simple. Go read this post on how and why to Always Set A Featured Image.
Full Disclosure: I’ve been using Unsplash for a very long time, at first I suggested that if you use an image, submit one that you took in return. I rarely did or do that. This new credit popup system they added is really slick and so YES I do now give credit (usually by Twitter) for the images I use. It’s just too easy not to.
Did you notice?
If you are really a sharp cookie you’ll notice I didn’t actually use the splash image. I screen captured bits and pieces of it, FB and Twitter pull versions of it. Unsplash says you can do whatever you want with the image. So far I didn’t do anything with it in my post. I did however use a modified version of it as my Featured Image.
So that’s the easy and proper way to find and use an image from Unsplash and give them the proper credit. It’s pretty easy, right? Now how about sharing this post? 🙂
Mike Mueller
He's an avid hockey fan, rides a mountain bike, a few motorcycles (he had a really fast one,bought a cool orange one, and still rides a really slow one), he loves strong beer and good red wine.
Latest posts by Mike Mueller (see all)
- How to do EVERYTHING in Gutenberg - October 16, 2018
- Plugins: When to update and why - October 2, 2018
- A FAQ on making your site Secure, SSL and https - September 25, 2018