Both desktop and mobile devices have endured radical transformation within the last five years.
It is no longer fine to consider Full-HD (1920px x 1080px) enough for quality purposes, a finely-tuned responsive approach has to be implemented to ensure maximum quality and performance to the user experience.
We should consider the following resolutions as our canvases:
Desktop: 5120 px Horizontal 2880 px Vertical
Mobile: 1170 px Horizontal – 2532 px Vertical
DPI is always 72dpi – and is irrelevant for web purposes.
Based on the layout requirements, designers should export assets based on these sizes.
So, for a full-page image, the size should be 5120×2880, for a half-column full-height image 2560×2880, and so on. Just divide the above resolutions by the aspect ration of the image within the viewport. Always run exported images through an optimizer such as ImageOptim before upload.
As of WordPress 5.3, images above 2560 are automatically reduced. This should be disabled through instructions provided here in order to maintain max resolution for retina screens.
Image usage while theming should be dealt through WordPress’ native media library as much as possible. Try not to call direct urls and use custom fields as much as possible to let WordPress deal with image serving and optimization. Icons should always be in the svg format – converted in base64 within css – and images should be added through the admin panel whenever possible.
If it isn’t, please call images with all functions necessary to have srcset data. Here is other useful info on the topic.
Plugin such as “Perfect images” should be implemented to manage correct thumbnail generation.
For example, a full size 5120px by 2880px image should be reduced to a non-Retina resolution of 2560×1440 automatically on upload.
This is useful for backwards compatibility on websites where images weren’t thought that well, but can be avoided by calling the srcset and using the method below.
Plugin such as “Easy Image sizes” should be installed by default and be set to 300, 400, 500, 600, 700, 800, 900, 1024, 1440, 1920, 2560 (as in threads demo setup).
This can also be done in functions.php, albeit requires a bit more work.
Use of retina.js is strictly non necessary if srcset is used, biggest avail size can always be called within any part of the website without too much consideration as long as srcset offers alternative sizes for the browser to choose.