 Hey there, and welcome to Learn Wordpress. In this tutorial, you're going to learn about the WordPress responsive images API. You will learn what responsive images are and why you should use them, how the WordPress responsive images API works, and how to customize the responsive image markup if you need to. Responsive images are images that can adapt to the screen size of the device they are being viewed on. This is important because it means that the image will always look good, no matter what device it is being viewed on. Let's take a look at an example. Most modern browsers have a special mode for viewing web page layouts on mobile devices. In Chrome browsers, it's called device mode, and in Firefox and Safari, it's called responsive design mode. You can usually access this from the browser's developers tools. Once you enable this mode, you can see what the web page looks like on different devices. If you look at the header image in this example, you will see that it gets cropped when you view it on a mobile device. However, the image in the content area does not. It merely shows the image at a smaller size. So what you might want to be able to do is show a cropped version of that image on mobile devices and the full image on desktop devices. This is where responsive images come in. As you can see from this responsive example, when you switch to mobile, the header image and the main content image are cropped. While the knowledge of how responsive images works is outside the scope of this tutorial, you can read more about how to implement responsive images in the Mozilla web docs, specifically the article on responsive images. Since WordPress 4.4, responsive images is supported natively by including a source set and size attributes to the image markup generated by the wp-get-attachment-image function. This means that it's on by default and any images WordPress generates will automatically be responsive. To understand how this works, add an image to the media library in your WordPress site. Then browse to the upload directory and take a look where this image is stored. You will see that there are multiple versions of this image stored in the uploads directory. This is because WordPress automatically generates multiple versions of the image in different sizes, which can then be used in different contexts. Before responsive images, developers would attempt to dynamically serve different images to browsers based on the device type. The server would check what device size is being used and then serve the appropriate images. This would have been possible by using the user agent string, which is a string that is sent by the browser to the server and contains information about the browser and device being used. So here you can see it checks if the user agent contains the word mobile and if so it performs different functionality on mobile versus desktop. However, this makes testing difficult as you need to either test on physical devices, use a service like browser stack or set up the user agent string in your testing environment. Responsive design uses things like media queries to allow a single page to be rendered that will respond in the browser based on things like viewport width and display density. Responsive images follows this strategy and sends all of the information to the browser up front, letting the browser take care of loading the appropriate image rather than making those decisions on the server before the page is loaded. Let's see this in action by adding your image to a post and setting its size to full in the editor. Let's create a new post, add the image and leave it as full size resolution. When you preview the image, you'll see that the image tag contains more than just the image URL. If we inspect this image in the developer tools, let's take a closer look at this image tag to understand what these attributes do. The source set attributes contains a list of all the different versions of the image that WordPress has generated along with that image's width in pixels. In this case, there are three different versions of the image with widths of 799, 769 and 300 pixels respectively. The sizes attribute specifies the layout width of the image for each of a list of media conditions. In this example, the media condition is max width 799px and there are two layout widths, 100vw and 799px. 100vw means that the image will be displayed at 100% of the viewport width and 799px means that the image will be displayed at 799px. So in this example, the image will be displayed at 100% of the viewport width if the width of the viewport is less than 799px otherwise it will display the image at a width of 799px. WordPress 4.4 introduced a number of new functions and hooks to make it easier to work with responsive images. The wp get attachment image source set retrieves the value for an image's attachment source set attribute. wp calculate source set is a helper function to calculate the image sources to include in the source set attribute. wp get attachment image sizes creates a sizes attribute value for an image. wp calculate image sizes is a helper function to create the sizes attribute for an image and wp add source set and sizes adds the source set and the sizes attribute to the existing image element. Additionally, as a safeguard against adding very large images to source set attributes a max source set image width filter has been added which allows themes to set a maximum width for images to include in source set lists. The default value here is 2048 pixels. It is also possible to customize the responsive images markup if you need to. You can modify the default source set and sizes attributes by using the wp calculate image source set and wp calculate image sizes filters or override the source set or sizes attribute for images not embedded in post content for example post thumbnails or galleries by using the wp get attachment image attributes filter similar to how other image attributes are modified. If you're developing themes you can also create your own custom markup patterns by using the wp get attachment image source set function. Let's look at an example. Let's say you wanted to generate a function that outputs the image tag for this image but you only want to render the medium sized image and set a custom sizes attribute. Instead of the default which displays the image at 100% of the viewport at widths less than 799 and 799 width on wider viewports you want to set the sizes attribute to use the medium image width of 768. So that means you would need to set the sizes attribute to max width 768 100vw and 768 pixels Then you can call this function in any theme files that support PHP so for example templates and template parts and classic themes or block patterns and block themes. In this example it's being added to the footer default pattern of the 2023 theme inside a group block at the top of the pattern. The images ID is 9 which you would pass to the function. If you inspect this on the front end you will see that the custom sizes attribute has been used for the specific image. Then if you test this out in device mode you will see that on device sizes below 768 pixels the image is displayed at 100% of the viewport width but on device sizes above 768 pixels the image is displayed at a width of 768. And that wraps up this introduction to the responsive images API in WordPress. Happy coding!