How to Implement Responsive Image Processing Using Generic APIs

In this post, we're going to explore the Responsive Images API in WordPress together.We'll mention what responsive images are, why you should use them, how WordPress makes these images work, and what to do if you want to customize them.

What are responsive images?

Responsive Imagesis an image that can be adapted to the screen size of the device on which it is being viewed. This is important because it means that the image will always look good no matter what device it is being viewed on.

Let's see.One exampleThe

Most modern browsers have a special mode for viewing web page layouts on mobile devices. In Chrome-based browsers, it's called Device Mode, and in Firefox and Safari, it's called Responsive Design Mode. You can usually access it from your browser's developer tools. When this mode is enabled, you can see how a web page will look on different devices.

If you look at the header image in this example, you will notice that it is cropped when you view it on your mobile device. However, the image in the content area is not; it just displays the image at a smaller size.

Therefore, you may want to be able to display a cropped version of that image on a mobile device and the full image on a desktop device. This is where responsive images come in handy.

As you can see in this responsive image exampleAs you can see in , when you switch to a mobile device, both the header image and the main content image are cropped.

While knowledge of how responsive images work is beyond the scope of this tutorial, you can find out more about them in the MDN Web documentation atRead more about how to implement responsive images in.

WordPress Responsive Images API

srcsetAs of WordPress 4.4, the inclusion and attribution of thefunction (math.)sizesGenerated image markup, WordPress natively supports responsive images. This means that it is enabled by default and any image generated by WordPress will be automatically responsive.wp_get_attachment_image()

To understand how it works, let's look at a simple example.

First, add the image to your WordPress site's media library.

If you then browse to the upload directory and view where the image is stored, you will see that there are multiple versions of the image.

This is because WordPress automatically generates multiple versions of an image in different sizes, which can then be used in different contexts.

Before responsive images were available, developers would try to dynamically serve different images to the browser based on the device type. The server will check the size of the device being used and then serve the appropriate image.

This can be done by using theuser agentThe string is implemented as a string sent from the browser to the server containing information about the browser and device used.

// check the $_SERVER["HTTP_USER_AGENT"] variable to see if this is a mobile device request
$isMob = is_numeric(strpos(strtolower($_SERVER["HTTP_USER_AGENT"]), "mobile"));; $_SERVER["HTTP_USER_AGENT"] variable to see if this is a mobile device request

if($isMob){
    echo 'Using Mobile Device...' ;
}else{
    echo 'Using Desktop...' ; }else{ ;
}

However, this makes testing difficult because you need to test on a physical device using theBrowserStackand other services, or set up a user agent string in a test environment.

Responsive design uses things like media queries to render a single page that will respond in the browser based on things like viewport width and display density. Responsive images follow this strategy and send all the information to the browser in advance, leaving the browser in charge of loading the appropriate image rather than making these decisions on the server before the page loads.

Let's see this in action by adding the image to the post and setting its size to full size in the editor.

When you preview the image, you'll notice that the image tag contains more than just the image URL; it also contains asrcsetattribute and asizesProperties.

<img decoding="async" fetchpriority="high" width="799" height="533" src="https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg"  class="wp-image-9" 
     srcset="     https://learnpress.test/wp-content/uploads/2023/09/water-4.jpeg 799w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-300x200.jpeg 300w,      https://learnpress.test/wp-content/uploads/2023/09/water-4-768x512.jpeg 768w" 
     sizes="(max-width: 799px) 100vw, 799px">

Let's take a closer look at this image tag to understand what these attributes do.

ought tosrcsetattribute contains a list of all the different versions of the image generated by WordPress, and the width of that image in pixels.

In this example, there are 3 different versions of the image with widths of799,769respond in singing300The

ought tosizesproperty specifies the width of the image layout for each media condition list. In this example, the media conditions are(max-width: 799px)and has two layout widths100vwrespond in singing799pxThe100vwIndicates that the image will be displayed at 100% of the viewport width.799pxIndicates that the image will be displayed at 799px.

Therefore, in this example, if the viewport width is less than 799px, the image will be displayed at 100% of the viewport width, otherwise the image will be displayed at a width of 799px.

The browser can then use this information to determine which image to load based on the device (as determined by its viewport width) that is viewing the image. Server-side logic is no longer required, resulting in faster page request times. Since the images are served statically, the browser can cache them, further speeding up page load times.

New features and hooks

WordPress 4.4 introduces many new functions and hooks that make working with responsive images much easier.

• wp_get_attachment_image_srcset () - retrieves the value of the image attachment attributesrcsetThe
• wp_calculate_image_srcset () - helper function for calculating the image source to be included in the propertysrcsetThe
• wp_get_attachment_image_sizes () - Creates the value of the size attribute of the image.
• wp_calculate_image_sizes () - helper function used to create the image size attribute.
• wp_image_add_srcset_and_sizes () -srcsetdemand-drivenimgelement to add attributes and resize it.

In order to prevent the transfer of data tosrcsetattribute adds very large images, adds amax_srcset_image_width (machine) filterIt allows the theme to set the maximum image width for the images contained in the list.srcsetThe default value is 2048 pixels. The default value is 2048 pixels.

Custom Responsive Image Markup

Responsive image markup can also be customized if desired.

You can use filtersrespond in singing(machine) filterto change the default valuesrcsetrespond in singingsizesattributes, or using the wp_get_attachment_image_attributes filteroverwriteThe or attributes of images that are not embedded in the content of a post (e.g. post thumbnails, galleries, etc.) , similar to other image attributes are modified.wp_calculate_image_srcset wp_calculate_image_sizes srcsetsizes

If you're developing a theme, you can also create your own custom markup using the functionwp_get_attachment_image_srcset paradigmThe

Let's look at an example.

Suppose you want to generate an outputimgfunction for that image's label, but you only want to render medium-sized images and set a customsizesProperties.

By default, the image is displayed at a viewport width of 100% for viewport widths less than 799 pixels, and at a width of 799 pixels on wider viewports where you want to set the Size property to use a medium image width of 768 pixels.

This means that you need to set the size property to(max-width: 768px) 100vw, 768pxThe

function get_custom_responsive_image( $attachment_id ) {
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
echo '<img src="' . $img_src . '" srcset="' . $img_srcset . '" sizes="(max-width: 768w) 100vw, 768px" alt="Our custom responsive image">';
}

You can then call this function in any theme file that supports PHP, such as templates and template sections in the Classic theme, or block mode in the Block theme.

In this example, it is added to the default schema for the footer of the TwentyTwelveThirteen theme, which is located in the block at the top of the schema. The image ID is 9, which you can pass to the function:

	<!-- wp:group {"align":"wide"} -->
	<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40)">
		<?php get_custom_responsive_image( 9 ); ?>
	</div>
	<!-- /wp:group -->

If you view this on the front end, you can see that the Custom Size property has been used for that particular image.

If you test this in device mode, you will see that at device sizes below 768 pixels, the image is displayed at 100% of the viewport width, and at sizes above 768 pixels, the image is displayed at 768 pixels wide.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off