2 5.14 Web Design Image Optimization

Web page mockup layout
Image source: 10 Best Website Optimization Techniques
Website users usually respond better to pictures and images on a web page than they do to text. In the LinkedIn Learning course HTML: Images and Figures by J. David Eisenberg, he explains the various ways to display graphics on web pages. Before placing any graphics or images on your site, you must first learn about the different image formats—which include GIF, PNG, JPEG, and SVG.

Optimizing web images is a process of displaying high-quality images in the correct format, dimension, size, and resolution while keeping the smallest possible size. In learning more about image optimization, I recommend How to Optimize Images for Better Web Design & SEO. This blog explains image optimization from one format to another and offers a list of sites where you can download free high-quality stock photos for personal and commercial use. I like that it gives examples of image placement and file naming for better SEO results.

    
Caparison of two images in which one is the original and on the right the image is distorted and blurred.
The image above displays a comparison of the original image and a disproportioned stretched-out version. Image is courtesy of Unsplash.

A few of the main benefits of optimizing and formatting your images correctly are that it improves page load speed & user experience, and save memory & reduces the load on your server. If you just upload your images to your website as they are, they will slow down your website load times and overall speed. You will want to find the right balance between size and resolution to retain the quality of your images. For images throughout your site, it is good practice to select images that help your audience in understanding the subject matter.

Image Placement

Image placement affects your page layout, which can look messy & disorganized when using different-sized images and placed with no “flow” to the page. It is ideal that every web page should have an image at the top. This is the area that viewers will see right away on visiting your website. This will immediately establish a relationship with your targeted audience by incorporating a relevant image at the top of a web page. It is recommended to use stock images carefully and in small amounts because they can be less relatable to your site’s personality.

Image Sizing & Optimization Tools

There are a plethora of online resources available to edit your web page images if there are none installed on your local PC or laptop.

For image sizing, here are a few that you can utilize to maintain image quality:

• Adobe Express
• http://www.onlineimageresize.com/
• Social Media Image Resizer
• BeFunky

For image optimization, here are a few of the best ones to use:

• JPEG Optimizer
• JPEG.io
• Compressor.io
• Optimizilla

Closing thoughts

When we talk about how to “optimize” images for the web, you can think about it in three ways: making images look good, making images load quickly, and making images easy for search engines to suggest. Images make up on average 21% of a web page’s overall weight so optimize them! With a little careful consideration, images can be a powerful type of content that will enhance the user’s experience on your website.

olinbjork

Note: This chapter is a revised version of a blog post titled “Web Design Image Optimization” on My Web Development Experience.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Publishing for the Web Copyright © by TCOM 3335 (Spring 2021 and Fall 2022) at UHD is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book