Responsive Images

Information below is actual for Impreza version 5.1 and higher.

This article will help to understand the mechanism of showing images on a Impreza-based site.

The first thing you should to know — every image uploaded into your Media Library will automatically create several thumbnails with smaller sizes (dimensions in pixels), this is a default WordPress mechanism. The quantity of such thumbnails depends on original dimensions of an image and your settings. Check the table below.

Predefined Image Sizes #

Dimensions (px) Provided by System name Changeable? Used by default in
1024 x 1024 WordPress large In "Settings > Media" — Post Image of new Grid Layout
— Meta tag "og:image"
300 x 300 WordPress medium In "Settings > Media" — Image Gallery with "Masonry" mode and 6, 7, 8, 9, 10 columns
— Logos Showcase element
— Preloader Screen custom image
150 x 150 (cropped) WordPress thumbnail In "Settings > Media"

— Image Gallery with "Regular Grid" mode and 8, 9, 10 columns
— Image Slider "Thumbs" additional navigation
— Sided navigation on Portfolio Pages and Posts
— Product Gallery thumbnails on Product pages
— Product previews in WooCommerce widgets

600 x 600 (cropped) Impreza us_600_600_crop

In "Impreza > Theme Options > Advanced > Custom Image Sizes" (since Impreza 4.10)

— Image Gallery with "Regular Grid" mode and 2, 3, 4 columns
350 x 350 (cropped) Impreza us_350_350_crop In "Impreza > Theme Options > Advanced > Custom Image Sizes" (since Impreza 4.10) — Image Gallery with "Regular Grid" mode and 5, 6, 7 columns
— Person element
600 x 600 (cropped) WooCommerce (if installed) shop_single In "Appearance > Customize > WooCommerce > Products Images" (since WooCommerce 3.3) — Main Product image on Product pages
300 x 300 (cropped) WooCommerce (if installed) shop_catalog In "Appearance > Customize > WooCommerce > Products Images" (since WooCommerce 3.3) — All Product lists (Shop and Category pages, Cross-sell and Up-sell blocks)
  • (cropped) means that thumbnail will be cropped to exact width and height ignoring proportions of an original image
  • if two or more Images Sizes have the equal values, then only one thumbnail will be generated

Regarding the table above when you upload a large image (bigger than 1024px), it generates 5 thumbnails (7 thumbnails if you're using WooCommerce) by default. All thumbnails are located in /wp-content/uploads/ folder of your WordPress installation, also thumbnails have suffix in their file name, which means dimensions in pixels:

1967.png

Adding new Image Sizes #

In Impreza 4.4 we added ability to add new Image Sizes via specific option in Theme Options > Advanced > Custom Image Sizes:

2173.png

You can set any amount of additional image sizes. After adding new sizes or changing the existing ones you should regenerate your thumbnails.

We don't recommend to set many Image Sizes because of every Image Size:

  • increases uploading time, when you add images into Media Library
  • creates additional files in your upload directory regarding quantity of your uploaded images. For example, if you upload 100 images into your website, you will have 600 files summary by default, and every additional Image Size will add 100 files after regenerating thumbnails.

Regenerating Thumbnails #

When you change any values of existing Image Sizes or add new ones, you should regenerate thumbnails of your uploaded images.

Regenerating is available via plugins only. We recommend using Force Regenerate Thumbnails because this plugin will also delete all images with unused sizes from your upload directory.

Applying Image Sizes #

In most cases theme elements are using the most suitable image sizes, which predefined by Impreza code, check "Predefined Image Sizes" table for more information. But in case of better managing of your website page loading speed we implement the ability to select Image Sizes for the following elements:

  1. Single Image
  2. Image Slider
  3. Image Gallery
  4. Person
  5. Logos Showcase
  6. Grid
  7. Posts Featured Image Size in Theme Options > Blog
  8. Related Posts block in Theme Options > Blog
  9. Blog Home Page block in Theme Options > Blog
  10. Archive Pages block in Theme Options > Blog
  11. Search Results Page block in Theme Options > Blog
  12. Image via "Add Media" button in Text editor
  13. Gallery via "Add Media" button in Text editor