Preparing images for your website

Here at CMD we get clients asking us about the load speed of their site all the time. Most of the time its because they say the site is loading slow. 9 time out of 10 the problem is the image size. We will check their image file size and see that some of the images are above 1mb in size some times closer to 2mb. You can’t really expect your site to load fast when you have 10 images on your home page that in total add up to 7mb. Sure most people have a fast internet connection, but that is not always the case especially with mobile devices when your out at a coffee shop or some other public wifi connection and you don’t want to have these people leave your site just because its not loading fast enough.

Most websites with a good CMS will resize your images if they are to big when you uploaded, but it is just resizing them and not compressing the images or if it does compress it doesn’t do a very good job at it. The best solution is to use Photoshop’s save for web feature. This will reduce the size of your image file by up to 70% and still keep the quality of the image about the same as the original.

Before you use the save for web feature you should do the following. Start by resizing your image to the proper size needed for your site this may mean cropping and change the resolution to 72dpi. Keeping it at 300dpi only unnecessarily increases your file size, 300dpi is appropriate for print work but monitors only display 72dpi. Last thing to do is change your image to sRGB and now save for web and upload your finished image to your site.

Some final point for getting the best images with the smallest file size.

Keep image file sizes below 300kb max.

  • Always change the resolution to 72dpi.
  • Change color setting to sRGB
  • Resize your images to the right size
  • Use Photoshop’s save for web feature