Bricks → Settings → General has a setting under Miscellaneous called “Generate Custom Image Sizes”.
Enabling this will register these image sizes in your Bricks-powered WordPress site:
- bricks_large_16x9: 1200×675 pixels (cropped to fit)
- bricks_large: 1200×9999 pixels (proportionally resized to fit inside dimensions)
- bricks_large_square: 1200×1200 pixels (cropped to fit)
- bricks_medium: 600×9999 pixels (proportionally resized to fit inside dimensions)
- bricks_medium_square: 600×600 pixels (cropped to fit)
I find myself constantly looking for the list of the above and other image sizes and hence this post.
Below is a table of registered image sizes that come with:
- WordPress (by default)
- WooCommerce (by default)
- Bricks (optional and not enabled by default)
| Image Size Handle | Dimensions | Image Cropping | Notes |
|---|---|---|---|
| thumbnail | 150×150 | true (cropped) | Default in WordPress |
| medium | 300×300 | false (resized) | Default in WordPress |
| medium_large | 768×0 | false (resized) | Default in WordPress |
| large | 1024×1024 | false (resized) | Default in WordPress |
| 1536×1536 | 1536×1536 | false (resized) | Default in WordPress 2x medium_large size |
| 2048×2048 | 2048×2048 | false (resized) | Default in WordPress 2x large size |
| woocommerce_thumbnail | 300×300 | true (cropped) | Added by WooCommerce |
| woocommerce_single | 600×0 | false (resized) | Added by WooCommerce |
| woocommerce_gallery_thumbnail | 100×100 | true (cropped) | Added by WooCommerce |
| shop_catalog | 300×300 | true (cropped) | Added by WooCommerce |
| shop_single | 600×0 | false (resized) | Added by WooCommerce |
| shop_thumbnail | 100×100 | true (cropped) | Added by WooCommerce |
| bricks_large_16x9 | 1200×675 | true (cropped) | Added by Bricks (if enabled) |
| bricks_large | 1200×9999 | false (resized) | Added by Bricks (if enabled) |
| bricks_large_square | 1200×1200 | true (cropped) | Added by Bricks (if enabled) |
| bricks_medium | 600×9999 | false (resized) | Added by Bricks (if enabled) |
| bricks_medium_square | 600×600 | true (cropped) | Added by Bricks (if enabled) |
Cropping behavior
The default value for this is false i.e., the image will be scaled or proportionately resized.
If true, the image will be cropped to the specified dimensions using center positions.
An example of when false is better is for showing posts (their featured images) in a masonry layout. We want the posts to have different heights. You would select or create an image size in this case with the cropping mode set to false.
An example of when true is better is for showing posts in a uniform grid where every post (its featured image) should be the same size.
Screenshot from wpmudev article:
Recommendations/Notes
- Refer to this codex article on how to get rid of unwanted image sizes.
- Best Practices article in Bricks’ academy says: “Upload images with a minimum width of 600 pixels. Ideally 1600 pixels in width or more.”
- ImageOptim + Google Guetzli is pretty neat. Screenshot.
Reference
/wp-content/themes/bricks/includes/setup.php.
![[WooCommerce] Product Category Image Background in Bricks](https://brickslabs.com/wp-content/uploads/2024/07/woocommerce-product-category-image-background-bricks-768x399.jpg)
3 comments
ian
Hi Sridhar, is ImageOptim + Google Guetzli still the best? That video is from 2018. I use https://bulkresizephotos.com/ , maybe imageoptim or other produce better results? Thanks!
Sridhar Katakam
I still use ImageOptim + Google Guetzli.
There may be better software or options, but I haven't tried them.
ian
Hi, sorry for the late reply. I found Imageoptim does a great job actually, thanks Sridhar!