How does Image Optimization Work on Websites?

by Shelley Magnezi | Jan 28, 2017 |

The number of do it yourself websites has expanded like a mushroom cloud. Large companies and even smaller agencies offer plans where a user with no prior programming experience can set up a website using their software. Although some software includes images, it does not prepare the user for inserting appropriate images.

“A picture is worth a thousand words.”

A striking photograph can enhance your brand and express emotions. Poor graphics and images can impair the quality of the site. It is preferable to include high quality stock photography to grainy and blurred photographs or personal pictures.
There are two categories of images: Images with story appeal and Images which demonstrate. An image with story appeal evokes curiosity and triggers the reader to read the post. It should be placed at the top of the post. Images that demonstrate create a visual explanation of text on the site or are used to simplify an explanation. Included in this category are charts, before and after pictures and product images.  These visual elements can be used to boost your SEO and attract more visitors to your site. Selecting an appropriate image relevant to the content is only part of the required effort. The other part is having a clear grasp of file formats, size, and optimization.

A few guidelines
1)  Images slow down the time that it takes a page to load. In order to justify the time, they should be superb, highly relevant and optimized for the space that they take up on the page.
2)  Captions are read more than copy – according to Kissmetrics .
3)  If there is a long article, a visual is a good way to break up the space
4) Many users scan headlines and images without reading text.

Using the correct file format:

The file formats mostly used on web are jpg, gif and png. If your file is in a different format, you will need to convert it. On Windows, I use Microsoft Office Picture Manager.

Best image online editors:

• PicMonkey
• Pixlr 
• FotoFlexer allows you to work with layers!
• Lunapic 
• Krita – tools for editing digital drawings and illustrations

Image file formats for web

.jpg

A pixelated jpg

.jpg is the format preferred by photographers. It uses an algorithm to compress the image whilst maintaining the balance and quality of the image. However, compressing it also degrades the quality and removes the details, so it may be advisable to save a copy of the original image. Excessive compression causes distortion viewed as small checkered patterns on the image known as “jpeg noise”. Different photos need different compression so attempt different compressions whilst viewing the result in order to achieve a usable photo with a small file size.

.gif

GIF is the older format adopted by the original designers of the World Wide Web for flat color graphics. It was created in the 1980’s and is pronounced ‘jif’ as in ‘jiffy’. GIFs are less

.gifs have a smaller color range and are good for logos and icons

popular due to the fact that they can accommodate a smaller color range, but are still are popular for their ability to save multiple frames within a single file. This allows one to make an animation which is still gaining popularity. Limit the use of these files in a web site since reading the text can be interrupted by the movement on the screen.

via GIPHY

GIFs compress color well without losing data or distorting the image. In addition they allow us to set one color to be transparent which can be very helpful when placing graphics over a colorful or photographic background or for logos. Compressing a photo using a .gif means switching from many colors to a few colors and can lead to a grainy look known as “dithering”. Gifs are good for logos, diagrams and infographics.

.png

.png files show opacity and allow transparent backgrounds. The grey squares indicate a transparent background.

The PNG file is relatively new and created specifically for web purposes. . Animated pngs (MNG, for Multiple-image Network Graphics or APNG, for Animated Portable Network Graphics) are superior in quality to gif animations due to their cleaner, brighter, vivid images with cleaner edges and transparency options. However, due to the fact that they are poorly supported, the files degrade to static PNG images on clients with no support. Aside from the animation feature pngs have replaced gifs in all other respects, since they support a large range of color depths, and different levels of transparency. Pngs are excellent for line art, text, and logos—images that contain large areas of homogenous color with sharp transitions between colors. They can also be used for photographs and are good for backgrounds; however the file size is larger than for a jpg file.

Which kind is best?
It depends…

jpg – good for photos. Cons – may cause loss of detail
gif – good for line art, logos, images with solid areas of the same color and animation. Poor for photographs.
png – good for both photographs and line art. Good for compressing photos without losing detail. Con is that the photo files are larger than jpg files.

What do you prefer?

Using the correct file size

File size refers to the amount of space that the file occupies on a storage device. The smaller the file size, the faster it will load on a website. It is important to determine who is viewing your web page and their location. Some users have slower internet connections, older devices or are using their phone. If the image takes too long to load, they may abandon the site. Google recommends a maximum load time of two seconds.
Photos taken using a mobile device may be very large. The question is whether we need to load such a large image? If the user needs to wait more than 2 seconds because of that image, he could abandon your site. As of July 2018, the time that it takes for a mobile site to load will be a ranking factor on Google Search Engine.

Resolution

One of the ways of reducing file size is by reducing resolution. If you enlarge a photo, you may notice that it is comprised of little squares. Each square is known as a dot and the resolution is measured in dpi (dots per inch). Most computer monitors will display a maximum of 72dpi so having a resolution higher than that will only serve to increase the file size. (If you have a resolution of 72 dpi and your image is 6 inches wide, then your image will be 72 x 6 = 432 pixels.)
Most desktop monitors are at least 1,280 pixels (px) wide. Some may have very large monitors – 1,920 px, 2,560px or even larger.

WordPress defines default image sizes as follows:

• a Large version (default 600px)
• a Medium version (default 300px)
• a Thumbnail (default 150px)

I usually load the image files onto my site at the maximum size that they will display. (If I am designing for desktop, then a quarter of the screen will be 1280/4=320px wide). Loading a larger file means that it will be resized by the browser and the time it takes for the page to load will increase. If you make the image too small and it is being viewed on a larger screen, the quality will be blurred and pixelated. (The best bet is to look at your analytics report to see what size screens your visitors are using.)

There are tools for analyzing web pages and testing page speed and they will generally give a report on which images should be compressed in order to enhance page loading speed.

Best resources to optimize images:

• TinyPNG For compressing jpg and png files online 
• Imagify (online, free & paid options)
• ImageOptim  ( Mac)
• PNG Gauntlet  (Windows)
• Trimage (Linux)
• JPEGmini ($20, Mac & Windows)
• More here  from Mashable

The eyes of the subject should be 2/3 of the way up

Cropping

In many cases, the image available has a lot of irrelevant background and cropping it would help to focus on the important part. When cropping, remember to leave some space around the element in focus and don’t place it dead center. People or subjects are more appealing when placed off center.  I am forever grateful to Kylos Brannon for teaching me about the rule of thirds in a cellphone photography workshop. The rule of thirds in photography divides the image horizontally into 3 strips. The frame of the picture should be divided into 9 like a tic-tac-toe frame, and the objects should be aligned along the lines. They need not be aligned dead center. They can be off a little, but using this technique creates better images in photography and can also be used when formatting images for web pages.

Alt text and title text

Screenshot of Google Lunar New Year Alt Text

Sometimes the link to an image is broken and the only clue that the reader has to the image is the alt text. The alt text is also used by visually impaired people to read your post. As mentioned in Wikipedia : “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.” Be sure that your alt text includes the relevant keyword and relates to your image. Google places a high value on the alt text to determine what the image is portraying, and also to determine the text content adjacent to the image.

Resources

Finding images on the internet is easy. Copying or downloading images without verifying the licensing can expose us to exorbitant legal fees in the form of copyright infringement penalties. (See Blogging.com’s guide to Copyrighting your blog content.)Paying for a royalty free service like Shutterstock is well worth the investment. Be mindful that the same business photos of people shaking hands that you are downloading from Shutterstock are being universally used in thousands of websites. Where possible get professional pictures of your business, or use your own images.

For further information on copyright see What every website owner should know about copyright trolls.

Conclusion

High quality images and photographs will set your website apart and make it unforgettable. In order to maximize this tool, remember to prepare your image by selecting the appropriate file format, size and image resolution.Crop and resize as necessary to focus the subjects. Find the balance between a good image and small file size so that the website looks great and loads quickly.