Ever wondered why your photos do not fit correctly on your website? How about why your photo is blurry, grainy or discolored? Understanding the changes we can make on photos, such as cropping and re-sizing, is very important when uploading photos onto the internet. Having a base understanding of these changes can help improve your website by providing clear, high quality imagery to your web visitors.
But before we discuss cropping and the resizing of images, we need to understand what pixels and dimensions are.
Dimensions and Pixels
Dimensions are the ratios (width and height) an image needs to fit within a website. Dimensions tell us the minimum requirement the original photo needs to be placed on a website.
Pixels (px) are tiny dots on all display monitors which help create images on a screen. There can be thousand, even millions of pixels on a monitor, allowing you to view images in detailed quality.
Each pixel can only have one color on it, and since they are so small, the pixels work together to form various shades and color to display images. You can always decrease the number of pixels on an image, but you cannot increase the number pixels.
Pixels are described by numbers on your images, referenced to by width and height. An example would be 300 pixel width by 450 pixel height (300px by 450px).
If we chose a section of the image and zoom in, we can see how pixels actually look like. (Similar to looking under a microscope)
So, imagine you have a computer screen which has a resolution of 1920px by 1080px. This is how many pixels (or space) the image (300px by 450px) would take on your screen.
Now let’s explain cropping and resizing.
Cropping
Cropping is when you need to make a picture fit within a certain dimension or when you need to refocus the image hierarchy (have viewers focus on a specific section). Best practices state to perform these action in unison; we always want to keep the image dimensions and image hierarchy in mind when cropping. Always have the largest original size of the image to make changes for you website.
Fitting a Dimension
Below we have an image. This image is 300px by 450px, but we require the photo to be 300px by 300px. In this case, we will need to crop the image, since we need it to fix within a certain page.
Refocusing Hierarchy
Another instance of cropping could be refocusing the viewer’s gaze to a specific section of your image. This change should only be made if the image pixel size does not matter. In the same photo, we would like individuals to focus on the type writer and some of the board, rather than the clutter around it. Since size does not matter, we are cropping the image to the section we would like viewers to focus on.
As you can see we have refocused the image to allow the client to view what we want them to see.
Resizing
Resizing is very different from cropping. It involves making a picture “weigh” less, effectively bringing down the actual size (MB) of the image to allow it to upload onto the internet.
Making an Image Weight Less
Here we have the full image with a pixel width of 300px by 450px. Currently the image is 400 KB. On the right, we have resized the entire image by 50%, changing it to 150px by 225px. This image is now 100 KB, effectively 1/4 of the size it was before. None of the image is lost, but everything is smaller.
Many individuals refer to resizing as cropping. This is not the case. As you can see, the entire image is still visible when we resize an image to a specific size. In cropping, we are removing parts of the image to fit a specific size.
Blurry Images
One thing we have noticed is changing a small image to fix a large dimension. The image on the left is our smaller 150px by 225px, but we require it to be 300px by 450px. As you can see on the central photo, it is blurry and discolored, compared to the original 300px by 450px image.
The reason why the new photo is blurry and discolored is because we have increased the size. This size increase is actually changing the size of the pixels on the image. It is making the pixels "blow up". As stated earlier, we cannot add extra pixels on the screen, but we can make the pixels bigger, causing blurriness, discoloration, and a grainy look.
Can we do both and what do we always need?
Many times, we must perform both a resize and a crop to an image to fix onto a website. Resizing is used to bring down the size of the entire image, and the cropping is used to ensure the image can fix is its designated section. A resize should always be done first, then crop if it is necessary.
We recommend always having the largest size of the photo available. The larger the size, the more we (or you) can adjust a photo to fit within your website either by resizing, or cropping.
If you're not comfortable cropping and/or re-sizing images for your own advisor website, our *awesome* support team is happy to offer a helping hand! The best place to get help is in our Knowledge Base: support.advisorwebsites.com.