This ticket was created from the research made by trying to fix PLANET-3892

As mentioned by Pablo in the ticket:

These images are cropped by Wordpress on upload, Wordpress comes with a predefined set of image sizes:

Thumbnail size (150px square)
Medium size (maximum 300px width and height)
Large size (maximum 1024px width and height)
Full size (full/original image size you uploaded)

On top of that, we added a few more:

"Retina-large" - 2048x1366
'Articles-medium-large" - 510x340 ---> this is the one you're seeing, Gabor

So as you see, these are approximate, in order to get pixel-perfect retina sizes for these kind of places, we should:

Document the sizes we need in each place/block, in 1x and 2x (e.g.: 350x250 -> 700x500... etc). Note: in some cases, only one side needs to be specified, for example: "350px max width", in such cases the other side is flexible.
Add the required sizes to the master theme.
In case we need to, regenerate existing content to make new thumbnails that match the desired size.
The guys at Visual Composer wrote a handy guide about WP image sizes here, check it out: https://visualcomposer.com/blog/wordpress-image-sizes-guide/

So I guess this needs a little more work to make our images shine.

It seems that this is a generic issue, not related to CPP. We just happened to notice it now.

We probably have arbitrary image dimensions now between blocks. It's a good opportunity to normalize that and then implement the technical solutions you describe.

To summarize:

*For non-retina screens the problems is solved, since the images on that block are not stretched anymore with the fix already on production.
*For retina screens, I suggest we open a new design task ticket (and close this one) to figure out the required image sizes for all blocks.

Tasks:

• List required image sizes for all blocks