Hi there,
That means that if the image is being viewed on a mobile phone, the image served will be smaller and therefore will load quicker. Is my understanding correct?
That is correct, yes. The moment you upload an image to a post or page, the CDN will make several copies of that image at different sizes that are cached to our CDN servers around the world. Then it serves the file at the size needed when someone loads your site in their browser.
So should I resize my images to 1128px wide and then it will look good on Retina Displays but still load fast on mobile phones since the CDN will resize the image to a smaller size before serving it anyway?
Correct again 🙂
For best results on Retina screens we recommend doubling up the image dimensions. That way, if we detect your site is being viewed on such a screen, there is a bigger version that can be served. The CDN can make images smaller, but it can’t serve an image bigger than the full-size version you upload.
Is there a disadvantage to uploading images at twice the width that is required on a normal monitor?
An image at twice the width can have a file size that’s several times bigger than the one with smaller dimensions, so the only disadvantage here is that you’ll use up the storage space in your hosting plan faster. At 1128px width you should still be looking at only a few hundred kb per image, though, so in your case that shouldn’t make a massive difference.
In terms of how the CDN works, there’s no disadvantage that I know of. With really big images that are several Mb big there can sometimes be timeouts when we try to upload the image to our cache, which can then lead to a blank image appearing on your site, but I’d be very surprised if something like that happened at the image sizes you’re speaking of here.
Thanks so much for your help. That makes it much clearer.
One followup question. So does the image get uploaded to the CDN when I add an image to the Media Library or when I upload the image to a page or post?
If it gets uploaded to the CDN when the image is added to the Media Library, does only the original image get uploaded or does it upload all of the wordpress generated sized images (e.g. medium – 300 x 300, medium_large – 768 x 9999, large – 1200 x 1200, etc.).
Good question! I believe the images are loaded into the CDN when someone visits a post or page that involves the image, but we’ll double check.