Could use some basic help with images

1

So I’ve made it all the way through HTML5 and CSS, Bootstrap, and jQuery.
Also managed to throw together part of a practice tribute page.
But in this throwing practice, I’ve come to the conclusion that I know less than the average person on how to find and use images for coding.

Before I finish the practice page and before I do my real tribute page in earnest, I need some basic, 101, crash coursing info on images. I need to learn the ins and outs of using both your own images and using things found on the internet (you know, those ‘libraries’ they allude to in the tribute page project check list.)

Thanks for the help.

2

Here’s a few things that come to mind…

  1. If you’re going to use somebody else’s photos, you should ask them for permission to do it.

  2. I think there are photos on Wikipedia that have a form of licencing which lets you use them without asking.

  3. If you have your own domain and server space, you should copy the picture files there so you can make sure they’ll still be available in a few years.

  4. If you don’t have your own server space, then you should upload them to Imgur and then grab the URL that ends in .jpg or .gif etc (by right-clicking the uploaded photo on Imgur).

I use an account on Imgur (free) and that lets me get back to my collection of uploads any time. There must be other sites that work like Imgur as well.

1 Like
3

I’ll try to summarize what I know so far about images.

  • Always use images you have permission to make publics, either because you are the right owner, you’ve bought a license or are royalty free.
    Here’s my favorite do-what-you-want high res image website: unsplash

  • Always add an alt text; many new coders don’t realize the importance of it. It’s incredibly penalizing not having it for a SEO point of view; and there are technical reasons well summarized in the mdn documentation:

Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), if the user chooses not to display images, or if the browser cannot display the image because it is invalid or an unsupported type. In these cases, the browser may replace the image with the text defined in this element’s alt attribute. You should, for these reasons and others, provide a useful value for alt whenever possible.

  • Images, especially the high-res one are heavy and may drastically reduce your page loading speed.
    What probably many people don’t acknowledge is that if I load an image that’s 1000X1000 but than render it via CSS as a 100X100 the browser still load the original source (10 times bigger than needed)
    To better make you page performant you need to do a proper scaling and compression (usually accomplished on the server side)

  • There are some techniques used by some mayor websites about loading images that are well explained in this blog post. I think it’s a great learning resource with practical examples (disclaimer: I’m not the author)

A couple of useful resources and popular image libraries
Google page speed tester
Lazyload
Lightbox 2

Hope it helps :slight_smile:

3 Likes
4

Thanks! Much appreciated.

5

Note:
Both jmontreal and Marmiz have solutions for me but I’m only allowed to check one box.
I’m disappointed in that.

6

Some great resources for finding free images:

  • Pixabay
    Stock photos, all CC0 (Creative Commons Zero - free for any use, can be modified, no attribution required)
  • Pexels
    Similar to Pixabay
  • Wikipedia
    Many images are CC0, CC BY (attribution required), or similar licenses. Click through to the image to view details, including license info.
  • Google image search
    After searching for your chosen keywords, click Settings > Advanced settings > usage rights and then select the license type you need.

Free software for creating and manipulating images:

  • GIMP
    Raster image creation and editing (images that are stored as collections of pixels, e.g. .jpg, .png, .gif). You can also export paths to create simple vector images.
  • Inkscape
    More complex vector image creation and editing (images that are stored as collections of lines and shapes and that can be shown at any size without losing fidelity, e.g. .svg). Great for making icons and other simple yet striking images.
2 Likes