Why Image Optimization is Important

Imagine if your home WiFi allows 10 Megabytes per second and you have 5 people in your home using it. That means your average page load when you are browsing will be 2 Megabytes (MB) per second. So lets assume your web page has 2 Megabytes in total of content such as Images, CSS, JavaScript and such. That means dependent on your server size and how much traffic your site can carry, you may or may not have your website load from one to four seconds. Best case, your site will load in one second and when caching carries over it will load less with browser memory in place. Worst case it loads in 8 seconds because your WiFi / Data slows down.

One massive importance here is that search engines pull together not only the sites that provide the best content and adherence to other standards. Page size and speed is highly vital to your website’s success on standings in the search engines. In fact, it is a massive standards to search engines on how they index websites. Search engines are going to want to pull the best performing websites as well. Most people will deck out of the website if it loads past two seconds. With this being said, you need a very fast website to succeed on standing out in the search engines and potentially getting customers. 

Usually, you will definitely want your page to be less than 1 MB and how do you go about finding out how much data that carries in your page? You can simply go to Page Speed Insight by Google, Pingdom Speed Test, GTMetrix and even SEO speed scores to find out. It will tell you how much level of content that is in place and where you need to go. Most of the times, it will be because an image is way too big and that is what is slowing down the page. Code and other problems such as browser caching and server sizing could also be a factor, but with Images being the top problem in most sites I have had to fix, I will be mostly talking about that today. HTTP Requests can also be huge with image optimization should you have too many images on one page. 

Well Golly, How Do I Identify Why My Image is Huge?

Actually, this is extremely easy to identify and you will be able to spot your problem right there in your test. Look at the size of your image and here is the number one prime suspect, the actual size dimensions of your image. Some sites have images that are 6000 x 2000 pixels wide and because of that, the image naturally has to be bigger, even when CSS or HTML can make the image fit in specific constraints. I would download that image and resize it to a proper dimension set. The widest I would go is 2000 pixels wide and 1000 pixels highest. I even recommend even going lower if you can because that will cause the image size to drop massively down to a Megabyte or two. 

That usually is the fix for larger file size like images that causes web pages to slow down massively. Because of this fix, it will speed up your web page. However, your image may be still too big. That would have to do with potentially turning down the quality to a little bit on the image. Once you do that and your image is below 100 Kilbobytes, then you are set. Try to get your image as low as possible because that will make your page speed up massively. 

Sometimes your website has too many images in a page and maybe you need to combine them so the HTTP Request count. You can combine your images using CSS Sprites to speed up your page as well or even using a Content Delivery Network to help speed the page up. CDNs are also an extremely powerful tool to speed up your website. 

What Tools Can I Use to Complete this Task?

There are a couple tools that can help you achieve this fix that I recommend. 

Photoshop: 
You can simply go to PhotoShop and drag your photo in there and resize and compress the image by changing its quality by going to File->Export->Save for Web. In there, you can change the dimension size and the quality should the image be a JPG. If it is not, I would recommend switching it to a JPG to decompress the image to the lowest quality.

Once you are done, you can check the file size on your PC or Mac and decide if it is too big or just right enough to 

 Squoosh.app
You can go to this website at anytime and drag and drop your image and it will immediately open up a window. You can reduce the size of the image and the quality right there in the User Interface. It also compares the optimized image and current image in real time as well as the different file sizing. I recommend using this if you want a quick fix and you know the quality will not be effected that bad. Once you download it, you will already know what the file size is. Upload it to your website and watch your web page speed up! 

Image Optimization and Compression is extremely important for the visitors of your website and the standing of your website on the search engines. I recommend acting immediately when you notice your website is a bit slow. Also, make sure that whether you are building or a developer is building, that the images are already compressed and have a standard image dimension set, that guarantees your website’s success.