All website projects begin with a great design. Many of our designs even turn into great websites! But, what separates the ‘good’ from the ‘great’ might surprise you. It’s not colors, or cool functionality–it’s the imagery.
What factors into a ‘great’ image in website design?
Sure, a photo of the majestic Grand Canyon sounds great, but if it’s the size of a stamp–which is 100px x 100px when measured for a website–then it becomes not-so-great. If you upload that small square image of the Grand Canyon to a spot on your website the size of a checkbook, or 450px x 225px, it’s REALLY not so great! The checkbook-sized image is blurry, or pixelated, because there aren’t enough pixels to fill up the space.
If you know you need to add an image of a specific size, you’ll need to make sure your photo is at least that size or larger. Its always better to provide an image larger than what you need and scale down than it is to provide a smaller image and scale up.
Let’s go back to the Grand Canyon. Whether you’re taking the photo with your iPhone or having a professional take it, you’ll want to keep the size you need in mind. An iPhone photo is about 4032px x 3024px, plenty big enough to crop down to 432px x 216px without any distortion.
This is where we make a strong case for professional photography in web design. We feel so strongly about professional photography, in fact, that we dedicated an entire blog post to the many benefits of it! You can read about it here.
We do understand, however, that there are instances where you need to use readily available photos. It could be due to budget or time constraints, or the nature of the photos themselves. No matter what, you’ll have to keep in mind the subject matter of the photo.
Let’s say your grandparents are with you at the Grand Canyon (yes, in this instance, your website calls for photos of your grandparents at the Grand Canyon), you take a photo of them on your iPhone in portrait orientation. A great photo, right?
Sure—but remember, your website calls for a landscape checkbook-sized image. If you upload your vertical image into that space it will look something like this:
Let’s go back to the Grand Canyon one more time. Take the photo on your iPhone, but hold it horizontally to take the photo. Keep the checkbook-sized image in mind; making sure to include enough of the background in the image so that you’ll be able to better crop the image for your site. The subject matter, in this case, your grandparents, should be the key focus of the image.
Assuming you don’t have the opportunity to travel back to the Grand Canyon to retake your photo–meaning you’re working with limited, existing assets–speak up early in the design phase of your website build. A property or portfolio landing page with large, horizontal images will not work if you only have small, vertical images available. It’s better to design for what will actually end up making it into the website than to be overly aspirational. Our team wants to work with you to make a great website design, and this is only possible if there are great images to support it!