How to use images in blog posts [and on websites]

Thoroughly updated: September 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. 

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 the readability of the web page. 

The discussion on using images on blogs and websites can become very long, so we have broken it into three sections. On this post, let us concentrate on key technical aspects of images. The other posts in this series deal with quality aspects and image processing for blogging, and image placement inside a blog and related matters. Links to the other posts are given at the end of the present post.

Picture, image and graphic are taken as synonyms in this series of posts. Similarly, blog and website are used interchangeably. Blogger refers also to website content creator.

Can we put copied images on websites?

The first thing to consider while using images on blogs and websites is whether we have the authority to use them. Bloggers often use photographs taken by them on their travels, on growing kids etc, but some also copy photographs from the web and routinely paste them on their web pages. When the images relate to news-events, celebrities and products, people don't bother at all whether the images are copyright protected. Even if we hesitate for a moment, we shrug it off thinking that the photos on the web are of generic nature and it cannot be proved as to who shot the photo [e.g. of a protest or a famous monument]. We even use graphics that have been prepared by someone with effort and are not of generic nature. 

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. This is why we have put this as the first point for consideration while using images on blogs/ websites.

How to use images in blog posts or website articles? [What type, format, size?]

Digital images are of two main types. 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. Others are the normal types, which 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. We’ll talk of this type of images here, technically called raster images

We cannot put vector images directly on all types of websites and blogs. In future, this may not be an issue. So, let us talk about raster images only.

Raster images come in different file formats 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.

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 and photo editors are much bigger in file-size because they contain all types of information about each pixel and other meta-data. 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 that to the web host or blogging platform.

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 without much problem. 

So, for uploading on the web, save images in .png or .jpg formats if they have a lot of color mixing, such as photographs. For simple sketches, cartoons and drawings with a few distinct colors, go for .gif format. Keep the image's file-size as low as possible by cropping (=cutting from sides) and re-sizing the image and saving it at low but acceptable quality. 

Using images on blogs: dimension too is important.

The dimensions of the image are 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 will appear 100 times as large as a picture of 100x100 pixels. 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.

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 to do it for you. You will have much more control on editing if you do it on your computer rather than on the blog. [Some blog platforms now allow you to use an online picture editing tool, and it is good enough for blogging purposes.] As we'll tell you later, these simple edits can improve the quality of pictures and reduce their file-sizes remarkably.

Images on websites should have right shapes.

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 background 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.

Look at the picture below. It has a whale, elephant and man with some text written under the whale's image. This was re-sized from a high-quality image using an online image viewer. The image of 5 MB turned into 50KB (size reduced 100 times) but the image is blurred. If the image did not have text inside it, it would be passable for a website. The replica is 20 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. These are just two examples to show how picture quality suffers when do not apply right methods to resize them. (More on this in the next post in the series.)

using images on blogs correctly

As mentioned above, we'll talk more about using images on blogs and websites in these posts (these are being currently updated and will be published before 20 September):

  • Image processing and image quality
  • How to place an image in the best place on a website

No comments:

Post a Comment

We deeply appreciate comments but do not allow comments with links or spam. If your comment is valuable, we publish it and you naturally get a backlink through your profile. Pl do not comment on the same post more than once.