Image Sizing Basics

Image sizing can be one of the more confusing / challenging concepts to grasp when editing your website for the first time.  Partially because of confusion with the term “image size”. It can mean a lot of different things, and means something different to each person. 

That said, let’s start with definitions applicable to us.

File size

‍For us, this is going to mean the actual size and weight of the image.  If the image were to step on a scale, how much does it weigh?  This is measured in Megabytes (MB). It's the amount of space the image takes up on your computer, hard drive, website, server, dropbox, whatever. 

Image size

‍This is the actual size/dimensions of the image.  For the sake of a simple explanation, take out a ruler, put it up to your screen, and measure the size of the image.  That’s what we’re referring to here, the actual height and width of an image. We use pixels to determine this, don’t scratch your screen with a ruler. If we’ve built your site, you’ll probably hear or see exact dimensions we recommend for each section on your site.  

For example, we may recommend that your product images be 1300px by 1300px (a perfect square).  Here’s what that looks like: http://placehold.it/1300x1300

Or we may say, you need a “vertical photo” measured 600px wide by 900px for your headshot on your about page.  Here’s what that looks like: http://placehold.it/600x900

"Retina" Images

‍This is not a real term, but more-so a way to describe the fact that high resolution screens (every apple computer) have “Retina Screens” and images need to be exported differently for that.  I’ll spare you the Mac sales pitch, all you need to know is that images will look better on macs, and therefore need to be uploaded at a higher resolution to account for that. 

For that reason, you may see that we’re recommending a size of 600 x 900 for a section that’s technically only 300px x 450px visually.  We over compensate for our recommended image sizes to ensure you export a high enough resolution image for retina display screens on Apple computers.  Typically, they are 2x the size of what’s displayed, but may be smaller for large full width areas. 

Takeaways

We make these recommendations based on the design of the site and what sized image would fit best in the designed spaces.  It’s important to consider these sizes prior to scheduling a photo shoot, so you can plan your shots according to the design of the site.  For example, if you're shooting a hero image to be full width at the top of your site, you would not want to shoot that as a “portrait” (vertical) photo.