Page Speed

I recently had a client ask me about image sizes and website speed. What happens when many people build a website and add to it through the years is that they add images that are too big. Of course if you are a photographer you want nice big beautiful images but most sites don’t need their images to blow up larger than the screen. Each client has their own needs but it is good to set a few standards when building out a website.

Set a standard “largest image size” for your website.

When designing web pages for our clients we try to set a standard size depending on the client. For example, a new client of mine wants to show off his product by having images that you can zoom in on. I suggested that he use the standard monitor size as a maximum for his images (1920px x 1080px max). This means that if he has a landscape image it should be no wider than 1920 pixels and no taller than 1080 pixels. This is probably a little to big but it insures users can get a good detailed look at the product.

Size is also in the amount of memory the image takes up. A full size image from a nice camera that I was editing the other day was 4945 x 3347 pixels, 300 dpi (resoluion) and totalled out at 8.8 MB. Most web designers want this to get under 200KB. This first thing I do is reduce the resolution to 72 dpi (web standard). This knocked the image down to 1.6MB. Next it is time to play with size and quality. I work in Photoshop so I can use the Save for Web option to select the maximum hieght of 1080px and change the quality from Maximum to High which reduces the image to 192KB. Perfect!

Change Image Size Using Photoshop

Serve Scaled Images

When building a website you will want to test it for speed. We use these sites to do so:

Part of the results you get back will tell you to serve scaled images. This means that images on your website should be the same size as the container they are in on your webpage. For example on our home page we have client logos that are 360 x 270 pixels. We don’t want to put a logo in there that is 1920 x 1080 so we would use something like Photoshop or Canva.com (free) to change the size to fit the exact area that we want. As you can see each instance of an image on your site has different needs.

Adjust Image Size Using Canva.com

If you are using WordPress you are in luck. There is a plugin call Smush (https://wordpress.org/plugins/wp-smushit/) which will allow you to view which images on your page need to be served at a different size. Just download the plugin, install it in wordpress and turn on “Detect and Show Incorrectly Sized Images”. This can be done with their free version buy changing the images needs to be done manually unless you upgrade to their pro version. Check out the video for more info.

Matthew Minten

Matt is a techy, web guy that loves to program but am also blessed with a creative streak. He does graphic design, web design, augmented reality and photography (and many other things). He believes that anything can be done on your website; if you can think it up, he can create it. Matt founded Inventive Web Design in Reno in 2009 and has been helping local business ever since.