Website Tips Blog > How to Optimize Images for Websites
How to Optimize Images for Websites
Developing images on film used to be difficult. Today, optimizing images for fast-loading, high-quality websites is easy with the tools and tips outlined here.
Images play a crucial role in the success of any webpage, as they're often the first elements visitors notice.
Images can set the tone of the entire site, make the content more inviting, and help communicate a page's primary message. In many ways, images are every bit as important as words to the success of a website.
Including images in your webpage, however, can come at a cost when not done correctly. Poorly chosen or prepared images can cause visitors to question the credibility of a website and its brand.
Since images often account for 60% of a webpage's size, optimizing them can greatly impact loading speed, user experience, and search engine rankings. This is especially true for eCommerce pages where image quality can directly affect sales.
In this post, we'll cover almost everything you need to know about optimizing images, so that they become a real asset to your site, rather than a liability.
Preparing fast-loading and good-looking images for the web
Preparing the Images
Before optimizing or uploading, follow these steps to ensure your images are ready.
Choose the Right Visuals
Select images that add value, engage the reader, and create an emotional connection. Well-chosen and strategically placed images make a page much more inviting than just solid text.
Choose the Right Format (MIME Type)
Initially, save images in the appropriate format for your content. The two most commonly used formats are:
- JPG: Best for photos or images with soft transitions between colors.
- PNG or GIF: Ideal for logos, icons, or images requiring sharp edges and transparency.
A little bit lower on this page, in the optimization process, we'll be addressing modern image formats like AVIF and WEBP, which offer even smaller file sizes while maintaining quality and are increasingly supported by most browsers.
Resizing and Cropping
Ensure image dimensions match their maximum display size on the page. Avoid oversized images that can slow loading times and impact search rankings. Considering that you're likely have visitors coming from desktop computers, tablets, and smartphones, offering large images at three widths is common: 1024px, 798px, and 480px, which we're about to discuss.
There is no need to manually create multiple sizes, however. You can generate different sized versions using a tool like Squoosh during the compression process, which is next on our list.
Optimizing the Images
Reduce file size and make images web-ready.
Compressing Images
We love the free online tool, Squoosh! It's amazing at resizing and compressing images, especially the JPG-style continuous tone images. It does an OK job for PNGs and GIFs, though it doesn't compress those as well as another online tool we like, TinyPNG. Squoosh also converts to WEBP and AVIF, which tend to compress to smaller file sizes without sacrificing quality.
- AVIF: Produces the smallest file sizes for both photos and sharp-edged images and has growing, though not yet complete,support among the different browsers.
- WEBP: Provides good compression, especially for transparent or animated images. And it's almost universally recognized among browsers.
Getting the Images on the Web Page
Follow these technical steps for optimal quality and speed.
Responsive Images
Rather than offering one image size, offer multiple sizes of an image in order to optimize loading speed on various devices, such as phone, tablet, and desktop. Here are three methods to achieve this:
Three Ways to Implement Responsive Images
Figure Tag: Useful when including captions with images.
HTML
<figure> <img src="image.jpg" alt="Description"> <figcaption>Caption here</figcaption> </figure>
Img Tag with Srcset: Allows for different sizes of the same image. The browser picks the most suitable size for the screen. (Simplified code shown here. For more control over browser behavior, a longer version is also available.)
HTML
<img src="image-small.jpg" srcset="image-large.jpg 1024w, image-small.jpg 640w" alt="Description">
Picture Tag with Srcset: Provides multiple image formats (e.g., AVIF, WebP, JPG) at various breakpoints optimal download and rendering speed while guaranteeing broad browser compatibility. (Simplified code shown here. For more control over browser behavior, a longer version is also available.)
HTML
<picture> <source srcset="image-large.avif 1024w, image-small.avif 640w" type="image/avif"> <source srcset="image-large.webp 1024w, image-small.webp 640w" type="image/webp"> <img src="image-small.jpg" srcset="image-large.jpg 1024w, image-small.jpg 640w" alt="Optimized image"> </picture>
Define Image Width, Height, or Aspect Ratio
It's important to specify the image's dimensions or aspect ratio, especially for responsive images. This tells the browsers how much space to reserve for the image prior to full download. This helps to avoid content layout shifts (CLS) as the page is loading, which is also a search engine penalty.
HTML
<img src="image.jpg" width="400" height="600" style="width:100%; max-width:800px; height:auto;" alt="Description">
<img src="image.jpg" style="aspect-ration:4/3; width:100%; max-width:800px; height:auto;" alt="Description">
Lazy Loading Images
The loading="lazy" attribute delays image loading until the user scrolls near them. While this doesn't reduce actual download time, it improves the visitor's perceived page speed and enhances the user experience.
HTML
<img src="image.jpg" loading="lazy" alt="Description">
Preload Critical Images
Use rel="preload" for important images, like hero images, icons, fonts, and scripts that will be needed early in the page. This prioritizes their loading. Note the as="image" property in the tag. Browsers need to know what kind of resource they're proloading in order to handle them properly.
HTML
<link rel="preload" as="image" href="image.jpg">
Avoid Using Images When Possible
Using CSS for Buttons and UI Elements
Modern CSS eliminates the need for images for elements like dropshadows and buttons. For example:
CSS Sprites, Fonts, and SVG for Icons
Use CSS sprites to reduce the number of image requests by combining multiple icons into a single image file. Below are 1) working example and 2) the icon-set image that is being slid around to appear in each of the three div 'windows.' (Hover effect can be added by sliding highlighted graphic for each of the icons.)
While image sprites used to be common in web development, they are becoming less necessary since newer techniques like icon fonts and SVG files were introduced. Here are examples of those:
SVG (flaticon.com)
Font Icons (Font Awesome)
Create an Optimized Image ALT
Though we'll be discussing the image alt tag in our post on how to optimize images for SEO, the alt tag is too important to ignore here. The alt tag is a text description of its image. This description will display on the page if the image fails. And it is an important signal to search engines so that they can better understand your images and your page. One often overlooked benefit is that a keyword rich (but accurate) description in the alt tag can help your image appear highly in Google Images, which is another way to drive traffic to your site.
HTML
<a href src="large-image.jpg" alt="image description" width="400" height="400">
Delivering the Images Efficiently
The following items were covered in a previous post discussing how to make your website load faster, but we will mention briefly them here:
Content Delivery Networks (CDN)
Using a CDN to cache and deliver your pages and all static elements (html, images, scripts, CSS, and other static assets) can significantly improve the loading speed of not just your images, your website in general. And, because CDN services have a large number of servers, spread around the world, all serving your site, it can eliminate site's 'downtime' in the event there is a problem at your single hosting server.
Image Caching
Browser caching helps in two ways: 1) enabling images that are common between the pages of your site (logo, social media icons, etc.) to load almost instantly after visiting the first page and 2) when users revisit your pages, those entire pages will load quickly from their local device's memory, rather than having to request those elements again from the website server.
Gzip and Other Web Server Compression Formats
By compressing website files (up to 80% or more), these technologies can reduce website loading time to improve visitors' experience and boost search engine rankings.
Secured Server (SSL)
When combined with optimisation techniques like HTTP/2 or caching, images and all elements on secured website tend to load quicker.
Regular Image Audits
Use tools like Lighthouse, GTMetrix, or Pingdom to regularly assess if images are slowing down your pages.
By incorporating the strategies listed above, you should be head and shoulders above most of your competitors when it comes to delivering high quality, quick-loading images to visitors on all devices. And as result, you'll be improving the performance of your website overall and enhancing your user's experience.
Have questions, comments, or suggestions regarding any of the information provided here? Please email is at info@joeweb.com. If we add your input to improve this page, we'll be happy to give you a shout out!
We're easy to work with!
AIf you’re looking for an affordable and experienced website design agency, contact us at Joe Web site design in Asheville, NC. With nearly 30 years of experience, we specialize in building effective websites for small businesses. Call us today at 828-551-9761
Back to top
EMail: 
