Title: Responsive images Author: WordPress VIP Documentation Published: September 10, 2020 Last modified: July 1, 2026 --- 1. [VIP File System](https://docs.wpvip.com/vip-file-system/) 2. [Image file behavior](https://docs.wpvip.com/vip-file-system/image-files/) 3. Responsive images # Responsive images Responsive images are [automatically supported by WordPress Core](https://developer.wordpress.org/apis/responsive-images/). Image markup will automatically include `srcset` and `sizes` attributes for images uploaded to a WordPress site’s Media Library. These attributes enable web browsers to automatically use and display the most suitable image size based on a device’s screen size. WordPress Core includes a default set of image sizes (i.e. `full`, `large`, `medium_large`,` medium`, `thumbnail`) and those sizes are included in the `srcset` value for an image. If [additional custom image sizes are registered](https://developer.wordpress.org/reference/functions/add_image_size/) on a site by an active theme or plugin, those sizes will also be included in the` srcset`. Example output of `srcset` and `sizes` attributes generated by default for an image file: ```wp-block-preformatted example image ``` ## Default behavior On a typical WordPress install, a separate (intermediate) image file is generated for each registered image size when an image is uploaded. The dimensions of each of those intermediate file sizes, and the paths to each generated image, are stored in [the attachment post for the image file](https://wordpress.org/documentation/article/what-is-post-type/#attachments) in the database. However, on the VIP Platform [separate intermediate images are _not_ generated](https://docs.wpvip.com/vip-file-system/image-files/intermediate-images/) for image files. The registered [image sizes for a file are dynamically generated](https://docs.wpvip.com/vip-file-system/image-files/transformations/) on demand. Only the original uploaded file is stored on the VIP File System, and only the dimensions of the original uploaded file—and the path to its location—are stored in the image’s attachment post metadata. By default, all registered image sizes (default and custom) will be included in the generated `srcset` for an image. * Images added to post content with [the Image Block](https://wordpress.org/documentation/article/image-block/) will generate `srcset` for all registered image sizes, regardless of the image’s aspect ratio. * When images are output by functions such as `[the_post_thumbnail()](https://developer.wordpress.org/reference/functions/the_post_thumbnail/)`, the generated `srcset` will only include other registered image sizes that share the same aspect ratio. For example, the default size for `thumbnail` has a 1: 1 aspect ratio because it is set to 150 wide by 150 high with a hard crop. The` srcset` for an image output at `thumbnail` size will only include other image sizes if: - Another registered image size is also set to hard crop at a 1:1 pixel ratio( e.g. 200×200). - The originally uploaded image size is already a 1:1 aspect ratio. * Only the registered image sizes that have a smaller pixel dimension than the originally uploaded image (`full`) size will be included in the `srcset` for that image. For example, if an image is uploaded with the original dimensions 380×300, the `srcset` for that image will not include `large` (1024), or `medium_large`( 768). ## Disable VIP’s responsive image support Customers can optionally implement their own [custom `srcset` solutions](https://developer.wordpress.org/apis/responsive-images/#customizing-responsive-image-markup) for their WordPress applications. For a custom solution to work as expected, VIP’s responsive image support must be disabled by setting the `vip_go_srcset_enabled` filter to `__return_false`. It is recommended to add the filter to a custom single file plugin located in `[/client-mu-plugins](https://docs.wpvip.com/wordpress-skeleton/client-mu-plugins-directory/)`. For WordPress multisite environments, logic can be added to the custom plugin that selectively disables the filter per-network site if needed. ```lang-php add_filter( 'vip_go_srcset_enabled', '__return_false' ); ``` ## Troubleshooting WordPress sites that have migrated to the VIP Platform might have attachment posts with metadata that points to separate intermediate files (e.g. `image-300x300.jpg`). Metadata for an attachment can be reviewed by running the WP-CLI command `[wp post meta get](https://developer.wordpress.org/cli/commands/post/meta/get/) _wp_attachment_metadata` against an image file’s attachment ID. This example command demonstrates the WP-CLI command being run with VIP-CLI to retrieve metadata for an image file with the attachment ID `1234`: ```wp-block-preformatted $ vip @example-app.develop --y -- wp post meta get 1234 _wp_attachment_metadata ``` URLs for separate intermediate image sizes will render correctly in `srcset` as long as: * That specific intermediate image file is stored in the VIP File System. * The file path in the attachment metadata is a valid path that points to the correct location of the file on the VIP File System. If the intermediate file specified in the metadata was _not_ imported to the VIP File System, or the path is invalid for other reasons, URLs for that image size will return a `404` in the generated `srcset`. There are a few possible resolutions to intermediate file URLs that return a `404` in `srcset`. ### Import the intermediate images If intermediate images were not included in the initial media import, and the files are still available, re-import all of the site’s media files. By default, [the VIP-CLI `vip import media` command](https://docs.wpvip.com/vip-cli/commands/import/media/) _excludes_ files identified as intermediate images. To override that default, include the  `-i` option when running the `import media` command. ### Reset the attachment metadata Attachment metadata can be modified by executing a custom CLI command with VIP-CLI. This method requires [writing a custom CLI command](https://docs.wpvip.com/write-custom-wp-cli-commands/) that can iterate through a site’s attachment posts and delete size arrays, if they exist, in the attachment’s metadata. This code example demonstrates a method for deleting existing size arrays in the attachment’s metadata: ```lang-php $meta = wp_get_attachment_metadata( $id ); $meta['sizes'] = []; wp_update_attachment_metadata( $id , $meta ); ``` ### Enable Jetpack Photon dynamic file resizing The `WPCOM_VIP_USE_JETPACK_PHOTON` constant can be set as `true` to take advantage of Jetpack Photon dynamic image resizing. If enabled on a VIP site, filters that are defined within [VIP MU plugins](https://docs.wpvip.com/vip-go-mu-plugins/) will strip dimensions from file names (e.g. `-150x150`) and append the dimensions as ` resize` query parameters to the file path. For example, this intermediate file path: `https://example.com/wp-content/uploads/ 2023/01/example-image-600x400.jpg` Will be filtered as: `https://example.com/wp- content/uploads/2023/01/example-image.jpg?resize=600%2C400` This method can be tested by adding the `jetpack-photon=yes` query parameter to a URL. For example: `https://example.com/example-post/?jetpack-photon=yes` vip-config/vip-config.php ```lang-php define( 'WPCOM_VIP_USE_JETPACK_PHOTON', true ); ``` ### Unoptimized image warnings in Lighthouse Lighthouse may flag images as unoptimized or incorrectly sized if a theme isn’t using WordPress’s native srcset in a way that works with VIP’s image resizing. VIP automatically generates responsive image variants, but themes need to use standard WordPress image functions to take advantage of this. If your theme is generating images at full size instead of serving appropriately scaled variants, ensure that image markup is using `wp_get_attachment_image()` or equivalent functions that output srcset attributes. Custom image implementations that bypass WordPress’s image handling will not benefit from VIP’s automatic resizing. If Lighthouse warnings persist even with correct srcset markup, the default registered image sizes may not be granular enough to satisfy Lighthouse’s sizing checks. [This example `wp_calculate_image_srcset` filter](https://gist.github.com/itsTallulah/fd3e77f7a8fd55444871b0a1b7526432) generates additional, more closely-spaced width variants to supplement the default srcset output. Last updated: July 01, 2026