Photos can make or break a website. They can either bolster credibility and legitimacy or solidify amatuer status and so it’s super important to get those photos just right. Humans are visual beings, we love to look at objects that stimulate our visual aesthetic and that is consistent whether we are experiencing the real world or the web world.

As we scan through a webpage, our eyes are naturally drawn to images peppered throughout the content before reading the accompanying text and we can actually process those images 60,000 times faster than the text on the page. With all that attention on your site’s images, it’s really important to get them right. Below are some vital things to keep in mind when preparing photos for your website:

File Size

The larger the file size of your photo, the longer it will take to load. Load time is a critical factor in keeping your users from leaving your website. This has an impact on all platforms, but especially on mobile devices since over half of the web’s traffic is now from mobile devices. Google has shown that 53% of mobile users will abandon a page if it hasn’t loaded in 3 seconds… Yikes!

We recommend that medium and small photos should be no larger than 300kb in file size and large photos somewhere between 500k and 1MB. The latest iPhone takes photos that are 2-3MB and the Samsung Galaxy s20 averages 4.6MB. Both phones have 12 MegaPixel cameras.

It’s hard to think about taking the extra time to resize a photo when you’re currently working on your super-fast school network and the template scales your photo automatically to look great in the homepage gallery. Even if the photo is scaled by your site’s template to “look” smaller than it actually is, the page still needs to load the full size image, so the best practice to follow is to scale your image before you upload the photo. This will help save precious seconds for your user as the page loads.

Proportional Scaling and Cropping

Even though some of us might like to occasionally squish an image to make it appear as though we’ve lost a few pounds, when the SUV in the background looks like a Mini Cooper the jig is up. The human eye is really good at detecting when objects have been skewed or distorted, so we’re really not fooling anybody. In fact, we could be hurting our content’s impact with sloppy image work.

When scaling images for the web, it’s very important to keep proportions in mind. A landscape photo will never fit in a portrait photo shaped space, and vise versa. UNLESS! You employ proper proportional scaling and cropping techniques.

So what does that look like? Let's say you have a space for an image on your page that is 300 pixels wide by 500 pixels high and the image you’d like to use in that space is natively 1000 pixels wide by 680 pixels high.

First, proportionately scale the image down to a 500 pixel height. This will leave you with an image that is 735 pixels wide and 500 pixels high. We now have our height, but what do we do about the extra 435 pixels in width?

Second, we crop the image to a width of 300 pixels. Yes, that will cutoff some (or a lot) of our photo, but remember we are trying to fit a landscaped sized peg into a portrait sized hole in this example. Think of it as going back in time to when the photo was taken and reframing the shot before the photographer clicks the shutter. Also, as a bonus, notice how far we’ve reduced our image size from 70k to 28k!

If you read this far, hopefully you’re ready to take up the image resizing mantle for your organization. And if you feel a little out of your element, don’t worry… We’ve created a simple tool to help you do just that. Check out the tool below and a great tutorial video on how to use it here: https://vimeo.com/504984030