Featured images are the main image of blog articles. They are meant to catch the reader’s eye and give information about the main topic of the actual article.
However, if you care about your website’s loading speeds and SEO (and you should definitely care !) you need to optimize your images.
In the case of featured images, there are 4 main levers we can play with to optimize the final image size:
- Resolution (in pixels)
- Image format (jpg, png, webp)
- Compression ratio
- Image homogeneity
In this article, we are going to compare image size and perceived quality using different image settings across 3 types of images.
You can download all the sample files from this test here.
Test protocol
For our test, we are going to compare 3 different images and see how size, format and quality affects the file size.
These 3 images have beem specifically chosen for their difference in homogeneity. But what makes an image homogeneous ? Basically, the more an image is of the same color, the more homogeneous it is. Using plain color backgrounds instead of gradients will make the image more homogeneous, hence smaller in size.
We are going to consider that an image is too large when it exceeds 100Kb. Our goal is to keep our page fast.
Homogeneous image
This featured image is composed of large amount of uniform colors throughout its surface area (2 shades of gray, and 2 shades of blue). The illustration on the right hand side is composed of just a few solid colors, with no gradient. This kind of graphics should give the best results in term of file size.
Semi-homogeneous image
This featured image is composed of roughly half solid color background, and half of a photo. That background photo will contribute in increasing the size even though it does not seem to have many colors.
Non-homogeneous image
The below featured image is probably the worst kind of image for compression algorithms to process ! It is basically a combinatino of 2 photos with very little solid color area.
This kind of image will likely produce a heavy file size, even using compressed formats.
Image resolution (SD vs HD)
In this test we are comparing the size of the image at different resolutions. The first resolution will be 1200×628, that corresponds to the recommanded featured image size. The second resolution will be called “HD”, and is basically double the width and height (2400×1256). The surface area is then 4 times as big.
Homogeneous image
| Format | Quality | HD | Size | Size HD | Difference | Multiplier |
|---|---|---|---|---|---|---|
| PNG | – | No | 138 | 320 | 132% | 2,3 |
| JPG | 90 | No | 77 | 213 | 177% | 2,8 |
| JPG | 70 | No | 53 | 157 | 196% | 3 |
| JPG | 50 | No | 44 | 138 | 214% | 3,1 |
| JPG | 30 | No | 38 | 122 | 221% | 3,2 |
| WEBP | 90 | No | 30 | 63 | 110% | 2,1 |
| WEBP | 70 | No | 18 | 37 | 106% | 2,1 |
| WEBP | 50 | No | 15 | 32 | 113% | 2,1 |
| WEBP | 30 | No | 12 | 26 | 117% | 2,2 |
Semi-homogeneous image
| Format | Quality | HD | Size | Size HD | Difference | Multiplier |
|---|---|---|---|---|---|---|
| PNG | – | No | 564 | 1921 | 241% | 3,4 |
| JPG | 90 | No | 117 | 359 | 207% | 3,1 |
| JPG | 70 | No | 63 | 211 | 235% | 3,3 |
| JPG | 50 | No | 49 | 162 | 231% | 3,3 |
| JPG | 30 | No | 40 | 130 | 225% | 3,3 |
| WEBP | 90 | No | 55 | 155 | 182% | 2,8 |
| WEBP | 70 | No | 19 | 52 | 174% | 2,7 |
| WEBP | 50 | No | 15 | 38 | 153% | 2,5 |
| WEBP | 30 | No | 12 | 27 | 125% | 2,3 |
Non-homogeneous image
| Format | Quality | HD | Size | Size HD | Difference | Multiplier |
|---|---|---|---|---|---|---|
| PNG | – | No | 1245 | 4327 | 248% | 3,5 |
| JPG | 90 | No | 184 | 540 | 193% | 2,9 |
| JPG | 70 | No | 99 | 284 | 187% | 2,9 |
| JPG | 50 | No | 75 | 217 | 189% | 2,9 |
| JPG | 30 | No | 58 | 171 | 195% | 2,9 |
| WEBP | 90 | No | 102 | 261 | 156% | 2,6 |
| WEBP | 70 | No | 48 | 119 | 148% | 2,5 |
| WEBP | 50 | No | 38 | 91 | 139% | 2,4 |
| WEBP | 30 | No | 29 | 69 | 138% | 2,4 |
JPG vs WEBP
If you haven’t come across the WEBP format yet, you are missing out ! WordPress now handles it natively provided that your server is compatible. In the following comparison we will see how much better WEBP can do compared to JPG images.
Homogeneous image
| Quality | HD | Size (JPG) | Size (WEBP) | Difference | Multiplier |
|---|---|---|---|---|---|
| 90 | No | 77 | 30 | -61% | 2,6 |
| 70 | No | 53 | 18 | -66% | 2,9 |
| 50 | No | 44 | 15 | -66% | 2,9 |
| 30 | No | 38 | 12 | -68% | 3,2 |
| 90 | Yes | 213 | 63 | -70% | 3,4 |
| 70 | Yes | 157 | 37 | -76% | 4,2 |
| 50 | Yes | 138 | 32 | -77% | 4,3 |
| 30 | Yes | 122 | 26 | -79% | 4,7 |
On this type of images, the WEBP format performs 3 to 4 times better than the JPG format. The files are much better, and using HD images for your featured images is not going to be a big deal !
Semi-homogeneous image
| Quality | HD | Size (JPG) | Size (WEBP) | Difference | Multiplier |
|---|---|---|---|---|---|
| 90 | No | 117 | 55 | -53% | 2,1 |
| 70 | No | 63 | 19 | -70% | 3,3 |
| 50 | No | 49 | 15 | -69% | 3,3 |
| 30 | No | 40 | 12 | -70% | 3,3 |
| 90 | Yes | 359 | 155 | -57% | 2,3 |
| 70 | Yes | 211 | 52 | -75% | 4,1 |
| 50 | Yes | 162 | 38 | -77% | 4,3 |
| 30 | Yes | 130 | 27 | -79% | 4,8 |
With this image, the WEBP format confirms its superiority and if you want to keep your image under 100 Kb in HD format, you can aim for a quality ratio of 80-85 if you want to keep your images crisp.
Non-homogeneous image
| Quality | HD | Size (JPG) | Size (WEBP) | Difference | Multiplier |
|---|---|---|---|---|---|
| 90 | No | 184 | 102 | -45% | 1,8 |
| 70 | No | 99 | 48 | -52% | 2,1 |
| 50 | No | 75 | 38 | -49% | 2 |
| 30 | No | 58 | 29 | -50% | 2 |
| 90 | Yes | 540 | 261 | -52% | 2,1 |
| 70 | Yes | 284 | 119 | -58% | 2,4 |
| 50 | Yes | 217 | 91 | -58% | 2,4 |
| 30 | Yes | 171 | 69 | -60% | 2,5 |
When it comes to more details photos, the WEBP format still does better than JPG, but not as much as we have seen above. In average, we get a 2x improvement here which is already pretty good !
However, if you want to have your image in HD, you would have to sacrifice on quality to keep a file size low.
Perceived quality (compression ratio)
Homogeneity comparison
In the below table, we are comparing the 3 types of images next to each other. The point is to see how much better a more uniform image performs compared to a very detailed image.
| HD | Resolution | Format | Quality | Size (Homogeneous) | Size (Semi Hom.) | Size (Non Hom.) | Multiplier Hom. > Semi Hom. | Multiplier Hom. > Non Hom. |
|---|---|---|---|---|---|---|---|---|
| No | 1200×628 | PNG | – | 138 | 564 | 1245 | 4,1 | 9,0 |
| No | 1200×628 | JPG | 90 | 77 | 117 | 184 | 1,5 | 2,4 |
| No | 1200×628 | JPG | 70 | 53 | 63 | 99 | 1,2 | 1,9 |
| No | 1200×628 | JPG | 50 | 44 | 49 | 75 | 1,1 | 1,7 |
| No | 1200×628 | JPG | 30 | 38 | 40 | 58 | 1,1 | 1,5 |
| No | 1200×628 | WEBP | 90 | 30 | 55 | 102 | 1,8 | 3,4 |
| No | 1200×628 | WEBP | 70 | 18 | 19 | 48 | 1,1 | 2,7 |
| No | 1200×628 | WEBP | 50 | 15 | 15 | 38 | 1,0 | 2,5 |
| No | 1200×628 | WEBP | 30 | 12 | 12 | 29 | 1,0 | 2,4 |
| Yes | 2400×1256 | PNG | – | 320 | 1921 | 4327 | 6,0 | 13,5 |
| Yes | 2400×1256 | JPG | 90 | 213 | 359 | 540 | 1,7 | 2,5 |
| Yes | 2400×1256 | JPG | 70 | 157 | 211 | 284 | 1,3 | 1,8 |
| Yes | 2400×1256 | JPG | 50 | 138 | 162 | 217 | 1,2 | 1,6 |
| Yes | 2400×1256 | JPG | 30 | 122 | 130 | 171 | 1,1 | 1,4 |
| Yes | 2400×1256 | WEBP | 90 | 63 | 155 | 261 | 2,5 | 4,1 |
| Yes | 2400×1256 | WEBP | 70 | 37 | 52 | 119 | 1,4 | 3,2 |
| Yes | 2400×1256 | WEBP | 50 | 32 | 38 | 91 | 1,2 | 2,8 |
| Yes | 2400×1256 | WEBP | 30 | 26 | 27 | 69 | 1,0 | 2,7 |
What to understand from this table is that it is preferable to use image without too many details. It is okay to include some photo in the Featured Image, as long as it doesn’t fill up the entire area.
In average, semi-homogeneous have a size 1.1x to 1.5x higher than homogeneous images. This remains acceptable and if an image contains many details, maybe we could consider reducing the quality on a per image basis.
Conclusion
Looking at these results, it becomes clear that you don’t have to choose between speed and beautiful featured images. By combining the right resolution, the WEBP format and a reasonable compression ratio, you can keep most featured images well under 100 Kb (even in HD) without any noticeable loss of quality.
Our tests also show how important image homogeneity is. The more uniform your design (large flat color areas, simple shapes, limited photo area), the easier it is to compress. Semi-homogeneous images remain perfectly acceptable in terms of size, but very detailed, photo-heavy featured images will always be harder to keep lightweight unless you aggressively reduce quality.
As a quick recap, here are some practical guidelines you can apply on your WordPress site:
- Stick to a recommended featured image resolution such as 1200×628, or an HD version like 2400×1256 if your theme and design really benefit from it.
- Prefer WEBP over JPG whenever your hosting environment supports it, as it consistently halves (or better) the file size.
- For WEBP, aim for a quality setting around 70-85 for most images, and lower it a bit for very detailed photos if you need to stay under 100 Kb.
- Design your featured images with simpler, more homogeneous layouts: solid backgrounds, clear typography, limited photo areas and minimal visual noise.
If you want to apply these best practices consistently and save time, a tool like Smart Auto Featured Image can help. It lets you build reusable templates with clean layouts and automatically generate optimized WEBP featured images at the right size for every new post. That way, your blog keeps looking professional, your branding stays consistent, and your pages load fast for both users and search engines.
