Websites today are accessed by a variety of devices with different screen sizes and resolutions. Additionally these devices are often connected via low bandwidth connections. While CSS and Javascript can adapt designs to work well on small devices with touch screens, the content is still mostly identical. Users on a mobile phone will have to spend time and money downloading a large image meant for the desktop version, that then gets reduced to a much smaller size on their device. Higher resolution, or retina screens, have also become a common feature among high end phones, tablets, and laptops. These devices need larger images, to account for their higher screen density. Serving content adapted to these devices was up until recently not possible with plain HTML. The solution to these problems are responsive images. Introduction to responsive images If you’re not familiar with the concept, I’d recommend reading Responsive Images in Practice on A List Apart before continuing. The implementation in WordPress modifies the markup of image tags embedded in the content. This is done every time a page is generated, by the wp_make_content_images_responsive() function which is hooked to the_content
Share This