Many people have struggled with a blurry photo online at some point, but what determines whether or not an image will look blurry on your website?
What is photo resolution?
When you hear people talking about the “resolution” of a digital photo or image, they’re referring to the size of the image measured in pixels. A digital image’s resolution is typically recorded in the format width x height. This means that a photo image with the resolution of 200×300 is an image that is 200 pixels wide and 300 pixels tall.
The image above has a resolution of 200×300
Resizing images: So why is my photo blurry?
The 200×300 image above is being displayed at its maximum resolution, meaning the size at which the photo looks the best and has the most detail. Every image you see on your WordPress website has a maximum resolution – the largest size at which they can be displayed before the imagery starts to stretch and look blurry on your screen.
To keep your photos and images from looking blurry, make sure you are using photos that have a large enough maximum resolution to fill the space you want without being stretched. You can make your photos smaller without them becoming blurry, but keep in mind that making a photo smaller and smaller is like standing further and further away from someone you’re photographing – you’ll still have a clear picture of them, but you’ll lose more and more up-close detail each time you step back.
To show you how using the wrong size image can make it appear blurry on your website, let’s look at the homepage example below.
(Not to size)
We want to pick an image for our slider in the blue space above, and we know our slider space is about as big as 1240×410 (1240 pixels wide, and 410 pixels tall). That means we need to select an image that has a resolution at least 1240 pixels wide, and at least 410 pixels tall.
Look what happens when we select a photo that doesn’t have a large enough resolution. This image of sunflowers only has a resolution of 400×450, meaning it will be tall enough for our slider, but it’s not going to be wide enough.
This is what the image looks like at its maximum resolution
See what happens when we stretch the sunflower image beyond its maximum resolution to the full width of the slider (this is how it would display on your website).
(Not to size)
Not so nice and clear anymore, is it? Luckily with a little understanding about digital image resolution, you can avoid subjecting your clients to this kind of mistake.
Still looking for a little help with your therapist website?
Become part of the Brighter Vision family and receive 100% FREE website support & assistance for life!
Fill out the form below to have one of our customer happiness agents reach out directly with more information. 🙂