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

Facebook0
Twitter0
Google+1
LinkedIn7

optimize-images-for-webOptimizing images on your website whether it’s an e-commerce store, a blog, or both is the single best 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 an image size of less than 100kb but if you can go smaller without compromising quality, then better. 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-with-Photoshop

Optimizing images for the web is not at all difficult. If you have Photoshop, it’s a very simple process. You don’t have to be a Photoshop wizard. Just open the image on Photoshop and resize or crop your image to the appropriate size. If you have a style, which you should, you should preset image sizes that you should be using. When that’s done, 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. On the bottom left section, you can see the 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.

Optimize Images Using WordPress Plugins

If you don’t have Photoshop or just don’t have the time to do optimization for every image you add to your e-commerce store, there are a few WordPress plugins like WP Smush.it that can help you optimize your images. Just upload images as you normally would and the plugin will do its work behind the scenes. You don’t have to do anything extra; the plugin does it all for you. You only have the option to optimize all the images you have previously uploaded but it’s going to take a lot of time especially when you have a lot of images to work on. The free version of the plugin cannot optimize images larger than 1MB though.

A Note on Image Types

image-file-typesAn important thing to note to make images look good even as you scale them down is to set the right file type. Notably, the JPEG type is used for real 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 which JPEGs don’t support.

GIF images are similar to PNG. It uses lossless compression and supports transparency. It however can only store a measly 256 colors. The only reason that you should be using a GIF image is if you’re using an animated image. While PNGs can do animation, it is currently not supported by many browsers and systems.

Properly Naming Files

A thing to note when naming files is to name files as they are. Don’t name files after a keyword. If you’ve got an image of a child playing a violin, name it something like “child-playing-violin.jpg” and not something like “learn-violin-online.jpg” or “free-violin-course-online.jpg”. Believe it or not, this is better for your SEO.

Hope these help in making your site load faster. What other steps do you take to improve your page load speeds? Do you have some advice you’d like to share? Let us know in the comments.

We’ll be covering more steps on how to improve your page load speeds in future posts so stay tuned.

People that read this article also liked

  • How to Add a Hero Image in StorefrontHow to Add a Hero Image in Storefront
  • How to Speed Up Your WooCommerce StoreHow to Speed Up Your WooCommerce Store
  • Preparing Product Images for WooCommercePreparing Product Images for WooCommerce
  • 10 Things You Can Do Right Now to Improve Your WooCommerce Store10 Things You Can Do Right Now to Improve Your WooCommerce Store
Facebook0
Twitter0
Google+1
LinkedIn7

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

  • Security Vulnerability in Spam protection, AntiSpam, FireWall by CleanTalk
  • How to Fix Any Issue in WooCommerce – A Step by Step Guide
  • Do This Right Now to Protect Your WooCommerce Website from Credit Card Attacks (And Save Yourself From Enormous Fees)
  • Elementor Ecosystem of Plugins Rocked by Vulnerabilities
  • How to Fix Your Website Structure
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 © 2022 · Wooassist

Yours FREE!

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