On a web page, every image will occupy a certain amount of space on the screen.
For example, in the above screenshot, each image is occupying 454px of width on a desktop screen.
Similarly, the featured image in the above screenshot is occupying 900px of width on the screen.
We call this occupying space of the image as the “Display Size” of the image on the screen.
But the problem is, most website owners will upload images with huge dimensions such as 2000px even though the image is only occupying 900px of width on the computer screen.
And these huge images will impact the server space and performance of the website negatively.
So, please figure out the display size of the image and resize it accordingly using a tool like Online Image Resize:
https://www.onlineimageresize.com/
If the image’s display size is 400px, go with 500px so that it doesn’t look too pixelated on retina screens.
Simply put, add 100px of extra width to the actual display size.
