Welcome to the second installment of our Seeing is Believing series. Now you’ve got a few stunning images you want to include on your website to draw people in and get them interested enough in what you have to say to actually read what you’ve written. You found these on Unsplash, Pixabay, or a commercial site, and downloaded them at full resolution so that they’ll look beautiful on your site. Time to upload them and add them to the page opposite your text, right? Well, not quite. Slow down a little bit and let’s make sure you’re doing this in a way that adequately balances quality, resolution, load-time, instant gratification, and aesthetics. Huh? You’ll see. Read on!
There are a few things working against you here if you’re not careful, but the good news is that they can be working for you if you are careful. In our other content posts we’ve already discussed how much time people typically don’t spend on any given site. Before you know it, most website visitors will bounce right off to the next site to see if it strikes them any better.
Buying yourself more of their time is one of the reasons you’re excited to slide these images in. Unfortunately, if you just drop in the full-resolution image that you downloaded, it might be a beautiful image that would buy you more time if your visitors saw it, but it might be so big that it’ll take so much time for the site to display it that your visitors may bounce before it loads.
Large images take a long time to load. With connection speeds always going up, you can get away with including larger images than you could a few years ago, but you shouldn’t count on the fact that all your visitors have blazing fast connections, and keeping your images sized appropriately will help no matter what. So what you should do is adopt some reasonable standard image sizes, and be consistent. You don’t need to adopt my standards, but come up with something and stick with it. Here are the image sizes I try to stick to:
First, if the image extends across the full screen, I make sure it’s around 2400px wide. According to W3Codemasters, close to 50% of all browsers are at 1280 pixels wide or under, though approaching 10% are almost 2000px wide. If you make your full-width images 2400px, that gives you some room to grow as monitor sizes increase, while giving you really crisp images for everyone involved. Making an image 2400px wide will give it a large size, but you’ll likely only have one that size, so it’s probably okay. And if you save it as a jpeg image, with quality set to between 70 and 80%, its file size will really not be that bad.
My other standards are that if the image is inside the content width, so adheres to the same margins and spacing as the text in your site, it should be about 1500px wide. Anything smaller than half the screen should go in at 1000px wide, or less if it’s substantially smaller than half the screen.
You should pay attention to how many pixels wide your images are, but you should also note the file sizes of the images you’re looking to include. Your goal should be to keep your images sizes down to below 500 kilobytes, and for smaller images, well under that threshold. If you’re in a hurry, you could run all your images in bulk through a site like Bulk Resize Photos with settings for Width for your desired width, and Image Quality in the expert settings set to between 70 and 80% to get them to about the right size for the web. If you’d like to finesse your images on a more individual basis, you could use a site like Pixlr which lets you crop individual photos as well as resize and compress them when you use the File > Save option.
Once you’ve got all your images lined up, formatted, and added to your site, make sure to give them proper alt text so your site is fully accessible to patrons with disabilities. Also give proper attribution for your images to give credit where it’s due, and you’ll be good to go! Because those last two steps are so important, they’ll be the focus of our next installment of the Seeing is Believing series. Watch for it, and good luck properly sizing and formatting your images in the meantime!
