How to use Unsplash Images in your code

Dali — Wed, 11 Sep 2024 08:26:56 +0000

As a developer working on a new SaaS project, I needed to link some Unsplash images directly through their URLs.
Initially, I came across an article (link) recommending the use of the https://source.unsplash.com/ API. However, this method no longer works, and simply copying the link from the URL field didn't provide the direct image URL needed for embedding.

https://unsplash.com/photos/a-digital-illustration-of-the-letter-k-CnbzJXw5Hx4

Unsplash Image URLs

The next option I tried was copying the image URL by right-clicking on it. However, this URL was filled with unnecessary parameters that I didn't need, requiring manual removal every time. For example:



https://images.unsplash.com/photo-1725610588086-b9e38da987f7?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

As a lazy developer who values efficiency, I found this process frustrating. I didn't want to manually clean up URLs every time I wanted to use an image.

The Lightbulb Moment: Building my first Chrome Extension

So, after wasting way too much time doing this manually, I did what any lazy developer with an aversion to repetitive tasks would do—I built a Chrome extension. Introducing "CopySplash", the Chrome extension you never knew you needed but now can't live without!

And the best part? It’s an open-source project! (GitHub) Feel free to dive into the code, contribute, suggest features, or even just tell me how much you love it or not😅. Compliments are always appreciated.

What Does "CopySplash" Do?

Provides a convenient "Copy Link" button overlay on Unsplash images, allowing users to quickly copy the image URL to their clipboard with a single click.

Set custom parameters to adjust the size, quality, cropping, and more, tailored to your specific needs and save them.

But Wait… What’s the Deal with Unsplash and Imgix?

Unsplash uses the Imgix rendering API (link), a powerful image processing service that dynamically resizes, crops, and optimizes images for web delivery. Every image URL from Unsplash is processed through Imgix, which is why the URLs are often filled with parameters.

Check out the rendering API documentation to set your custom settings that will be integrated in the copied URL

Conclusion: No More Unsplash URL Drama!

If you’re a developer who frequently uses Unsplash images, "CopySplash" can save you a lot of time and effort. Give it a try, and Whether you have an idea for a new feature, want to improve the code, or help with documentation, your input is welcome!