How to Optimize Images for Your Website

Make no mistake! In the Internet world, speed matters. So, I applaud all you new website owners who are seeking info on how to optimize images for your website.

Naturally, we want a site that’s aesthetically appealing, right? We know our readers are visual and hard-wired to respond well to relevant imagery. And, who can possibly forget that “a picture is worth a thousand words”?

So, there you have it. The image dilemma!

The desire to engage readers with a visually attractive site is in constant conflict with the negative consequences of a slow performing site. The size of your graphics can wreak havoc with your website’s load speed with devastating results.

But, have no fear. You can adopt some best practices today that will keep your site loading speedily while still remaining attractive and visually satisfying.

We’ll thoroughly address the topic of image optimization in the following sections:

Feel free to follow along with me or use the links above to customize your experience and jump right to the section that interests you the most.

And, we’re off….

Why Does Website Speed Matter?

Inquisitive users everywhere are constantly querying in search of solutions to a vast array of problems. And, we want instantaneous results because that’s what we’re conditioned to expect.

Your website offers stellar solutions to a multitude of keyword queries. But, can you serve up your content fast enough to satisfy web browsers?

Survey data compiled by Akamai and Gomez.com suggests that 40% of web users tend to abandon a website that fails to load within 3 seconds. Wow! Patience may be a virtue but the harsh reality is that most of the potential visitors to your site don’t have any.

Slow loading websites quite literally repel visitors and send them scurrying to find the competition. And, naturally, Google will not reward a slow-loading website with high rankings because of the poor user experience,

On September 24, 2018, Google celebrated 20 years of search engine success. In this fascinating look forward at the next 20 years of Search, Google strongly reinforces their commitment to a focus on the user and providing the user with the “most relevant and highest quality information as quickly as possible”.

Why Does Website Speed Matter

So, how is your website doing in the quest to achieve a 3-second load time? Drop me a line in the comments.

Helping your visitors get their answers faster is crucial because website speed does indeed matter! Rocket your site to success by focusing on providing a superior user experience.

What is Image Optimization?

In simple terms, image optimization is a process that involves saving bytes. The objective is to deliver graphic images on your site that have the smallest possible file size but still retain reasonable visual quality. It’s often possible to reduce file sizes by 50% or more with no discernible difference in quality.

Here are a few of the ways that we can shrink image file sizes for use on the web:

  • Reduce the resolution of photographic images, High-resolution photos are often insanely huge files that don’t display any more clearly on your webpage than a much lower resolution image.
  • Choose the best file format (png, jpeg, gif or perhaps a newer jpeg-xt or WebP) for the image content.
  • Properly size and save images to the desired display dimensions before you upload the file rather than uploading larger sizes and re-sizing after the fact.

  • Compress images to strip out unnecessary metadata and other hidden elements that can needlessly bloat your image file sizes without contributing to a better reader experience.

How to Optimize Images for Your Website and Improve Performance

As I’ll discuss further in the following section, I no longer have to take any incremental steps to optimize the many images on my WordPress website because my hosting provider has cracked that code.

Image optimization, along with a built-in library of over 1,000,000 free images, is an automatic and integral component of my writing tool. If that sounds pretty sweet, let me assure you it’s awesome!  🙂 This is a relatively recent Wealthy Affiliate update and much appreciated.

Compress Your Images

For my first two years as a site owner, reducing and compressing all of my images required rigorous attention to detail. My mission is an excellent user experience and failure to deal with huge graphic elements is not consistent with that goal.

So, if you’re not yet hosting your site through Wealthy Affiliate, you’ll want to adopt one or both of the following practices to ensure proper optimization of all of your images.

1. Use TinyPNG to Compress all PNG or JPEG Files

TinyPNG is a free Internet service that uses a technique called lossy compression to significantly reduce file sizes. The tool offers a simple drag and drop interface. Shrink all of your images first, save the files in the new smaller and compressed format, and then upload the images to your website.

By utilizing this technique, you will consume less bandwidth and your pages will load noticeably faster.

2, Install an Optimization Plug-in in WordPress

There are several good plugins for your WordPress website that can accomplish both bulk compressions of images that are already uploaded to your site and on-going optimization as you add new files. One of the best choices is EWWW Image Optimizer which is a free plug-in.

EWWW Image Optimizer Plug-in

Of course, adding plug-ins to your site is also fraught with issues because too many plug-ins are yet another source of slow loading speeds. So, consider how many plug-ins you already have installed.

My Secret Weapon – SiteContent and Cutting-Edge Technology

SiteContent is an amazing writing tool that is available to members of the Wealthy Affiliate platform. There are numerous helpful features of this tool that create efficiencies for bloggers. But the aspect I want to hone in on today is the automatic compression of all images published to a website through SiteContent.

I find this to be an awesome time-saver that has greatly improved my site’s performance, my rankings in the search engines, and ultimately my conversions, If large images have brought your site to its knees, you will definitely want to consider this alternative.

Fortunately, you can give SiteContent a thorough test drive by creating a completely risk-free Starter Membership today. You won’t regret this action and that’s a promise from a long-term premium member.

How to Check Your Website Speed

I highly recommend using Google’s PageSpeed Insights on a routine basis to check your website speed. This free tool will analyze your site’s performance and provide invaluable insights along with a list of suggested optimizations.

Just key in your website URL and click analyze to receive your free report. Various factors may be slowing your site down but images tend to be the biggest culprit.

Did your site receive a green light for both Desktop and Mobile Users as mine did?

PageSpeed Insights Analysis

Please keep in mind that your potential website readers have other options. Don’t frustrate your users and send them elsewhere because you have a lazily loading site! My website is lightning fast and your’s can be too if you take action.

Summing Up

Knowing how to optimize images for your website is an essential piece of information for any blogger or webmaster. Site loading speed is certainly not the only determinant of success. Google uses roughly 200 different factors in determining your site’s position within the SERP’s.

But speed is unquestionably one critical factor that influences the search engines because it makes your readers happy.  “I don’t want to rank higher in Google” was said by no website owner ever!

So, it does indeed make sense to test your speed regularly and take prompt action, including image optimization, to correct unacceptable loading times.

Over to You

I hope you’ll jump into the comments below and share your page speed results. Is your site suffering from image bloat or like my site does PageSpeed Insights indicate that all images are optimized? Please let me know if this was helpful.

Like It? Please Share It!

 

Learn to Earn at Home Online

Sharing is caring!

14 thoughts on “How to Optimize Images for Your Website”

  1. Hello Linda, thanks for the honest and thorough post about how to optimize images for your website. I am an affiliate marketer and having a slow website can be very annoying and could put customers off. Reading your website has given me some ideas on how I could reduce images on my websites and increase the speed of my website. Thanks a lot Linda because you have saved me from a lot of hassle.

    Reply
    • Hi Kuu,

      You’re welcome and absolutely right. All indications are that a slow loading website is a huge turn-off and will drive your prospective readers (and customers) elsewhere. this fact makes learning how to optimize images for your website well worth the effort.

      I’m pleased to read that you found these tips useful. I wish you luck in implementing these techniques and every success with your affiliate marketing efforts!

      Reply
  2. Hi, thanks for the tips on how to optimize image. I always have this problem with image and until now I am still not sure what is the optimal size of an image. My image always weigh 200 to 300 KB in size. Is it too heavy? When I checked Alexa, i also have super low speed for my site. Is there anyway I can improve this?

    Reply
    • Hi Florence,

      If all of your website images are more than 200 Kb, your load speeds will be affected. Image sizes will vary but a good rule of thumb is to compress everything to 70 Kb or less. 

      I recommend using PageSpeed Insights to test your site. This is a free Google tool that will give you a list of issues to work on to improve and speed up your website’s performance. 

      I hope you’ll pop back and let us know how this worked for you. Good luck!

      Reply
  3. Excellent article. I actually had my niche site set up right beside it and ran it through all the testing and everything to make sure everything I was doing thus far was fully optimal. Great tutorial on ways to optimize website performance and awesome overall website, might I add! For anyone who is looking for ways to further increase their website’s optimization in accordance to imagery, this is definitely a great article I can point to. 

    Reply
    • Hi Todd,

      I’m so glad to hear you were able to put this information to practical use. Testing and optimizing your site is a critical step that many new website owners overlook. And, I appreciate your kind words about my site. I wish you the very best of luck with your own niche site!

      Reply
  4. This is always a fight for me to find the right balance.  Right now I just ran my site through Pagespeed and it came up on the red.

    I don’t understand considering I optimize my images with EWWW, keep plugins down and keep everything else clean.

    When I ran i through pagespeed I was shocked actually

    Reply
    • Hi Stew,

      It’s true that improving the performance of your website can be a challenge. Images are a big factor but there are other things to consider as well. Some themes can be a problem. At one point, I had a premium theme called Soledad. It was a beautiful theme with tons of features but all those bells and whistles really slowed down my loading time. I had to make a change and my current theme is a vast improvement. Of course, your hosting provider is a huge factor which is why I refer to the SiteContent resource provided by Wealthy Affiliate as my secret weapon. Their technology is lightning fast.

      PageSpeed will give you a list of factors to work on to improve the performance of your site. Speed is incredibly important to a good user experience so it’s worth investing time in making improvements. Good luck with your efforts!

      Reply
  5. Hey Linda! How are you doing? I’ve really enjoyed reading this article on “How to Optimize Images for Your Website” as you’ve provided us with tonnes of valuable information. I completely agree with the fact that EWWW Image Optimizer is the best plugin in WordPress as it compresses your images without you having to do anything with it and it improves the speed of the page. Normally plug-ins slow down the speed but this one increases it. Are there are other similar plug-ins like the EWWW Image Optimizer or is this the only one in WordPress? 

    Thank you in advance for answering my question. Keep up the good work! 

    Reply
    • Hey AV,

      There are several WordPress plugins for image optimization. One that I’ve used with good results is Smush. But if your page speed is currently good I would stick with what you have.

      Good luck with your site!

      Reply
  6. Hi! We are visual by nature. And paying attention to the pictures we place on our posts and pages can be a key factor.

    I really appreciate all you have stated concerning website speed. And using TinyPNG is the way to go! Thank you for mentioning your secret weapon! I’ll give it a try! Thank you very much!

    Reply
    • Hi Henry,

      Yes, my secret weapon is definitely worth trying. SiteRubix provides phenomenal web hosting services. The service is fully integrated into Wealthy Affiliate and services are continuously improving with Site Speed something that is always in the forefront. I checked my speed with PageSpeed today and my Desktop score is 100. I guarantee you will not be disappointed/

      Thanks for commenting and sharing your thoughts!

      Reply
  7. Thanks for the information on optimizing images for a website. I am going to try the tiny png site because some of my images still seem to be slowing down my site. When I did the site speed test on Google both of my sites said I should “Serve images in next-gen formats”. What does that mean? I sure don’t want to lose readers because of my slow loading images. Help!

    Reply
    • Hi Karin,

      JPEG 2000, JPEG XR, and WebP are image formats that are considered next generation and offer superior compression capabilities over older jpeg and png image formats. But you do have to be cautious because they aren’t supported by all browsers yet. For now, I would stick with Tinypng and EWWW Image Optimizer if the size of your graphics is a problem. I use the older formats on my site and I’m still able to achieve Desktop scores of 100, I will grant you that my web host provider (SiteRubix) and another resource provided by Wealthy Affiliate (SiteContent) are also significant items contributing to my page Speed. Wealthy Affiliate’s technology is superior,

      Good luck and thanks for reading!

      Reply

Leave a Comment