Embed Unsplash Images in HTML
Unsplash gives you access to thousands of free, high-quality photos that work brilliantly for web design projects. Here's how to get them into your HTML code properly.
TL;DR:
- Grab images from Unsplash for free use in web projects
- Either link directly to Unsplash URLs or download and host images yourself
- Always credit the photographer (it's required by their licence)
- You can edit the images but still need to give attribution
Two Ways to Add Unsplash Images
Method 1: Direct Linking
Find your image on Unsplash, then right-click and copy the image URL. Drop it straight into your HTML:
<img src="https://images.unsplash.com/photo-123456789" alt="Description of image">
This works fine for testing, but there's a catch. If Unsplash changes their URLs or the photographer removes the image, your site breaks.
Method 2: Download and Host (Better Choice)
Download the image to your computer, upload it to your website's folder structure, then reference the local path:
<img src="images/my-unsplash-photo.jpg" alt="Description of image">
This approach gives you full control. Your images load faster and won't disappear if something changes on Unsplash's end.
Getting the Attribution Right
Unsplash requires you to credit photographers. Most people add a caption or credit line near the image:
<p class="photo-credit">Photo by <a href="https://unsplash.com/@photographer">Jane Smith</a> on Unsplash</p>
You can style this however fits your design. The key is making sure the photographer's name links back to their Unsplash profile.
Image Optimisation Tips
Unsplash images are often massive files. Before you upload them to your site, resize them to match your actual display dimensions. A 4000px wide image that displays at 800px just slows down your site for no reason.
Most image editing tools can batch resize if you're working with multiple photos. Aim for web-optimised formats like JPEG for photos or WebP if your audience supports it.
When Things Go Wrong
The biggest mistake is forgetting attribution. Unsplash's licence is generous but not optional. Always credit the photographer.
Another common issue is using the wrong image sizes. That hero image might look perfect on your desktop monitor but take forever to load on mobile. Test your page speed after adding new images.
FAQs
Do I need to pay for Unsplash images?
No, Unsplash images are free for personal and commercial use. You just need to credit the photographer.
Can I edit Unsplash photos before using them?
Yes, you can crop, adjust colours, add filters, or modify them however you need. Attribution is still required for the original photo.
What if I can't find the photographer's details?
Every Unsplash image page shows the photographer's name and profile. If you downloaded the image ages ago and lost track, reverse image search it on Unsplash to find the original.
Is hotlinking to Unsplash URLs reliable?
Not really. Images might get removed or URLs might change. Download and host images yourself for anything important.
Jargon Buster
Hotlinking – Linking directly to an image on someone else's server rather than hosting it yourself
Attribution – Giving credit to the original creator of an image or content
Alt text – Descriptive text that appears if an image fails to load, also used by screen readers
WebP – A modern image format that's smaller than JPEG but with similar quality
Wrap-up
Unsplash images can transform your web projects from basic to professional looking. The process is straightforward whether you link directly or host images yourself. Download and host gives you better control and reliability.
Remember to always credit photographers and optimise your images for web use. Getting these basics right means your site looks great and loads quickly.
Ready to level up your web design skills? Join Pixelhaze Academy for in-depth courses and practical tutorials.