The “-rotated” suffix for images, or what WP does with image orientations

Since WordPress 5.3, when uploading images, WP checks the image orientation metadata. If the metadata indicates that the image orientation differs from the standard (the standard orientation index should be equal to one - 1 or simply not specified), WP changes the original image orientation so that the basic orientation is obtained in the end.

To change the orientation in WP, before creating intermediate sizes, it rotates the image based on the orientation metadata and saves the result with the suffix -rotated.

The new "-rotated" image is now considered the original image, and the path to it is recorded in the _wp_attached_file meta-field. And now the function that usually returns the original path get_attached_file() or the original URL wp_get_attachment_url() and other functions that should return the original image will return the new -rotated path/URL.

The original image file is not deleted and is located in the uploads folder. The indication that there is an original is added to the WP attachment metadata, in the key of the array: original_image. The path or URL to the source can be obtained using the functions:

Let's consider an example:

Suppose we upload an image Landscape_2.jpg with an exif data indicating [Orientation] => 2. Then WP will create another file Landscape_2-rotated.jpg, place it next to the original in the uploads folder, make it the main file, and add the name of the original file to the metadata

'original_image' => 'Landscape_2.jpg',

Data from the wp_postmeta table:

+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+
| post_id | meta_key                | meta_value                                                                                                                                             |
+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+
| 1863    | _wp_attached_file       | 2022/06/Landscape_2-rotated.jpg                                                                                                                        |
| 1863    | _wp_attachment_metadata | a:7:{s:5:"width";i:1800;s:6:"height";i:1200;s:4:"file";s:31:"2022/06/Landscape_2-rotated.jpg";s:8:"filesize";i:400881;s:5:"sizes";a:6:{s:6:"medium";a: |
|         |                         | 5:{s:4:"file";s:23:"Landscape_2-300x200.jpg";s:5:"width";i:300;s:6:"height";i:200;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:14295;}s:5:"large |
|         |                         | ";a:5:{s:4:"file";s:24:"Landscape_2-1024x683.jpg";s:5:"width";i:1024;s:6:"height";i:683;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:130033;}s:9 |
|         |                         | :"thumbnail";a:5:{s:4:"file";s:23:"Landscape_2-150x150.jpg";s:5:"width";i:150;s:6:"height";i:150;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:60 |
|         |                         | 50;}s:12:"medium_large";a:5:{s:4:"file";s:23:"Landscape_2-768x512.jpg";s:5:"width";i:768;s:6:"height";i:512;s:9:"mime-type";s:10:"image/jpeg";s:8:"fil |
|         |                         | esize";i:75295;}s:9:"1536x1536";a:5:{s:4:"file";s:25:"Landscape_2-1536x1024.jpg";s:5:"width";i:1536;s:6:"height";i:1024;s:9:"mime-type";s:10:"image/jp |
|         |                         | eg";s:8:"filesize";i:283925;}s:14:"post-thumbnail";a:5:{s:4:"file";s:25:"Landscape_2-1568x1045.jpg";s:5:"width";i:1568;s:6:"height";i:1045;s:9:"mime-t |
|         |                         | ype";s:10:"image/jpeg";s:8:"filesize";i:295929;}}s:10:"image_meta";a:12:{s:8:"aperture";s:1:"0";s:6:"credit";s:0:"";s:6:"camera";s:0:"";s:7:"caption"; |
|         |                         | s:0:"";s:17:"created_timestamp";s:1:"0";s:9:"copyright";s:0:"";s:12:"focal_length";s:1:"0";s:3:"iso";s:1:"0";s:13:"shutter_speed";s:1:"0";s:5:"title"; |
|         |                         | s:0:"";s:11:"orientation";i:1;s:8:"keywords";a:0:{}}s:14:"original_image";s:15:"Landscape_2.jpg";}                                                     |
| 1863    | _edit_lock              | 1656265849:1                                                                                                                                           |
+---------+-------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------+

Array: _wp_attachment_metadata:

[
	'width' => 1800,
	'height' => 1200,
	'file' => '2022/06/Landscape_2-rotated.jpg',
	'filesize' => 400881,
	'sizes' =>
		[
			'medium'         =>
				[
					'file'      => 'Landscape_2-300x200.jpg',
					'width'     => 300,
					'height'    => 200,
					'mime-type' => 'image/jpeg',
					'filesize'  => 14295,
				],
			'large'          =>
				[
					'file'      => 'Landscape_2-1024x683.jpg',
					'width'     => 1024,
					'height'    => 683,
					'mime-type' => 'image/jpeg',
					'filesize'  => 130033,
				],
			'thumbnail'      =>
				[
					'file'      => 'Landscape_2-150x150.jpg',
					'width'     => 150,
					'height'    => 150,
					'mime-type' => 'image/jpeg',
					'filesize'  => 6050,
				],
			'medium_large'   =>
				[
					'file'      => 'Landscape_2-768x512.jpg',
					'width'     => 768,
					'height'    => 512,
					'mime-type' => 'image/jpeg',
					'filesize'  => 75295,
				],
			'1536x1536'      =>
				[
					'file'      => 'Landscape_2-1536x1024.jpg',
					'width'     => 1536,
					'height'    => 1024,
					'mime-type' => 'image/jpeg',
					'filesize'  => 283925,
				],
			'post-thumbnail' =>
				[
					'file'      => 'Landscape_2-1568x1045.jpg',
					'width'     => 1568,
					'height'    => 1045,
					'mime-type' => 'image/jpeg',
					'filesize'  => 295929,
				],
		],
	'image_meta' =>
		[
			'aperture'          => '0',
			'credit'            => '',
			'camera'            => '',
			'caption'           => '',
			'created_timestamp' => '0',
			'copyright'         => '',
			'focal_length'      => '0',
			'iso'               => '0',
			'shutter_speed'     => '0',
			'title'             => '',
			'orientation'       => 1,
			'keywords'          =>
				[
				],
		],
	'original_image' => 'Landscape_2.jpg',
]

WP does not always correctly change the image orientation, so to ensure everything works correctly, there is a mini-plugin available at https://github.com/gagan0123/fix-image-rotation. This plugin is recommended for installation on all websites, especially if the site has many images uploaded from phones.

General information about image orientation.

When viewing an image, the browser or any other viewer reads the image orientation metadata (Orientation) and automatically rotates the image as indicated in the data, so that we always see the image correctly, even if the original file, for example, is upside down.

For example, we take a photo with a phone, and the phone saves the image in an upside-down position (probably to avoid unnecessary operations) and adds a metadata tag about the orientation, for example, Orientation=3. Now, when viewing the image, for example, in a browser, the browser reads this information and before displaying it, rotates the image as necessary. As a result, we see a normal image, without suspecting that in reality the image stored on the disk, for example, is in an upside-down position.

Why does WP need this?

The basic orientation is important when creating image thumbnails. This way, there is no need to check the orientation of the source file separately, and it is possible to simply work with the source in the standard form.

For example, if a thumbnail is created from a source that has a non-standard orientation, for example, upside down, then the thumbnail will also be upside down. In this case, to ensure the thumbnail is normal, it is necessary to specify the EXIF orientation data for it or correct the original in advance and only then create the thumbnail.

To avoid separately handling non-standard orientation, WP brings the original image to a standard form, so that it can then be worked with as usual.

How to Disable the Image Orientation Conversion Function in WP?

To do this, you can use the filter wp_image_maybe_exif_rotate - insert it into the functions.php of the theme:

add_action( 'wp_image_maybe_exif_rotate', '__return_false' );

Completely disabling this function is not recommended. Because it is a useful feature. However, to prevent the creation of a duplicate in the form of the retained original image, it is recommended to install the mini-plugin: https://wordpress.org/plugins/fix-image-rotation/. It fixes some of the WP conversion bugs and replaces the original image with a new one (with the basic orientation). Thus, a new file with the suffix -rotated is not created, and the original is simply modified.

How it Works:

The following chain of functions is triggered when creating an image:

  • media_handle_upload()

    • wp_generate_attachment_metadata()

      • wp_create_image_subsizes()

        • wp_get_image_editor()

          // checks the orientation and corrects if needed
$editor = wp_get_image_editor( $file );
$rotated = $editor->maybe_exif_rotate();

if ( true === $rotated ) {
	$saved = $editor->save( $editor->generate_filename( 'rotated' ) );
	$image_meta = _wp_image_meta_replace_original( $saved, $file, $image_meta, $attachment_id );
}

wp_update_attachment_metadata( $attachment_id, $image_meta );

// creates intermediate sizes
_wp_make_subsizes();

--

Read also: