Finding Graphics for Your Site (Plug for Creative Commons)

In the Tuesday stream, I was so glad Jess mentioned sources for graphics - such as Creative Commons. I’ll put in a shameless plug for this terrific resource; head over to https://creativecommons.org/ - and look at the top for the “Search for CC Images” link. From there, you’ll be redirected to a search tool that lets you filter your search for “Use commercially” and/or “Modify or Adapt”.

CC content can be licensed a number of ways; it’ll help you to do a fast review of the different kinds of CC licenses (About CC Licenses - Creative Commons) and what you can/can’t do with content licensed under each.

I’m not paid for the endorsement but work in academia (and we care a lot about proper attribution, how content is/is not used and taking advantage of inexpensive/free resources).

Hope you find what you need/want for your projects.

9 Likes

Thanks for sharing. :grinning_face_with_smiling_eyes:

Here are a couple of sites I like to use to find free images and icons:

3 Likes

I love that you flagged that these resources are free(r) for use but that folks using them still need to be careful to search by license and to use proper attribution. You’re a gift!

I would also flag that folks will want to upload these images to their own site and be sure they’re not hotlinking!

5 Likes

People will also want to make sure the file size of these images aren’t too big.
Some of the large images are several megabytes in size, and people will not be happy if those images are being downloaded to their browser. Especially on mobile.

2 Likes

Definitely - really glad you covered in yesterday’s stream all the Very Good Reasons to maintain your own site’s images; just say “No!” to hotlinking!

1 Like

Unsplash is great! They’ve been adding partners over the past few years; licensing/attribution: https://unsplash.com/license.

Lots of good sources out there - you just need to know licensing and use details for each site. When I download images from such sites, I also download their license statement, or screenshot their terms, so I have that in the same folder where I store those images.

1 Like

Hey David, before I upload my files to my website I use this image compressor: Optimizilla I like it because you can see a preview of your picture before deciding how much compression is good enough for your usage.

4 Likes

I use TinyPNG. That works well too.
I also use Photoshop.

5 Likes

Hey everybody!! I would like to ask a question…it might sounds silly… but I cannot understand how to place an image i downloaded onto my computer in the website or whatever I am coding for. Like do I have to upload it somewhere and then use the url? I can’t seem to figure it out!
Any kind soul can help me!? it feels like the answer its infront of me and I can’t see it! haha
Thank you! :slight_smile:

Hiya - when you have a site (wherever you wind up hosting it), there’s a storage allowance - my understanding is that you would want to store your graphics as part of your site files. And, definitely make sure they’re backed up along with your whole site, on a regular schedule. Once you have images uploaded to your site dashboard, admin area, or wherever, then you can add them/reference them in your pages. Hope that helps – here’s the MDN page on uploading to your server: How do you upload your files to a web server? - Learn web development | MDN

2 Likes

You don’t have to upload an image to some server on the internet just to use it when you’re coding on your computer.

If your image file is in the same directory as the index.html file then this will do
<img src="image.jpg">

Or if it’s in a directory called images
<img src="images/image.jpg">

And when you upload your .html/.css files to a server/web hosting service to make it available on the internet, upload your images to the same directory on the server and it will work just like on your computer. If you intend to put your images somewhere else (like an image hosting service or social network) you’ll have to put the image URL in the img tag (i.e. http://somewebsite.com/frynelli/image.jpg).

Does that make sense?
Update: thank you @sherry for telling me about the code not showing :sparkles:

1 Like

Thank you guys for the explanation! I think I got it… I am not coding on my computer at the moment but in codepen, doing the freecodecamp landing page project and I can’t seem to find how to add an img there…
From my understanding on what you said, wherever I am doing the coding I should have my images as well in order to be able use them… Correct? Are you perhaps familiar with the Codepen?

This should answer your question

1 Like

Hello all, you could also try https://www.freepik.com/ to get free photos with proper attribution.

Thank you very much!

2 Likes

You’re very welcome!

How are folks linking to / embedding videos (ie product landing page project)?
-Do we have to create our own videos and host them?
-Is it okay to link to videos on youtube?
-Any sites like creative commons for videos?

This is great. The preview and adjustment feature are very handy.

The companies I’ve worked at normally used YouTube. It was mostly public/ad videos, institutional stuff, or unlisted if it was a more specific thing. One of the news outlets I worked at had its own TV station, so they had an actual video web portal and embed videos from there. (I’m a journalist). But mostly what I see is indeed YouTube or Vimeo or similar services

1 Like

Thank you! I figured that was the case, but didn’t know if there were further creative content concerns. Cheers :slight_smile: