Images for blogs and websites: basic considerations
Thoroughly updated: November 2020
On websites/ blogs/ social media accounts, we use pictures in various forms - photos, sketches, paintings, computer graphics, backgrounds and just background colors. We believe that images make the website beautiful and add value to it. In fact, many studies have confirmed that when there are images on blog posts, websites or social media posts, people stay on the page much more than when there is no image. This helps in better SEO and traffic, and eventually more earnings.
But, do you ask what, which, how many, why, how and where before putting images or you just put a picture there because a photo is better than none?
When we use a picture on the blog/ website with due consideration to various factors, the picture gives great value to the blog. On the other hand, pictures and colors that are put aimlessly add little value. They even make the blog unattractive, add clutter and reduce readability.
The discussion on using images on blogs and websites can become very long, so I have broken it into three sections. On this post, let us concentrate on some basic consideration in putting images on websites, especially blogs. The second post is on image editing (concept and tools), and the third one deals with the best practices in the use of images on websites, especially image placement.
Picture, image and graphic are taken as synonyms in this series of posts. Photo is used when something is specific to such an image. Similarly, blog and website are used interchangeably. Blogger refers also to website content creators and social media users.
Using images from the internet
Questions such as this are often asked on the web: Can you use pictures from the internet without permission? How to use pictures on your blog legally? Do I violate image copyright by using it on my blog? So, let us be clear on the subject of image copyright.
One should ask this question when thinking of copy-pasting images on blogs and websites from others' properties is whether I have the authority to use them.
Unfortunately, the use of other's images without regard to their copyright is wanton. When the images relate to news-events, celebrities, popular monuments and products, bloggers don't bother at all whether the images are copyright protected. Even if a blogger hesitates for a moment - as in the case of more exclusive images - he shrugs it off thinking that the copyright holder would not be able to track him and even if he discovers its wrong use, would not take action against him (the blogger). Some bloggers manipulate others' images so that they look different.
Yes, most people share photos of their travels, something interesting they see in their surroundings, their family photos on blogs and social media accounts. They won't mind if you 'steal' their photos. Yet, some may be particular about their images and take legal action against you. Professional artists and photographers and image-selling agencies who earn their bread by selling images are known to track wrong use of their images and take action.
On the web, photographers and artists post images, mostly without mentioning their copyright on the image. Only on image sharing websites and image buy-sell platforms will you find the copyright terms mentioned. That does not mean, the creator of the image has forgone his copyright, or he does not have a copyright on the image. The fact is, the creator has copyright over any artistic that he creates - without a need to legally register his right or mention about it. The copyright is not with the creator only if he has given up his right so that everybody can use the image or if he has sold the copyright.
There are a number of image sharing websites that offer copyright-free images. Pixabay and Pexels are two such websites. There are thousands of stock images on these sites on all conceivable subjects. So, there is not a good reason why a blogger should use other images from the web.
Please remember that for copyright protected images, we need to seek the permission of the owner and pay a royalty to him/ her before using them. Just attributing the image or mentioning the source is not a protection against copyright violation.
Best image format for web
Digital images are of two types, going by the way they are created and rendered. The first one is structured the way you see letters in a Word file. You scale an alphabet 100 fold and it still looks as clear. Such images are called vector images. Digital sketches, line arts and logos are usually vector images. Other type of images are made up of small dots called pixels. If you scale these images beyond a point, they look pixelated – made up of tiny colored squares. These are called raster images. Digital photos, paintings and designs are raster images. We’ll talk of this type of images here.
We cannot put vector images directly on all types of websites and blogs. In future, this may not be an issue. As of now, almost all images on the web are raster images.
Raster images come in different file formats. You can identify them with file suffixes such as .bmp, .raw, .tif, .jpg, .png and .gif. Cameras usually store photos in .tif, .raw and .jpg formats; .png, .jpg and .gif are the most common formats of web images. .webp is a format now in common use, but not all blogging platforms accept them.
.jpg (or .jpeg) is the best image format for website/ blog purposes when the image has a lot of fine details (e.g. a photograph). You can use .png for images that do not have too many shades of colors (e.g. sketches, cartoons, logos, layouts). Use .gif for animations only.
Image file size
File-size is the space an image takes on the computer or website. This is measured in kilobytes (kb), megabytes (MB) etc.
Files used by professional photographers on photo editors are large in size because they contain a lot of information about each pixel and other meta-data about the image. Such information does not add value to images in their display on computer / mobile screen. On the other hand, web images need to be small in file-size so that they load fast on the internet browser of the visitor. Big photos also take a lot of server space and the blogger might need to pay for server space if there are too many large-sized photos on the website.
It is possible to convert a camera photo of 10 megabytes into a medium-quality .png or .jpg file of 100 kilobytes [100th in file-size!]. On a slow internet connection, the 10 MB photo would make your website hang forever [no blogging platform as of now allows posting a photo of this size], while the 100 kb photo will open in a micro-second.
Look at the picture above. It has a whale, elephant and man with some text written under the whale's image. This original image of 5MB was re-sized using an image viewer to 50KB (size reduced 100 times) and the image has become blurred. If the image did not have text inside it, it would be passable for a website. The image below it is 10 KB but is blurred beyond the level of acceptance. If I had used a professional image editor, the loss in quality would have been much less but text information would still be lost.
Now look at the letter M in the picture. The upper one looks clear as it is the original size that was copied from Word. But the lower one looks jagged, because it was enlarged from a small-sized M. When the text is even slightly blurred, we find it irritating, isn't it?
So, keep the blog image size as low as possible by cropping (=cutting from sides) and re-sizing the image, and saving it at low but acceptable quality.
Image dimensions, resolution
The dimensions of the image can be measured in regular scale such as cm or mm. However, they are better measured in pixels. When you multiply the pixels in the width and height, you get the total number of pixels in the image. It is measured in pixels or megapixels (MP), not bytes. A square picture of 1000x1000 pixel size (=1MP) will appear 100 times as large as a picture of 100x100 pixels (=0.01MP). To check the size of an image on a website, right-click on it and you will find 'image information' option. If your browser does not permit that, save the picture on your computer and find the dimensions by hovering the mouse cursor over the picture's icon or right-clicking the icon.
The pixel-dimensions are also called resolution in common parlance, especially as camera/ mobile phone makers tell about the camera capacity. (Though in a more nuanced sense, resolution refers to clarity/ detail in a picture.) So, with a camera of 48MP resolution, you can click photos in many dimensions with a maximum of about 8000x6000 pixels.
You can re-size images using an image viewing program [or if you are comfortable with that, an image editing program] and not leave it to the blog platform or website builder to do it for you. Some blog platforms now allow you to use an online picture editing tool, and it is good enough for blogging purposes. However, as the lower discussion and the second post in this series will show, edits are done much better on computer.
As we'll tell you later, these simple edits can reduce image file-sizes remarkably without corresponding loss in quality.
Coming to shapes, different web spaces demand images in different shapes. 3x2, 4x3 and 5x4 rectangles are the commonly used image shapes but the final shape would depend upon the dimensions of the space in which you are placing the image, isn't it? A big background image covering the screen may need to be much wider than tall. The photo for the blog title will need to be a thin strip, about 1200 px wide but only 80-200 px high.
For bringing a picture to the right shape, you will need cropping and re-sizing. The right way to do these operations is discussed in great details in this post: Image editing: how to crop pictures into shapes.
These are just two examples to show how picture quality suffers when do not apply the right methods to resize them. (More on this in the next post in the series.)