Making sure images display correctly is not only a designer's responsibility, we as web designers and developers also have a say in how images behave and display under particular circumstances.
Let's see how to change the orientation and rendering quality of images with CSS.
The
image-orientation
CSS property defines the rotation that we can apply to an image, and it looks like this:
image-orientation: flip;
Many images contain information about the settings used to take a picture, such as ISO speed, aperture, shutter speed, camera model, white balance, date and time, and so on. This information is called EXIF Data, and CSS uses this data for image orientation purposes. It also supports one or two values in a single declaration.
The image-orientation
property supports two keyword values and an angle value: from-image
, flip
, and an angle value.
from-image
: The image is rotated using the EXIF Data contained in the image.flip
: The image is flipped horizontally; it's reflected. This value should go after the angle value.Angle value
: This defines the rotation applied to the image. It uses a number followed by the deg
unit. This value should go before the flip
keyword value.CSS:
/*Flip the image horizontally*/ img { image-orientation: flip; } /*Rotate the image 180 degrees and flip it horizontally*/ img { image-orientation: 180deg flip; } /*Follow the orientation from the EXIF information in the image*/ img { image-orientation: from-image; }
The image-rendering
CSS property defines what type of algorithm the browser should use to render scaled images, and it looks like this:
image-rendering: pixelated;
The image-rendering
CSS property works for either downscaled or upscaled images. This property supports three keyword values: auto
, crisp-edges
, and pixelated
.
auto
: This is the default value. When an image is either scaled up or down, this property smooths or blurs the image in order to preserve the best appearance possible. However, sometimes this may produce undesired results, depending on the type of image.crisp-edges
: This property does not apply any smoothing or blurring to the image. It preservers its contrast, edges, and color. This property was exclusively created for pixel art.pixelated
: This property only works on images that have been scaled up via the nearest neighbor algorithm, which makes the image look like it was made with large pixels. This is useful when scaling up checkered patterns like a chessboard, a checkerboard, or QR codes.CSS:
/*Good for checkered patterns or QR codes*/ img { image-rendering: pixelated; } /*Exclusively for pixel art*/ img { image-rendering: crisp-edges; }
3.133.128.145