• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

AreWeConnected.com

Custom WordPress Websites that Rock!

  • Home
  • About
    • Hire a Tech Dude!
    • Recommendations
    • Add your testimonial
  • WordPress
    • Custom WordPress Website Build
    • The Managed EVERYTHING Website!
    • Making your site “SECURE”
  • FAQ
    • Making Your Site SECURE
  • BLOG
    • Posts about WordPress
    • Guest Post and Comment Policy
  • Contact

How to use Unsplash photos in your posts and pages

Wordpress · July 24, 2017

101
SHARES
FacebookTwitterSubscribe

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.

unsplash grid view

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…

Searching Unsplash for splash

With that search I can now start scrolling to find the one that works best for me.  I like this one.

I found the image I like in Unsplash

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.

how to download an image in Unsplash

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.

Image in Preview

In Preview here’s what that looks like and note the change in file size!

image sizes
Before / After

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

Screen Shot of how to use images in your blog post

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…

add media button

You might not have any of the other buttons next to it, but you will have that Add Media Button.

Media title and description boxes

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

This is right justified in a mobile device
This is a right justified image in a mobile device view

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. 

The credit box on Unsplash

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.

Geetanjal Khanna

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?  🙂

  • Author
  • Recent Posts
Mike Mueller
Connected?
Mike Mueller
VP of Happiness at AreWeConnected.com
A former professional hand model, Mike builds Custom WordPress Websites that rock!


He's an avid hockey fan, rides a mountain bike, sometimes rides a road bike, has a few motorcycles (he had a really fast one, bought a cool orange one, rode a really slow one, and now,a perfect "BDR Weapon"). If that isn't enough, he makes cheese and sourdough bread, loves strong beer and good red wine, and poorly plays the Mandolin.
Mike Mueller
Connected?
Latest posts by Mike Mueller (see all)
  • 8 Questions Your Web Developer Should Have Asked - April 27, 2021
  • Slack, Chat or Discord? - April 6, 2021
  • Unsplash Bought by Getty Images - March 30, 2021
101
SHARES
FacebookTwitterSubscribe
New Comment Policy:
If you see something, say something!
(shamelessly borrowed from Homeland Security but really, let's bring commenting on posts back!)

Filed Under: Wordpress

Previous Post: « Tool Tips from February
Next Post: Reasons to not automate your post distribution »

Primary Sidebar

Who runs this Pop Stand?

Mike Mueller
Mike@AreWeConnected.com
PH: (925) 456-4567

Connect

  • Facebook
  • Flickr
  • Instagram
  • LinkedIn
  • RSS
  • Tumblr
  • Twitter
  • YouTube

Look, it’s Just a Newsletter!

  • While I might write a bunch, the newsletter is set to go out only on Wednesdays. That's it!  Just one day a week! Can you handle that?
  • This field is for validation purposes and should be left unchanged.

FREE Downloads

Icon
1827Small Biz Websites Built so far…

Let's Build Yours!

Expert Google Workspace help

Get Started and then hire the right help!

Lighten up!

Search: (anything)

Sign In / Up

  • Account
  • Website Management Subscription
  • The Managed EVERYTHING Website!

DM me. Really!

Have a question about anything I do? DM me! Message @mikemueller

Who to host with?

It's the #1 question I'm asked - where to find inexpensive shared hosting. Here's who I recommend.
Data Servers are a HUGE drain on the power grid. Here's a host that sources 300% of it's power from Wind and Solar! On top of that, their service ROCKS!
Check out GreenGeeks

Need more power?

WPEngine has it!

Hacked?

Sucuri Security
Creative Commons License
This site was built, is hosted, and backed up, and maintained by Mike Mueller. AreWeConnected is about the open sharing of ideas without a hidden agenda. Assume any link on this site is an affiliate link, Clicking on affiliate links costs you nothing extra (probably saves you $) and helps support this site.
PRIVACY POLICY

MANAGE YOUR ACCOUNT

CHAT
...another Custom Wordpress Website by Mike Mueller Hi!