Raster Image in ComboStrap (jpg, png, ...)

Undraw Add Content Re Vgqa


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).

jpeg, png, bmp, gif are all examples of raster images.


ComboStrap follows the general image syntax where you can set:

  • the dimension (width, height, ratio)
  • the alignement (left, center, right float)


  • By default, we don't allow a raster image to expand beyond its dimensions. For instance, if an image is 300px wide, and that you asks to render it with a 400px width, we will send a warning message that this is not possible.
  • For illustrative purpose, such as in a card image or background, the image will expand.



For instance:

{{ :docs:block:stock_image_surfer_in_the_see.png?600&shadow=md&onhover=float&opacity=0.5&class=rounded |}}

Stock Image Surfer In The See


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

A raster image can also be used as icon Code Square

The icon component creates svg icons


Thanks to the utility class of bootstrap, your can apply the borders class to create an avatar image.



Nico Gravatar


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.

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)

Lazy Responsive Load

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.)



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.


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.


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


Resizing is not working from my big raster image

By default, Dokuwiki uses the PHP's libGD for resizing. This library loads the image in memory and if your run out of memory, the server-side resizing is aborted and the image is sent as is.

Configuring DokuWiki to use imagemagick may/should circumvent this problem.

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Related HowTo's
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...

Recommended Pages
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Undraw Add Content Re Vgqa
ComboStrap UI Inline components

Inline components are used inside a paragraph (ie in a line).
Featured Image
Featured Image

A featured image is a page's main illustrative image. The featured image is generally located below or above the page tile. We support two types of featured images: raster that are suitable for...
How to define your data set with Sql

This page defines the sql that can be used to retrieve data from pages
Undraw My Documents
How to set the Opacity / Alpha or Transparency

The opacity attribute permits to set the opacity (alpha/transparency) of any component.
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Speed Performance
Lazy loading in ComboStrap

ComboStrap loads all images by default in a lazy mode meaning that they are loaded only when they are going to enter the screen.
Undraw My Documents

A lightbox is a window that: appears when you click on a image showing the image in full format against a dark background (giving more contrast and therefore more light). If you click on this...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion

Task Runner