Enable High Contrast Mode
Disable High Contrast Mode
Size Does Matter: What you need to know about Website Image Sizes
Guide
Content Management Systems (CMS’s) have made managing a website – or even building a website – so much more accessible. Gone are the days when a knowledge and understanding of HTML (and CSS and PHP and all sorts of other acronyms) was a necessity in order to simply change a line of text on your website. Now systems like WordPress, SquareSpace, and Shopify (to name a select few) have changed the game of web development. And while I could bore you with the many excellent reasons why you should not attempt to build your own website, I’d like to jump down off my soapbox today and talk about one small detail that you should absolutely understand if you are managing your own website: Image size.
One Size Doesn’t Fit All
I’m sometimes asked, after handing over the keys to a client’s new website, “What size should my photos be?” The problem with this question is there isn’t one answer. There isn’t one perfect size from website to website, and there isn’t likely one perfect size from page to page on your site. Just like a frame you hang on a wall, your website image areas are built to hold an image of a particular dimension. You wouldn’t expect a 4 x 6 photo to fit in your 8 x 10 frame, and similarly, you can’t expect to upload a photo that isn’t sized correctly, and have it magically fit into (and look great in) an image area developed to hold a particular-sized photo.
There’s File Size… and then there’s Dimension
There are, in fact, two ‘sizes’ you need to worry about when uploading images to your website: File Size and Dimension. The dimension of your image (the width in pixels and the height in pixels) is the first ‘size’ you should worry about. Similar to the frame analogy, the different areas of your website—such as a background image, a gallery photo, a blog photo, a featured image—are all built to hold images of a particular dimension. You should, therefore, be uploading photos that are sized to that particular pixel dimension. TIP: Talk to your web developer to get a list of the ideal pixel dimensions for any section of your site to which you are uploading photos.
Note: With the advent of responsive website design, this does mean that images areas can change shape and size depending on the size of the screen on which your website is being viewed. However, there is still an ideal dimension that your image should be when uploaded, but you cannot expect (as you would with a printed piece) that the cropping of your image will always be the same in all screen sizes.
File Size Does Matter
Once you’ve appropriately sized your image to the correct pixel dimension, then you need to consider file size. Every time a new visitor opens your website, all the images and text within that website need to download the data that makes up those images and text from the internet to the viewer’s computer in order to see what’s there.
With the dawn of high-speed internet, we have become less aware of that process. More often than not, when we load a website, everything actually appears quite quickly. Those of you, however, who remember when the internet was new, and modems were dial-up, remember what it was like to sit there…. And wait…. for everything… on a page… to load…………………..
Without that context of loading ever-present, we forget that file size matters. Just because our internet connections are lightning-fast doesn’t mean we can be lazy and upload raw 12 megabyte image files to our website and expect the site to still load quickly. A 12 megabyte file isn’t going to load quickly, and is going to remind the viewer of the not-so-good ‘ole days of internet connections.
So we must consider the file size, or the amount of space your file is taking up on your hard drive. This is the number you see followed by kb (kilobytes) or mb (megabytes). And what is the right file size? Again, there’s no one answer to fit all situations. In general, I recommend that most of the images being uploaded to a website should be well under 500kb. Large background photos that are intended to fill an entire screen will probably be on the higher end of the file size scale. Small icons and image thumbnails shouldn’t take up more than 10kb if they are compressed properly.
Worrying about my website photo size sounds like too much work…
If you start out by sizing your image to the appropriate pixel dimension first, you will likely have won more than half the battle. That act alone will bring your image much closer to the appropriate file size. There are a number of free (and paid) options out there to help you size your photos for the web (PicMonkey and PicResize to name just a small few) if you plan to do it yourself. A website design professional will use software such as Photoshop, which will also afford some additional compression options to help optimize the appearance of the photo.
The most important takeaway, though, is whether you do it yourself, or ask your website developer to do it, make sure it’s being done. If your photos are sized correctly for your website, your site will load faster, your website host won’t be bogged down with data transfer, and, most importantly, you will create a better experience for your users.
Update: In early 2019, Google launched a new app for sizing your photos called Squoosh. It’s lightweight and super simple to use. Just drag your photo into the screen and size accordingly.