How to Optimize Images for Faster Website Speed

There are several things you can do to have your website load faster but having your images optimized or resized correctly should be right at the top.

Big images slow a website down. It does not need all that extra size and is a detriment to the health of your website. It would be best to start right at the beginning of any website design to have a good process in place that you or your web designer will use on every single image you will place on a page or blog but you can go back and replace photographs that are not up par.

I know it means more new work on an existing website but it is well worth it for two HUGE reasons.

1.) People today do not have a lot of patience for slow loading website. You will lose potential visitors and that translates in to losing customers. Go here to learn how loading time affects your bottom line.  According to Kissmetrics 47% of visitors expect a website to load in 2 seconds or less and 40% of visitors will abandon a website that takes over 3 seconds to load.

2.) Search engines such as Google, Yahoo and Bing will rank your website much higher if your website loads faster than other websites in the same business market. It could mean the difference on being on page one or much further down on page 2, 3 or even further on an organic search. Do you want your competition to be listed on the top of page one and you somewhere much further down because your website does not load as fast as theirs does? 

    You can test your website speed by going here to Pingdom Website Speed Test. Images for websites is a different beast all together. You never ever want to go higher than 72ppi. You don’t need to because websites are viewed on internet browsers and it only takes 72ppi to look good. Anything else is a waste and will slow your website down from loading fast. Of course, you want your image resized depend on where that image is going to go on a page or blog.

How To Optimize Images For Faster Website Speed

First of all, I use Photoshop to resize images.

There are other programs you can use to do this. Some are free and here is a list for you to pick from. Best Free Photo Editing Software. Of those on the list I like Pixlr the best because it works a lot like Photoshop.

I have three size images that I make for websites. First off make sure your photographs are either .jpg or .png. Do not use anything else. I use .jpg’s most of the time but use .png’s when I want a transparent background to the image.

1.) Banner images…

That is usually a image across the top of a page. Long and narrow. Horizontal. I try and figure out what the dimensions should be depending on how narrow you want it to show. Typically, the image is 1008px x 290px (14in x 5in). You will need to do some test with this banner image to see which dimensions work the best for what you are trying to show. Again, do not make it more than 72ppi. 

The Wedding photographs on this blog are from a photographers website I designed at Beyond The Shutter Photography from the Phoenix, Arizona area.

2.) Featured Images. These images are the ones that follow your pages and blog around on the internet alongside a snip it of what your page or blog is all about. This images also has a duel role on a blog because it is also the image you can have go across the top of the blog if you wish. I sometimes like to get real creative with this image and put 2 or 3 images together to tell a visual story.

I make this photograph a bit bigger than photographs that will go on the page itself because it will be made much bigger across the top of the blog. Featured images should always be horizontal. Featured images are 648px x 360px (9in x 5in) at 72ppi. There is a featured image at the beginning of this blog at the top of this page.

3.) Website images for pages and blogs. I make these no larger than 432px (6in) on the long side. That could be 432px x 288px (6in x 4in) horizontal or 288px x 432 (4in x 6in) vertical. A square would be 432px x 432px (6in x 6in) as long as the long side is no longer than 432px (6in). Even if I am designing a website for a photographer and their website is image heavy or they have a carousel or grid system to show off their work, I do not go past those dimensions and certainty do not make them higher than 72ppi.

Photograph Optimize Faster Website Speed

Two More BIG Steps

1.) When you have your photographs resized then there is one more step that helps to shrink the digital image further. There is a free service that compress these photographs without losing any quality. It’s called Tinyjpg. You can add 20 images at a time in .jpg or .ping and it will optimize or reduce the file size from 30% to 70% further without quality loss.

This is a BIG savings when you upload your images to your website and the bandwidth that you are saving will help your website pages open much faster. Tinyjpg can explain the process much better than I can but all I know is that it works. 

2.) If you have a website that has been designed on WordPress you will want to have a plugin that will optimize your images even further. Here is a list of the 10 best Image Optimization Plugins. I use WP Smush. They have a free version of this tool that works great. You can also find it off your WordPress plugin section. Just install it and follow a short instruction and it will start working right away.

How to Optimize Images for Faster Website Speed

One Last Tip

Make sure you title each and every one of your images. They are an identifier for search engines. Each photographs have their own SEO that is independent from the website that they are on. With the correct title tag on a photograph that image will show up on a search by Google, Yahoo or Bing.

I typically name the image with my website name first with a hyphen between each word, then what the image is and where it is located on the website and the number represents if there are more than one image on that page.  It may look like this best-website-solutions-dog-barking-blog-1  

I hope these tips and suggestions help your website load up faster. Google also has a free service that will not only tell you how fast the website is loading but also what you can do to fix a certain problems called PageSpeed Insights.  Use this tool and Pingdom to test your website on a regular bases and stay on top of any problems your website might encounter in the future.

I have also written a number of other blog post that you might find interesting when it comes to WordPress websites. 

Things to Know When Writing and Publishing a Blog.

8 Benefits Blogging From Your Business Website

One More Thing

As you know, I spend a ton of time writing articles like this for you. If you could help me out by sharing this on Twitter or Facebook, it would be greatly appreciated. If you have any questions or you felt you are ready to embark on this new online adventure, please contact me by email or phone with any questions. We are here to help your vision come to life. 

Follow Us On Social Media Here

 Photograph Compression Websites. Optimizing Images Faster Website.