The Definitive Guide to Using Images on Your Website

We've looked before at where you can find images to use for your website, but what happens once you've chosen the images that you want to use? There are still some tricks that you can put into practice that will help your images appear the best they can on your website!

One of the trends that we've seen all over the web recently is the use of large imagery on websites. While this definitely does make a huge impact on people visiting your website, it can also cause your website to slow down if the images haven't been properly cropped, resized and optimized.

Cropping and Resizing Your Images

One of the biggest mistakes that people make (even those who have been working with websites for years!) is that they resize images directly in their site's web manager instead of resizing and cropping an image before it is even uploaded to the file manager.

Resizing an image means that you're changing the dimensions that the image is displayed at – usually so it's smaller than the original image. Doing this in your web manager doesn't actually make the file physically smaller – it just displays it smaller. What this means is that if you upload a 1MB file to your file manager, and only display it at 25% of its size, the user still downloads 1MB of data in order to view your image. In an environment when users expect everything on your website to load immediately, that extra time to download all of that data can quickly add up!

Cropping is similar to resizing in that a cropped image is typically smaller in file size than the original. Except instead of keeping the same proportions, you would be discarding part of the image on the top, bottom, and/or either side. This can often be used to frame the image subject to better support your content.

We recommend that you resize and crop your images in external photo editing software. There are many packages out there that can do this – it often comes down to personal preference as to what works best for you. For me, I really like the control that Adobe Photoshop gives, but if you're looking for an online tool, Cropp.me is quick and very easy to use.

Optimizing Your Images

There's one more step that you can take to make the file size of your images as small as possible. Most images will have extra data that isn't needed when displaying on the web (such as information about the camera that took the picture, geographical information, etc.), and may not have a JPEG encoding that makes the file as small as possible.

When an image is optimized, it gets rid of all of that extra data, without sacrificing any of the quality of the image itself. My favourite tool for optimizing images is TinyJPG. This tool analyzes and compresses your images so they are as small as possible, and by just looking at the image you would never actually be able to see a difference in the quality.

Displaying Your Images on Your Website

Your images are now ready to be added to your website!

Resizing, cropping and optimizing can all greatly reduce the file size of your images, which leads to your website loading faster for users. This can go a long way to creating that positive experience that you want people to associate with you and your brand!

To view the original article, visit the Lone Wolf blog.