How To Find Image Placeholder Size

The Issue: All Photos Need To Be Optimized For Every Unique Usage

When preparing images for your website, you need to know what size the image should be. Most websites have a placeholder for images that has preset dimensions. This page will walk you through finding the placeholder and using your browser’s tools to determine the dimensions.

It is a common misconception that there is a special file type of photo that works in every situation, but the reality is that every medium, placeholder or listing is a different size and shape. Images need to be cropped and resized for each use.

This article specifically covers how to find the correct size for your website.

Finding The Image Placeholder On Your Website

You will need to find out what are the pixel dimensions in “height and width” of the image placeholder that will hold our image on our website. You can do this by using Chrome’s Developer Tools when viewing our website. Oftentimes this data isn’t given to the user, so use the guide below for a quick and independent way of finding it.

Step 1: Go To The Webpage That You Want To Add An Image To.

In this example we’re going to use the POW Photography product page. We use Shopify to run our e-commerce site. It is best practice to crop your image to exactly the dimensions you need and then scale it to the maximum size you need it within those dimensions. This will keep your site loading quickly, and depending on how your site has been coded it may be required.

Some sites like Shopify resize images for you, but it is still best to find out the dimensions, crop, and save your images to the correct size, and not rely on a bot to make decisions for you about image size.

Sometimes you may want to do a roll over, zoom-in function on the product. In this case, double the size of the image before uploading.

Let’s find the placeholder dimensions for the Yoshi toy image.

Step 2: Right Click On The Image And Select “Inspect Element”

Hover over the image or placeholder you want to insert your image and right-click and choose Inspect Element.

Step 3: Read The Dimensions

Inspecting an element shows a ton of code stuff. The information to look for is the Img Size. You can see that the blue shows an image size of 433px x 480px. This is the placeholder for the image and not the actual image itself. If you drag the image to the desktop, the image might be bigger or smaller because the code has possibly resized it to fit the placeholder.

You will want to crop and resize the image to the exact placeholder so there’s no question how the image will be presented.

Now that you’ve found the placeholder dimensions, you can crop or resize the images using the photo editing software of your choice. Both Mac Preview and Microsoft Paint are capable of resizing images, and we recommend using Lightroom to resize images in large batches. Below is a guide to resizing images in Lightroom.

How To Resize Your Images Using Lightroom

A Note On How Code Affects Images

In the above example we have a 433px X 480px placeholder. We can actually add an image that has 2x that resolution and the code (if coded correctly) will be able to shrink it down to fit that placeholder. So if we crop and resize our image to say 866px X 960px, then the code will shrink that image down to 433px X 480px. We would do something like this if we wanted to add a zoom feature to the product image.

Please note that the code to make this happen is not always standard and is sometimes not implemented on custom sites. If you upload an image and it’s stretched out or skewed then you should contact the person who made your site and they should be able to fix it with a few lines of CSS code.