Have you ever scrolled through the internet to find yourself completely off track 10 minutes later? More than likely, you answered yes, and we can probably guess why.

The internet is full of eye-catching imagery. When designing a website or advertisement, the use of proper image sizing is vital to success. Images help sell products or even tell stories.

When it comes to websites or ads, people inherently judge a book by its cover. The first impression you make with someone can be the difference between whether they keep scrolling or become a lifetime customer.

What Are Types of Image Sizing?

Images always fall into one of two categories—portrait or landscape. This is referred to as the orientation of an image. Portrait images all taller than they are wide, where landscape has more width. Let’s get into the specifics of how images are measured.

Pixels

If you use an image for an ad or website, images are always measured in pixels. These aren’t the same pixels that are used for ads to track activity or conversions.

Pixels are the basic elements of a picture. A great way to think a pixel is like a building block: the more pixels you have, the better quality the image is.

Resolution

Resolution is the number of pixels in an image. Therefore, the larger the resolution, the higher the quality. Here is an example of a high-quality image vs. a low-quality image.

As you can see, the image on the left has a higher resolution (3000 x 1802 pixels) than the one on the right (960 x 577 pixels). Clearly, proper image sizing is the key to retaining quality.

Aspect Ratio

An image’s aspect ratio is the comparison between its height and width. To make sure that the quality of an image is maintained, it's important to adjust the aspect ratio consistently. This will help images from becoming distorted.

Common aspect ratios are 1:1, 3:2, 4:3, and 16:9:

1:1

This ratio means that the height and width of an image are equal. Images of this ratio are square. A common resolution for this ratio is 1080 x 1080 pixels.

3:2

This ratio is mainly seen in print; however, you might stumble upon it when designing an ad or website. A common resolution for this ratio is 1080 x 720 pixels.

4:3

This display is often used for computer monitors or laptops. A typical pixel resolution for this ratio would be 1024 x 768 pixels.

16:9

This ratio is mainly seen in presentations or widescreen TVs. Some common resolutions that have this aspect ratio are 1920 x 1080 pixels or 1280 x 720 pixels.

Now that we’ve established how images are measured, let’s see how proper image sizing can be applied to advertising and website design.

Best Image Size for Advertising

Advertisements serve one purpose: to sell. Studies show that the average person sees up to 5,000 ads a day.

That's a lot of ads!

Unsurprisingly, this number is expected to grow. More than ever, companies are turning to the digital realm to sell their products. Standing out requires some research and insight.

However, one thing that you should never fall short on is imagery. Let's look at proper image sizing for Facebook, Instagram, and Google.

Facebook

Facebook offers a variety of ways that you can promote your brand. They allow photo, video, and carousel ads. Depending on your messaging and product, some formats might suit your product better than others. Let’s go through the specifics for photo and carousel ads.

Photo Ads

• Aspect Ratio: If you are planning not to use a link, use 9:16 or 16:9. With a link, your ratio should be 9:1 or 1:1.
• Resolution: It is always best to use the highest resolution possible, but at least 1080 x 1080 pixels

Carousel Ad

A carousel ad allows you to show up to 10 images or videos within a single ad.

• Aspect Ratio: Images are recommended to be 1:1.
• Resolution: Like with photo ads, the highest resolution possible is best, but it should be at least 1080 x 1080 pixels.

If you follow these guidelines, your ads will be a step above the rest!

One thing to note is the amount of text allowed on your images. If you choose to add any text, Facebook requires that it takes up no more than 20% of the image. To be safe, it’s recommended to have 125 characters or less. Here’s a great example of a Facebook Carousel ad:

Instagram

Instagram, like Facebook, allows you to post ads in a video or picture format. Here are the following parameters for crushing the Instagram picture game:

• Aspect Ratio: Images that are 4:5 and up to 9:1.
• Resolution: Instagram requires you to use square images, so the ideal resolution is 500 x 500 pixels.

Instagram has a similar rule with text on their photos. The image can have up to 2200 characters, which is roughly less than 20% of the entire image. However, Instagram suggests adding no more than 90 characters per image.

Google

Google Display Ads provide a wide variety of ways to promote your brand. With Google Ads, resolution is the name of the game. Ensuring that your images meet their required resolution is the first step in drawing customers to your brand. Here are the following types of ads you can run (as well as examples):

Skyscraper

• Normal Skyscraper: 120 x 600
• Banner: 468 x 60
• Small Square: 200 x 200
• Wide Skyscraper: 160 x 600
• Normal Leaderboard: 728 x 90
• Normal Square: 250 x 2500
• Half-page ad: 300 x 600
• Top Banner: 930 x 180
• Triple Widescreen: 250 x 360
• Portrait: 300 x 1050
• Large Leaderboard: 970 x 90
• Billboard: 970 x 250
• Vertical Rectangle: 240 x 400
• Medium Rectangle: 300 x 250

Here is an example of normal skyscraper ads:

Leaderboard

• Panorama: 980 x 120
• Large Rectangle: 336 x 280

Here is an example of normal leaderboard ads:

Square and Rectangle

• Netboard: 580 x 400

Why is Image Sizing Important for Websites?

Just like in advertisements, using proper image sizing is important. Not just for visually appealing reasons, but for the overall health of your site. Images on your website can have an impact on site speed and SEO.

To make sure you’re following the best image practices, we will go through image sizing/compressing an image and SEO.

Image Sizing

Having a website with high-resolution pictures is still important—just in the right places. For example, if you have a module on your site that only requires an image to be 729 x 485 pixels, but then you upload an image that's 1280 x 720 pixels, this could be harmful to your site.

You shouldn’t upload a high-resolution image and then display it at a smaller size. This will hurt your site speed. Every time someone tries to load a page on your website, it always loads the original image file. In short, images should only be as large as needed based on the layout of your page.

A good practice is to always compress your images before uploading them to your site. Luckily, there are some great tools out there, so you don't have to go image by image.

• JPEGMini: This tool can reduce your photos (up to five times smaller) without losing any quality.
• Shrink O’Matic: This Adobe application is great for compressing and resizing images. This is the most user-friendly of the two because you can choose output sizes, rotation, name, location, format, and watermark for a bulk number of images.

SEO

Images can also be a great way to help your site's SEO. When you upload an image to your site, it’s important to add alt text to each image. Whenever you first upload an image to your website, a page often appears where you can add this piece of info to the image.

What exactly is alt text?

Alt text (alternative text) is content that describes your image. If an image ever fails to load on your page, this is what will appear in its place. Another purpose for alt text is to help search engines understand your website. Ensuring that your site’s images all have alt text will help contribute to organic search traffic.

Here is an example of good vs. bad alt text:

Bad alt text: “green ice cream”

Good alt text: “chocolate mint ice cream in a cone”

As you can see, proper image sizing is crucial. Whether you’re trying to promote your brand through an advertisement or impress new customers on your website, it’s important to follow the above guidelines.

Always make sure your image resolution meets the suggested advertisement requirements and never upload a full size image to your website, unless you need the highest quality possible. These practices will help ensure that your advertisements stand out and that your website has high-quality content, while maintaining an impressive speed.