Nothing sucks more than an image that takes forever to load. Or an image that doesn’t fit on your phone’s screen. Just because that image is larger than it needs to be.
Lucky for us, there’s a new feature in WordPress that automatically handles this.
WP Radius’s founder Brandon Yanofsky wrote an article diving into the details of this new feature: How WordPress Automatically Makes Your Images Responsive.
Read our summary below.
The New Responsive Image Feature
In the simplest terms, WordPress and your browser find the optimal image for the device you are using. Both for size, and resolution (such as on retina displays).
The coolest part is that all you have to do is upload your images just as you were doing before. WordPress works its magic to make sure it loads an image that is just the right size.
That means no more images that are so large that it takes forever for them to load.
Again, this all happens automatically. But if you’d like a basic understanding, keep reading.
Curious How It Works?
Whenever you upload an image, WordPress saves a few different sizes. You may have seen them before when inserting an image into a page or post: thumbnail, medium, large, and full-size.
With some special HTML code, the browser first figures out what size image it needs to load. It then loads one of the existing images already uploaded to WordPress that matches the size.
So, for instance, let’s say you upload an image that is 3,000px by 1,000px. When you view that image on a phone, it only needs to be 300px by 100px. So, the browser will load the medium size image (which is exactly 300px by 100px).
But, what if you load the image on a desktop? The image now needs to be 1000px by 334px. So WordPress will load the Large size image (1024px width).
Again, this is pretty cool. Because this is all automatic, you don’t need to understand what is going on. Just upload images as you were doing, and WordPress will take care of the rest.
If you’d like to dive a bit more into this topic, read Brandon’s article over at myWPexpert.com.