Image rendering and orientation

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.

image-orientation

The image-orientation CSS property defines the rotation that we can apply to an image, and it looks like this:

image-orientation: flip;

Description

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; }

image-rendering

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;

Description

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; }
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.128.145