What You Should Know About Graphics But Might Not

Especially for online writers and bloggers, finding pictures that can be used in articles and blog posts has never been simpler. There are many sites that specialize in public domain images. Pictures can also be taken with cameras and cell phones. With all of this, there are some things about the graphical images people should know, but many people either don’t or don’t think about.

What’s the big deal?

Many people might think that it isn’t important to know much about graphics if they are just writing or blogging and including a few images. However, the typical blog or article has a file size of less than 10 kb. An image can be many times larger than this; 10 to 100 times larger or more.

This means that most blogging sites have far more space on servers taken up with graphics than with content. Graphics not only fill up available space much faster, they usually cause web pages to load slower. Additionally, if a site has a large number of graphics, they are generally more prone to memory errors and timeouts. It is in the best interest of the writers and bloggers, as well as the site, to use images with smaller file sizes.

File sizes

There are many things that have a bearing on the file size of an image. The image size, in terms of height and width, the image ‘quality’, the number of colors and shades, and the file type all contribute to the total file size of an image. We’ll focus mostly on image quality here because it is one of the easiest facets to change, using a graphics editor.

Image quality

Calling it image “quality” is misleading. People are often tempted to use the highest quality, not fully understanding that it really doesn’t have anything to do with the quality of the image that is displayed on the monitor. With this stated, we’ll use the term since it is so commonly used.

The image quality is given in terms of DPI or Dots Per Inch. The idea is that the higher the DPI, the greater the quality. This is only true to a point and it should be noted that the higher the DPI, the larger the file size of the image is. The difference can be enormous.

This is very important. Most cameras and many phones can take pictures that exceed 1200 DPI. It isn’t at all uncommon for a 1200 DPI image to have a file size of 2-8 MB. The same image at 300 DPI often has a file size of 100-300 kb or less. That is obviously substantially smaller, so it takes up a lot less space.

Partly because of the ‘quality’ label, people often think, “But a 1200 DPI picture is a better picture, right?” The answer is “Yes and no”. Our eyes can easily discern the difference between 300 DPI and 1200 DPI. However, the average computer monitor only displays at 96 DPI! Even high-end computer monitors with good graphics cards don’t display at substantially higher resolution, unless they are specifically designed for high-resolution graphics, such as in graphic design or high-end gaming.

Most people don’t spend many thousands of dollars for a high-resolution monitor, so it is a safe bet that most people are viewing images on their computers at 96 DPI.

This means that images that have a resolution of 1200 and 300 DPI are both displayed at 96 DPI. While it is more complicated than this and there is a difference in how they look when displayed at 96 DPI, there isn’t a tremendously noticeable difference between the two images. Yet, a 1200 DPI picture can take up many times more computer space than six 300 DPI pictures.

Using image editors

The image editor I use is called FastStone Image Viewer, but there many different editors. FastStone has both a free version and a commercial version and both allow a person to make many different adjustments to images. For instance, this is how I embed picture citations right in the images I use if I didn’t take them myself. Pictures can also be cropped, lightened, darkened, and so forth.

Among the other things that FastStone does, it allows a person to not only change the width and height of an image but when the changes are saved, it gives the user the option of changing the resolution too, though unfortunately it is labeled ‘image quality’. The difference in file size can be quite large, without a big difference in how it appears on a monitor, especially when it is used in an article or blog.

Here is an example. The following picture is the original.

Here is the same image, resized from 1500 x 960 pixels to 960 x 720 pixels and at 80% “quality”:

Do you see a huge difference in the appearance between the two images? If you said no, you might be especially interested to know that the file size of the top photo is 2.2 MB. The file size of the bottom photo is 236 kb. By simply resizing images and lowering the quality a little, you can save an enormous amount of space without sacrificing much.

As I mentioned, there are many image editors that give you the same sort of control over your images. Many of them are free. Most are fairly easy to use. You don’t need to be a tech wiz just to use the application.

Just a concluding note: If anyone would like to see some ‘how-to’ or ‘tip’ articles in regard to using FastStone, please say so in the comments section below. It would be helpful for knowing if it would be helpful for me to write them.

———————————————-

Disclaimer: I worked for over a decade as a technician, senior technician, and technical engineer supporting a number of scanners and the graphics software that came with them.