Wooassist

Assistance for Your Woocommerce Store

  • How it Works
  • Pricing
  • Site Maintenance
  • Blog
    • How-To Articles
    • Code Snippets
    • SEO For E-Commerce
    • Theme and Plugin Reviews
    • Wooassist News
    • WordPress/WooCommerce News
    • Interviews
  • About Us
  • Contact
You are here: Home / How-To Articles / Improve Website Page Load Speed by Optimizing Images for Web

Improve Website Page Load Speed by Optimizing Images for Web

February 15, 2015 By Nick J Leave a Comment

optimize-images-for-web

Optimizing images on your website whether it’s an e-commerce store, a blog, or both is one of the most important things thing that you can do to improve its performance. And it shouldn’t be a complex task really. Sure, high-res images look great but when you’re loading a 2MB image, it’s going to do more harm than good.

Essentially, you’re going to want to aim for a small image file size without compromising quality. As a rule of thumb, don’t let the images look bad or pixelated just for the sake of being smaller in size. You should strike a balance between a good-looking image and an acceptable image size. Here are a few ways on how to optimize images for the web.

Optimizing Images for Web Using Photoshop

Optimizing images for the web is not at all difficult. If you have Photoshop (or any other image editing software), it’s a very simple process. Open the image on Photoshop and resize or crop your image to the appropriate size.  Remember, when sizing images, the images you plan to use should not have a larger resolution than the image placeholder.

When you have resized your image to the appropriate resolution, click on File and Save for Web (Ctrl + Shift + Alt + S). Here you’ll be able to set the quality of the image while being able to see if the image still looks good. The image should not look pixelated and not have artifacts. In the bottom left section, you can see the file size of the image. You’re going to want to aim for an image that looks good, is not pixelated, and is less than 100kb in size — the smaller the size the faster the image loads on the page. On the upper right-hand section of the “Save for Web” window, you can use available presets or set the quality to your desired quality. Make sure you have the Optimized box is ticked and choose the correct file type. When you achieve a small file size with a good-looking image, click on Save.

Optimizing-Images-with-Photoshop

A Note on Image Types

image-file-types

An important thing to note to make images look good even as you scale them down is to set the correct file type. Notably, the JPEG type is used for photos as it supports the most number of colors at 16 million. PNG is the better choice if you’re working with graphics such as logos and icons since it makes use of lossless compression. Lossless compression means that the image can be made smaller without affecting quality. PNG supports thousands of colors as well as transparency. JPEGs don’t support transparency.

GIF images are similar to PNG. It uses lossless compression and supports transparency. It however can only store a measly 256 colors. Using GIF images on web pages is generally not recommended.

Serve Images in WebP Format

We also recommend converting your image files to the modern webp image file format since these are smaller in size and are thus recommended for achieving optimum site performance. Uploading webp files are still not recommended however as there are still devices and browsers that do not support it. There are however plugins and services that allow converting regular image file types to webp and serve these images when it is supported by the user’s device. WP-Optimize is one plugin that provides free webp conversion.

Optimize Images Using WordPress Plugins

We also recommend having an image optimization plugin installed on your WooCommerce store. There are many image optimization plugins to choose from such as EWWW Image Optimizer, reSmush.it, Robin Image Optimizer. Once you set up these plugins, they will optimize your images on upload. Do note, however, that these image optimization plugins will not alter image resolution so it is still recommended to upload images in the correct resolution not exceeding the image placeholder size.

Properly Naming Files

A thing to note when naming files is to name files as they are. Don’t name files after a keyword when it is not appropriate. If you’ve got an image of a child playing the violin, name it something like “child-playing-violin.jpg” and not something like “learn-violin-online.jpg” or “free-violin-course-online.jpg”. If you try to force your SEO keywords on your image file names, your site may be flagged for overoptimization.

Optimize your images to ensure your site performs well. A fast e-commerce website provides a good user experience which translates to better SEO rankings and improved conversion rates.

People that read this article also liked

woocommerce-speedHow to Speed Up Your WooCommerce Store superhero-silhouette-hero-imageHow to Add a Hero Image in Storefront How to Use a CDN to Speed Up Your Website Preparing Product Images for WooCommerce

Filed Under: How-To Articles Tagged With: best practices, conversion optimization, how-to, image optimization, optimizations, page speed, photoshop, plugins, site speed optimization

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Woocommerce Support

wooassist-team-in-Iloilo

Get 2 Hours of
FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Happy Wooassist Customers

Awesome! Fantastic! I just went to our site and I see that our site has been fixed!! We are getting orders again thanks to you all at WooAssist! Our site has not worked and looked this good for many months!! You all are awesome! Thank you so much for fixing our site! You have a customer for life! Thanks for making my day wonderful!

Kenneth Arnold

We have been quite pleased working with WooAssist as they help fill in the gaps of our development needs, all at a great price. They are always timely and communicate great, I highly recommend their services.

James Grasty

My husband and I am EXTREMELY pleased with the WooAssist Team. They provide excellent service, are very knowledgeable, and super easy to communicate with. The team ALWAYS has our company's best interests in mind. I love WooAssist! All of you make my job easier.

Jennifer Taft leetaft.com

Categories

  • Code Snippets
  • How-To Articles
  • Interviews
  • SEO For E-Commerce
  • Theme and Plugin Reviews
  • Wooassist News
  • WordPress/WooCommerce News

Recent Posts

  • WordPress Site Gets Infected
  • Where to Hire a WooCommerce Developer?
  • Recent Spike in Attacks Targeting Outdated WordPress Plugins
  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
  • How to Fix Any Issue in WooCommerce – A Step by Step Guide
Let us support your online store so you can manage your business

Get started today

Get 2 Hours of FREE SUPPORT

We are so confident that you will love our services that we will give you your first 4 hours at a 50% discount

That's 4 hours for only $75

BUY NOW

Free eBook

Your subscription could not be saved. Please try again.
Your subscription has been successful.

YOURS FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales

Quick Links

  • How it Works
  • Pricing
  • Blog
  • Contact
  • About Wooassist
  • My Account
  • Checkout
  • Privacy Policy
  • Cookie Policy
  • Terms and Conditions

Wooassist

Australia:
8 Storie St.
CLONTARF QLD 4019

Philippines:
San Miguel St.
Poblacion, Iligan City 9200

Connect

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

Copyright © 2023 · Wooassist

Yours FREE!

5 Things Every Online Store Can Fix On Their Website In The Next Week To Increase Sales