A website without images looks boring even with a beautiful design, theme, and fonts.
But too many images or those that don’t meet website image size guidelines can affect your website’s performance, causing your pages to load slowly.
Both visitors and search engines care about a website’s speed. Potential customers will leave in the first few seconds if there are delays in page load times.
Website visitors can’t convert if they abandon your website quickly. Your ranking will also drop on search engine results pages (SERPS) because of the high bounce rates.
Here’s the good news:
You can learn the best way to optimize images for fast-loading pages.
This tutorial will discuss image optimization, website image size guidelines, and actionable ways to optimize images for websites.
Here’s what we’ll cover:
- Best Image Size for Web
- Image Optimization 101
- Image Optimization and Website Speed
- Why You Need To Optimize Your Website Images
- How To Optimize Images for Websites
- Top 3 WordPress Plugins to Optimize Images On Your Website
- Final Thoughts: How To Optimize Images for Websites — The Ultimate Guide
Best image size for websites
When it comes to figuring out the best image size for websites, the ideal image file sizes for your website should be less than 500 KB, with a limit of 20 MB for individual images.
The dimensions of the original image width should be between 1500 and 2500 pixels for desktops and 640 by 320 pixels for mobile devices.
Image optimization 101
To optimize your website images, you must reduce the image file size so the content loads and renders quickly on a user’s screen.
You can use several methods to optimize images, including compressing large files, resizing the image, or changing the format.
You can also opt to use an image optimization tool to automatically reduce the image by up to 80% without a noticeable loss in the image’s quality.
Image optimization and website speed
If a website takes too long to load, visitors will leave. We call this “bouncing.” A webpage’s bounce rate increases with each additional second your page takes before it loads.
Optimizing your website images will become easier and quicker to load pages.
Since images are often among the heaviest assets being transferred in a browsing session, they can slow down your page load speeds.
Use images sparingly and ensure they are optimized for the web before you upload them. This will improve your website speed, reduce bounce rates, and increase conversions.
Why you need to optimize your website images
We cannot overstate the importance of images on your e-commerce website. Besides improving site speed, here are other reasons to learn how to optimize image size for websites:
- Reduces bounce rates
- Improves website performance
- Helps your page rank higher in search engine results
- Boosts conversion rates
- Occupies less space on your server
- Enhances user experience
How to optimize images for websites
The ultimate goal of image optimization is to reduce an image’s size while maintaining its quality. But images can make or break a website. Too many or large images can slow down your website and affect performance.
Here’s what you need to do to learn how to optimize images for the web without losing quality:
Use WordPress plugins
Screenshot
The ideal way to optimize images for your WordPress site is to do so before uploading them. WordPress image compression plugins are a great, automated solution to optimize images on your website.
Some of the best image compression WordPress plugins include:
Always ensure the plugin you choose is updated to work with the latest version of WordPress.
Related: Check out the best WordPress plugins!
Use image caching
A cache is a storage bank for temporary data. For example, image caching is when image files are downloaded to local storage to load faster when a user visits a website again.
Caching makes it easier to view images since users don’t have to redownload them every time they visit a website — thus, they get the information they need faster.
Image caching is an excellent way to solve issues that come with unoptimized images, like slow-loading pages.
You can improve the performance of your website by storing local copies of your website files that you frequently or have recently used.
Optimize ALT image tags
ALT or alternative text replaces an image if the image fails to display or if a visitor uses a screen reader. While users will understand a picture if they can view it, search engines will not.
That’s why you need ALT text to allow search engines to index what the image is about. So even if the images on your website fail to render, your page will still rank since web crawlers can read the ALT text.
This makes ALT text important for search engine optimization (SEO). Therefore, you should provide enough details with relevant keywords in your images’ ALT text to boost visibility.
Using ALT text is also an excellent way for e-commerce product images to appear in search engines.
Resize images before uploading
Screenshot
High-resolution and large image dimensions (i.e., their height and width) are excellent for print production but are unsuitable for websites. You need to reduce the file size for images to load correctly on your website while maintaining high quality.
You can resize the image file dimensions using editing software like Adobe Photoshop to reduce your images’ overall file size.
Host images on a CDN (Content Delivery Network)
Hosting your images on a content delivery network (CDN) will enable them to load faster on web pages.
A CDN stores your cached website content in different geographical locations to help minimize delays in loading web content. It does that by reducing the distance between the visitor and the server.
For instance, if your server is in New York, and a user in Sweden visits your website, the CDN serves them using a server closest to them — not the one in New York.
Choose the right file type
You need to choose the correct file format for your images because it affects their optimization and the total image size. The most popular file formats for images on the web include:
- JPEG/JPG (Joint Photographic Experts Group) is a lossy image format that approximates what your original image looks like.
Lossy compression means that the image quality decreases with the file size and might remove any unnecessary data on your image. Using a JPEG image results in smaller file sizes and offers the best image size for product images and homepage hero banners.
- PNG (Portable Network Graphic) is a lossless image format and carries the largest file size while offering high-quality images. Lossless compression means nothing from the original file is lost after compressing the PNG files.
PNG images typically maintain their quality after compression. Therefore, it is the best choice when your image needs a transparent background, such as logos, illustrations, or icons.
- GIF (Graphic Interchange Format) is a lossless format widely used for animated images in social media memes and banner ads.
Use a lazy loading plugin
Screenshot
Lazy loading means delaying loading images on your website until you get close to the image. The image at the bottom of the page loads just before you get to it instead of loading with the entire page. Since only a few images are loading, you save on bandwidth, and your website performs better.
We recommend adding the Lazy Load by WP Rocket plugin to your website if you use WordPress.
Compress images
When you compress your images, you must strike a perfect balance between quality and size. Avoid compressing your images too much. In contrast, compression will result in smaller image sizes and lower quality.
Minimal compression, on the other hand, results in larger but higher-quality files.
There are a few ways to compress your images:
- Use image editing tools like Adobe Photoshop or ImageOptim
- Use web compression tools like JPEGmini or TinyPNG
- Use WordPress image optimization plugins like Optimole that automatically compress new images when you upload them to your website.
Top 3 WordPress plugins to optimize images on your website
Here are the three most important WordPress Plugins to optimize the images on your website.
Imagify
Imagify (4.8 out of 5 stars) dramatically reduces image files without losing quality, which makes your site load faster. In addition, the plugin gives you 25 MB for free each month (about 250 images).
Paid plans start at $5 and can go up to $70 per month, depending on your needs. “Imagify adds a screen to your dashboard where you can set the compression level for bulk optimization,” Cavanagh explains. “The ultra level will reduce your file size but keep the image quality the same.”
ImageRecycle
ImageRecycle (4.5 out of 5 stars) offers PDF optimization and compressing JPGs, GIFs, and PNGs. This plugin gives you 100 MB of data as part of a 15-day trial. The good news: 100 MB should be enough to optimize all images on an average site.
While ImageRecycle costs money (between $10 and $50 depending on how many photos you’ll upload during the year), it backs up the expense with extra features, like dashboard functionality and email updates.
“Another nice thing about ImageRecycle is it runs in the background, so it doesn’t affect anything else you might be doing on the site,” Cavanagh says. He estimates that optimizing a larger site would take 30 to 45 minutes.
EWWW Image Optimizer
EWWW Image Optimizer (4.5 out of 5 stars) automatically optimizes your images as you upload them to your site. While this plugin lacks the upgraded features of Imagify and ImageRecycle, this free option is a good entry-level optimizer for small business owners.
“On the whole, it is a very solid option that produces good results at no cost,” Cavanagh adds.e
Honorable mentions
- TinyPNG gives you 100 images a month using its free API key. TinyPNG works on JPG and PNG images.
- Optimus has a free option but only supports JPG and PNG images up to 100 KB in size. The business version costs $99 per year.
- Kraken will give you 100 MB of free image optimization. Kraken’s paid options can be purchased on a monthly or annual basis.
- WP Smush works on JPG, GIF, and PNG images. It supports files up to 1 MB in size. You’ll have to upgrade to WP Smush Pro to optimize larger files.
- ShortPixel gives you up to 100 images a month for free. However, the paid option plans are well-priced, ranging from $5 to $30 per month.
- reSmush.it Image Optimizer supports JPG, GIF, and PNG images up to 5 MB in size.
Final thoughts: How to optimize images for websites How To Optimize Images for Websites — The Ultimate Guide
You have now learned how to optimize images for your website to improve page speed. However, if you’re not using optimized images or following website image size guidelines, you should start doing so.
With many customers using mobile devices to access your website, you must ensure optimal file sizes and formats.
If you’ve implemented these strategies and are still not impressed with your website’s loading time, it might be time to move to WordPress hosting.
This will significantly improve your page load times and help you rank higher in search engine results while improving your website’s overall performance. Try Bluehost’s WordPress hosting today.
