ComboStrap UI - Raster Images

1 - About

raster images are images that are defined as a matrix of pixel (as opposed to vectorial image such as svg that are defined as geometric shape).

2 - Syntax

ComboStrap follows the general image syntax where you can set:

3 - Example

3.1 - Illustration

For instance:

  • an elevated photography with a surfer
  • centered
  • with a dimension of 600
  • responsive and mobile ready (below 600, the image scales down).
{{ :ui:stock_image_surfer_in_the_see.png?600&shadow=md&onhover=float |}}

3.2 - Icon

  • Syntax
A raster image can also be used as icon {{:ui:code-square.png?16&nolink|}}
  • Output:

A raster image can also be used as icon

The icon component creates svg icons

4 - Features

4.1 - Lazy loading

By default, the raster image are lazy loaded meaning that they are downloaded only when they are on the screen or going to be visible on the screen.

You can disable this feature with the rasterImageLazyLoadingEnable configuration.

4.2 - Automatic Responsive Resizing

Automatic Responsive Resizing aims to send the image that suits the sizing of the browser.

We detect if the user is on a mobile or a desktop and download the image at the lowest needed resolution.

The loaded image resolution is based on the screen size and pixel resolution with breakpoints at:

Breakpoint Max-Width Description
Extra-Small <= 375 Portrait phones
Small <= 576 Landscape phones
Medium <= 768 Tablets
Large <=992 Desktops
Extra-Large \ >=992 Large Desktops

The below video shows you a demonstration of responsive lazy loading of this page. When we are scrolling, just before the image that has a width of 600 is shown but we can see at the right side that the image downloaded has a size of 355px (A margin of -20px is applied by default and retina support is disabled)

4.3 - Retina Support

By default, the downloaded image will not have the resolution of the device.

ie If the user has a screen with a high device pixel ratio (DRP) resolution such as 3x (such as Retina), the downloaded image will be of a factor of 1.

The images will then be smaller (less traffic, more performance) but at the cost of a small loss in quality.

If you want to serve image that matches the resolution of the screen of your visitors, you need to check the Raster Image Enable configuration.

Ultimately, the browser will decide which image is best depending on external factor such as:

  • the internet connection of the user.
  • or the browser configuration (the user may choose to save data in the browser options)
We recommend to enable this feature.

We have disabled it because it will defeat the automatic responsive resizing (ie user will expect to see a smaller image on mobile but as most of the mobile phone nowdays have a higher resolution, a higher resolution image will be downloaded.)

5 - Configuration

5.1 - rasterImageLazyLoadingEnable

By default, the images are all loaded:

  • on time: ie just before they will enter the screen (while the user is scrolling)
  • with the lower resolution: the loaded image resolution is based on the screen size.

If you don't want this feature, you can disable it with the rasterImageLazyLoadingEnable configuration.

5.2 - retinaRasterImageEnable

On Mobile phones or high-end screens, the devices may have a higher resolution.

They generally shows 2 physical pixels for one logical pixels and therefore have what's called a device pixel ratio of 2.

The high end mobile can go up to a factor of 3.

By default, responsives images takes this into account and will download for a mobile screen of 300px and a device pixel ratio of 2, an image of 600px.

To avoid confusion and spare bandwidth, we have disabled this behavior.

If you want to go back to the default behavior, you can do it by unchecking the retinaRasterImageEnable configuration.

5.3 - responsiveImageMargin

Below the responsive breakpoints, we extract a margin. The default value is 20px but you may change it with the responsiveImageMargin configuration.

Powered by ComboStrap