Some Simplify Your Web extensions process images for rendering. It can be found under the 'crop pictures' or 'process pictures' denomination.

Processing images has advantages:

  • it resizes images to fit the space they will be contained into,
  • it crops them if the original images do not fit the width and height specified,
  • it allows filters to be applied,
  • it optimizes the resulting images with the specified quality.

Here is an example of what is happening 'under the hood':

Original image
Original image (width = 300px, height = 200px)

Picture width is set to 100px, height to 120px in the extension.

Resized image
Image is resized (width = 180px, height = 120px)
Cropped image
Image is cropped (width = 100px, height = 120px)

Filter is set to grayscale in the extension.

Filtered and final image
Filtered and final image

The picture ratio is always kept, which is why images are cropped if necessary.

Note When choosing NOT to process images, originals are unchanged and constrained within their container with CSS.

Following the example from above, the picture will look like this:

Original image, constrained
Original image, constrained by its container

Note When using the high resolution setting in the extension, an extra thumbnail is created with a size that is doubled the original thumbnail size. For instance, if you set the image to be 100px X 120px, the additional thumbnail will have the size 200px X 240px. This is why it is important that original images, used in the thumbnail creation, have a bigger size than the high resolution thumbnail (for better image quality - a small original image will look 'fuzzy' when blown up to a bigger size).