Handling images in your tech blog - a complete guide that's easy to read
1. A picture is worth a thousand words
Although we don’t know all the details of how the algorithms of search engines such as Google or Bing work, we do know that user experience is increasingly at the centre of how your content is ranked. [1]
That user experience is greatly improved by having at least one image per blog post, they not only help to break up long blocks of text, but also provide additional clarity or context.
We could spend a long time speculating on the precise impact of images on search engine rankings, but I believe it comes down to this.
- The duration users stay on the page
- The bounce rate on the page
If pictures can grab attention and intrigue your audience, they’ll likely increase these two key metrics for better ranking. This is supported in [2].
There are plenty of image types you can add to your tech blog such as:
- photos
- artwork
- illustrations
- data charts
- custom graphics
- screenshots
- animated GIFs
- memes
- symbols
- patterns
- visual quotes
- wallpapers
- infographics
- graphs and
- diagrams
- comics
Use your creativity for each post to think about what works best among the image types above!
2. Using Original images
Using your own creations can also improve user experience and search engine ranking.
This is because;
- Original images also help to define your blog’s character and distinguish it from the competition
- SEO algorithms may favour sites that offer audiences unique images not found anywhere else on the web
- Original images are also safer to use and you don’t have to adhere to legal requirements (discussed later)
- Users might come to your blog through Google or Bing’s image search where original images rank better
Generally, I will try to include as many of my own creations and photographs or at least ensure a good mix between those and images sourced online.
The tools I use to make original images
There are some great tools I use for creating images. Most are entirely free to use or offer a relatively cheap premium service.
2.1 Diagraming
2.2 Illustrations
2.3 Infographics
2.4 Screen captures
- Lightshot - has some basic editing features
2.5 Presentations
2.6 Editing
3. Sourcing images online for free
Making or capturing authentic pictures is not always ideal, fortunately there is a wealth of copyright-free images on the web.
They’re no longer the tacky stock images of people in suits shaking hands that we’ve grown accustomed to seeing. Many photographers and artists are willing to share beautiful work for free.
So whilst I suggest you do curate your own images wherever you can, sometimes a stock image is just a better fit. After all, we’re not all professional photographers able to reach far-flung corners.
Other times, you may not have the time and need a temporary solution.
3.1 Copyright and staying legal
Before we continue, it’s important to note that there are important legal considerations whenever you take any image from the internet.
Disclaimer: this is not legal advice and nothing in this article should not be construed as such. I am not a lawyer; I am a developer presenting the research I have done on the subject and which might just save you a lot of worry and expense. Your circumstances may be different and for that you need seek out the professionals.
Most images online have a licence and are considered the intellectual property of the creator. A license is a mechanism that defines how people may use the image.
It is typically signposted next to the image on the page your viewing it on.
Not adhering to the license can have legal repercussions, and you may be liable to having your site taken down.
The following are some of the most common sorts of licences:
3.1.1 Public Domain
The image creator has put their work into the ‘public domain’ for use by everyone in any way they want.
3.1.2 Creative Commons License
Creative commons licenses are typically free but almost always require an attribution (a credit to the image creator) unless it’s the CC Zero type. Read more about creative commons licenses.
3.1.3 Rights Managed (RM) License
These images are typically bought and the buyer must specify where and how the image will be used. This may include the number of copies printed or the length of time the image will be in use, and so on. In return, the buyer can also contractually agree on exclusivity over the picture, which means that a rival can not license the same image. The RM licenses are very restrictive and you will need to agree new terms if you change the way you use the picture.
3.1.4 Editorial Use License
These images may feature familiar brand products and their logos, or events, celebrities, etc. They should only be used on news reports and other informational and editorial mediums. These images cannot be used in an advertisement or for any other commercial gain.
3.1.5 Royalty Free License (RF)
These sort of images are usually purchased once for unlimited uses. Once purchased, it tends to be pretty generous with some limitations, such as an upper limited of 1/2 million print copies of the image and not using it for derivative products where it's the basis for a product’s existence, such as on a poster, coffee mug or t-shirt - that requires the Royalty Free Extended License.
3.1.6 Royalty Free Extended License
This extends the Royalty Free License for use on derivative goods ( e.g. poster, t-shits, website templates).
3.1.7 Custom License
Some sites have a custom license and their own terms of use. Cover yourself by reading their terms of use.
3.1.8 If in doubt..
When browsing online stock picture sites, you must check the license and read their terms and conditions. If it concerns a license you’re unfamiliar with, make sure to look it up and if you’re still in doubt, contact the image owner. After a while, you’ll see a license and know what you can and can’t do. It goes with saying to be especially careful when there are recognizable humans on the picture.
Try to use reputable sites as sometimes people upload stolen images to their platform, and you’ll still be liable if you use them. Fortunately, most reputable sites have the means to filter them as well as offer some compensatory guarantees if you’re a premium user.
What constitutes commerical use? My non-expert opinion is that “commercial purposes” refers to direct monetary gain. For example, if you use the image in a banner ad, (inciting people to click on it) it is "commercial use." But if you use the image to enrich a blog post, without any clear monetary gain, then it is not. That said, having done the research, "commercial use" can be a legal gray area. A blog post with affiliate links or AdSense revenue is arguably "commercial use". People have got into trouble for much less. Therefore, I prefer to play it safe and make sure I use images with licences that permit commerical use.
3.2 Where to find Images online
3.2.1 Photos, images and illustrations
I’ve curated a pretty comprehensive list of sites that I use source images free for commercial use.
Most of these sites have both premium and free options. Use the advance image search and filter by license.
- librestock - search engine for free images
- everypixel This AI based search engine that comb up to 50 websites. There’s also an option to search by image.
- Pixabay
- Unsplash - Free (do whatever you want) high-resolution photos.
- freerangestock - requires registration
- pxhere
- Pexels
- Flickr - impressive collection of photos, when you search, ensure you filter by license.
- Life of Pix
- Rawpixel – also good for PSD mockups
- OpenDoodles - specialised in illustrations
- stocksnap all images are governed exclusively by the most generous Creative Commons license, CC0.
- Freepik - need to give attribution to the author if you’re going to use their stuff for commercial purposes.
- burst - powered by shopify, every single image is free
- kaboompics
- freephotos
- picjumbo
- dreamstime
- gratisography - quirkey, unusual images
- negativespace
- stocksnap
- designerspics - commercial use. Attribution not required!
- graphicburger
- commons.wikimedia.org
- Library of Congress - thousands upon thousands of free images that are public domain.
3.2.2 Icons
3.2.3 Desktop wallpaper
3.2.4 Gifs
• GIPHY
4. Attributing
To ensure that images are accurately credited, add the following information and display it clearly by the relevant image, (ideally immediately below):
- Title
- Author
- Source
- License type (including link to the relevant license).
According to Creative Commons, an ideal example of attribution would be:
“By lake Geneva”, by Joe D, licensed under CC BY 2.0
Here are some additional considerations for correctly attributing an image:
Where there are multiple authors, each should be listed.
Only substitute a username or alias if the creator’s full name is unavailable.
Contact the copyright owner if there is any question as to how the creator(s) would like to be attributed.
Make sure the attribution is fully visible. If it’s not possible to determine the license type and/or ownership of the image, you have not correctly attributed it. Use a proper and consistent referencing system and either include the attribution directly underneath the image or at the bottom of the page.
Some sites have their own system, for example Unsplash's recommended format is:
Photo by John Smith on Unsplash.
You’ll never go wrong by following instructions!
- Generally, you should make a habit of referencing all of your accrued content even if the license doesn’t require it, I do feel it is more genuine and gives your blog an added dose of trustworthiness.
4.1 Attributing screenshots
Posting unaltered screen captures of software, websites, computer/video games, is generally covered by fair use (with correct attribution) as long as it does not harm the product's commercial value. You can read about it here [4] https://fairuse.stanford.edu/overview/fair-use/what-is-fair-use/
5. Image optimization
5.1 Reducing image size
- Your target should be to keep the size of each image under 100kB, while the image is still of decent quality.
- Always properly resize your Images – according to exactly how large works best on your blog. For most blog layouts, somewhere around 680 – 700 pixels in width works. You can get exact measurements by inspecting your images with Developer tools and adjust to your preferences.
- Don't worry about PPIs and DPIs - those are only important for print. Pixels (image resolution) are all what matters for the web.
- Compression - two main types:
- lossless eliminates some pixel data
- lossy compresses the pixel data image With lossless compression, an image can be decompressed and restored to the same state before compression, this is not possible with lossy compression. Only JPGs can be compressed in a lossy way. So save the quality of JPG images about 50-70 percent to save extra space. This can be achieved in image editing applications such as Photoshop or GIMP.
5.1.1 Tools for image reduction
- Here is an online tool from Google made by Googlers: https://squoosh.app/, and although it's free (including the source code), it performs as well as premium plugins and web apps
- GIMP
- Paint
5.2 alt tag
- This is the text that appears inside an image container if an image can't be loaded.
- Search engines refer to the alt text to get an idea of the image. Although, it's not as relevant as it once was for SEO as search engines now use image recognition. However, I still consider it's still good-practice.
- As the text will show when a visitor hovers over a picture with their mouse, it can improve user experience.
5.3 Create proper filenames
- Instead of IMG018.jpg, use What_image_is_about.jpg
5.3 Image loading
Coming soon!
5. Protecting your original images
Coming soon!
5.1 What do you do if an image has been stolen?
Coming soon!
6. Where to host your images
I always use host images on my own blog, uploading and storing on my local machine.
Though you might save on local drive space by linking externally, I don't recommend it as your pictures will be unavailable if the host site goes down. It’s not out of this world for an one of the image hosting sites to go bankrupt or simply need to take an image down.
Links and references
[1] https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html [2] https://www.searchenginejournal.com/seo-guide/where-seo-and-user-experience-ux-collide/ [3] https://wiki.creativecommons.org/wiki/best_practices_for_attribution [4] https://fairuse.stanford.edu/overview/fair-use/what-is-fair-use/