Have you ever sat too close to the movie screen in a theater and everything was blurry and distorted? Have you ever tried to enlarge a picture to make it fit your computer screen? Bad things happen when you try and stretch a picture beyond its limits. You lose focus and resolution.
The resolution of a photo is measured in pixels, which is the smallest bit of information that makes up the photo. If you’ve ever zoomed far, far, in to a photo and seen tiny squares of color, that’s a pixel. There are very specific requirements for the images you use in your web design.

Let’s take a look.

Web Design Header Image/Banner Photos

First of all, the header image or banner photos on your website need to be shot in landscape format, not portrait. (Horizontally instead of vertically.) They must be at least 2000 pixels wide and at least 1000 pixels high. Otherwise, the image may be blurry in website header area. Not the first impression you want to make when someone visits your website.

In addition, when you are taking a photo, make sure the image you are capturing is in the center of the photo and you leave some space on the top, right, bottom and left in case we need to trim the photo.

Website Page Photos

These are photos within a web page, and not a banner at the top. These photos might be of products you sell, staff members, or an image related to what that page is about. Ideally, these images are at least 750 pixels in width and height – the exact specifications will depend on your website design. You want to keep your web pages uniform in appearance, so follow that concept and stick with portrait or landscape images, but not both. Most websites we have designed lately have used landscape images, but there are no set rules.

Blog Post Images

Photos size will depend on your site design. You want to keep your web pages uniform in appearance, so follow that concept. Some clients want a banner image at the top of a blog, while others want photos within the blogs.

Google Business Profile Posts

An image size like 1200 x 900 pixels is preferred but any size works above 400 pixels wide by 300 pixels tall. Try to maintain an aspect ratio of 4:3.

Photo Gallery/Portfolio Images

You’re showcasing your work on your Gallery page or Portfolio page, so you want the images to be of the highest quality. This means they should be the same size as your header image/banner photos. This means they should be at least 2000 pixels wide x 1000 pixels tall, with the same guidelines for how to frame your subject when taking the picture.

How to Tell the Size of an Image on Your Phone or Computer

We’ve talked a lot about why size matters, but not how to tell what size an image is.

On Your Computer

If you’ve ever downloaded images to your computer and saved them, you know that your computer tells you how big the image is. Or maybe you didn’t know. Depending on how you have your Pictures file view set up, you may just need to hover your mouse over an image icon to see the size. Images taken with a digital camera will almost always have larger dimensions than one taken on a smartphone. Each image will have a number x number. The first number is the number of pixels wide, and the second number is the number of pixels high.

You can also right-click a photo and select Properties, and then select the Details tab. You can then look for the Dimensions under the Image section. (If you could use a screenshot image showing this, that might be helpful.)

On Your Smartphone

On your smartphone, for an iPhone, simply tap on a photo to open it. At the bottom, you may see a small letter i, which stands for information, just like it does in your contacts. Tap on that, and scroll down. You will see a number x number. That first number is the number of pixels wide, and the second number is the number of pixels high.

Always Save the Original of Business-Related Photos

You should always save the original of your business-related photos. We understand you may need to clear room on your phone. Consider putting everything in DropBox, or whatever Cloud service you utilize. The reason? Because those original photos are usually large. We can scale down a photo, but we cannot scale it up.

Schedule a Web Design Consultation

If you need a brand-new business website, or need website redesign of your slow and outdated website, we can help. Call 410-420-9390 or use the contact form to schedule a consultation. We work mainly with small businesses in the Baltimore area.