Does your featured image look horrible like this one?
The picture above is blurry, pixelated, stretched and just generally horrible. In this article, we’ll explain the likely causes of a poor looking featured image and how to fix it.
Every WordPress site is different and not all blogs or featured images appear the same way. However, there are two primary causes that cause most featured images to look less than ideal. If your featured image looks blurry, it’s likely too small. If part of the image is cut off, it’s likely the wrong shape or orientation. Let’s dive into how you can fix these two common problems.
Why is my featured image cut off?
If you’ve uploaded a featured image but the person or focus of the photo is looking strangely cropped or cut off, you likely are using the wrong image shape / orientation. By default, WordPress’ default image space/shape for blog posts is in landscape orientation. What’s landscape orientation? It means the image is more wide than it is tall. Imagine taking a picture while you hold your phone sideway – you’re taking the photo in landscape orientation. The image will result in a rectangular shape that is short and wide because that’s how you were holding your phone. The opposite of landscape orientation is portrait.
Portrait orientation is where a photo is taller than it is wide. Imagine holding your phone upright while taking a picture. You’re holding your phone in a portrait orientation which results in a photo that is taller than it is wide. WordPress’ featured image area is in most cases a landscape oriented area by default. If you try adding a portrait oriented photo into this landscape oriented space, you may see the top and bottom of your portrait image cut off (or cropped) to produce the landscape oriented look. And if the portrait image is not wide enough for the space (because it’s taller than it is wide), the photo may be zoomed-in on (or enlarged) to fill the width in addition to having the top and bottom cropped. This will now result in both a blurry look and a cropped image. We recommend using landscape oriented photos for not just your featured image areas, but for most areas on the site.
Why is my featured image blurry?
If your featured image is blurry, it’s likely due to the fact that your image is too small for the space. For example, if your featured image area is 1000 pixels wide and 500 pixels tall, but the image is only 600 px wide and 400px tall, WordPress will stretch and enlarge / zoom that image to fill the area. While you can make a large image smaller without any noticeable loss in quality, making a smaller image larger will lead to noticeable quality loss – it results in pixilation, blurriness, etc. If you don’t want your featured image to look blurry, pick an image that meets your WordPress site’s minimum width. Even if the image is in portrait orientation, as long as the width meets the minimum of the area it’s going in, you won’t get a pixelated or blurry image – just cropped.
What image width and pixel size should I use on my website?
The common maximum width you’ll see on the vast majority of screens and sites is 1920 pixels wide. If your featured image area (or any other image area on the site) stretches the full width of the screen, you’ll want to use landscape oriented photos that are 1920 pixels wide. While you can often get away with a 1600 pixel wide image in a full width area, it’s not recommended as there will be some loss in quality and depending on what page builder or code you’re using to implement it, it may not enlarge or stretch the full width of the screen on every device. 1920 pixels wide is the safe bet for full width image area that span the full width of your website and monitor screens.
Depending on your website, you may not have any full width image areas or only a couple. If your featured image post or other image areas don’t stretch the full width of the site or computer screen then a 1920 pixel wide image is likely not necessary. Let’s say your blog post page has a side bar on the right. And on the left, there’s blank space and margin. You can likely get away with using an image that is only 1000 pixels wide to fill the body area of the article without any loss in quality.
Examples of landscape image sizes and how they respond
Here’s an image that is 200 pixels wide. If you look at the image below, you’ll see what it looks like when it’s stretched to a 1000 pixels wide.
If you’re looking at the image above and below on a desktop screen, you can see the difference – the top image looks tiny but clear while the bottom image looks blurry and terrible. If you’re looking at it on mobile, it probably looks okay because the screensize width is smaller – especially when holding the phone upright.
The reason for the blurry desktop look above is that this image space is 1000 pixels wide, but the original image is only 200 pixels wide. Because the image is smaller than the space, this 200px wide image is being stretched and enlarged to fill the 1000 pixel wide space. As mentioned earlier, you make a large image smaller without any noticeable loss in quality, but making a small image larger will result in noticeable quality loss as you can see. And if this 200px wide photo was stretched to a full width 1920px wide area, it would look even more horrible. The lesson here is that you need to pick an image width that matches the width of the space it’s going in.
The “perfect match” vs “overkill”
This image below is an example of the perfect match. It is a 1000 pixel wide picture in a 1000 pixel wide space. There is no stretching and the image is simply being shown at 100% width. You can get away with an image that’s only 80 or 90% smaller than the space as it will stretch with minimal quality loss. However, you can see the results above when you use an image that’s only 20% of the space (aka, 200px wide image in a 1000px area).
The image below is what we would call overkill. It’s a 2000px wide image that’s been shrunk down (or zoomed out) to fit a 1000px wide space. Because the image is larger than the space, there’s no loss in quality; proving the idea that you can make a large image small but you can’t make a small image large. The only issue with having an image that’s twice as large as the space is that it’s overkill. This image is not only twice the size in pixels, it’s probably twice the size in weight (aka bytes). For example, if you’re using a 2000 pixel wide image that’s 500kb (think of “kb, mb, or gb” as weight), but can make it only 250kb big by cutting the 2000 pixels in half down to 1000, you should do it. The reason is that the image will load faster across all devices. In other words, if the image area is only 1000 pixels wide, don’t use a 2000 pixel wide image because a 1000 pixel image will look the same and load quicker because it’s half the weight.
Conclusion
As you can see, all three images are spanning 100% wide from left to right. When they span, they stretch. If you have an image with low pixel resolution, like the first image with just 200px wide, then trying to stretch it across is going to make the image super blurry. But you’ll notice with the second and third images, there isn’t much of a visual difference – it’s hard to tell that the 3rd image is clearer than the 2nd image even though it has twice the number of pixels. So, as a rule of thumb, we like to say for your blog posts, about 1000px is normally fine if the blog post page doesn’t have any full width areas – 1000 pixels is not big enough typically to slow down the page loading, and not so small that it will look horribly blurry. If your blog post pages do have full width area, use 1920 pixels wide for those sections to get a nice clear look.
Want someone to handle this image sizing stuff for you?
If you’re not comfortable resizing images or just don’t want to spend your time doing this stuff, we can do it for you. Our webmaster plan is a great fit for people who want their website handled and managed for them. We can add your blog posts for you, resize images, let you know if images are too small, and take care of any other website edit, change, or design task you need. The plan also includes WordPress maintenance services done for you on a daily basis. We’ll handle all your plugin updates, WordPress updates, malware issues, backups and more. If you have more questions about website stuff or our management services in general, check out our Webmaster FAQ where we answer other common questions.