The tools
WordPress provides several tools for adding images to your pages. These tools differ from one another in their editing possibilities and their use case
We have identified 3 types of tools
The Classic block is a bit like the Swiss army knife of WordPress edition. Among its many features, it allows you to integrate images and text.
Please note that the Classic block is also nested in some other blocks.
In some blocks, images can be placed with text but the formatting possibilities, such as size, alignment, are restricted.
- The Image block
Lets you place an image alone, i.e. without text but with the option of adding a caption. The block will take the width of the central column - The Cover block
Lets you place a single image in a block, i.e. without text but with the option to put a copyright. The block takes the width of the page - The Hero block
Allows you to place a single image in a block but with the option to put a title, subtitle and copyright information. The block takes the width of the page - The Gallery block
Lets you create an image gallery. Images may have captions and copyright information.
The other specific blocks are mainly used to create teasers, i.e. visual elements highlighting content located on other pages and linking to them.
On the Block List page, insert the word teaser in the Search field, and you will directly access the list of other specific blocks, with a thumbnail for each block and direct links to their instructions for use.
Image size
Specific blocks
For an optimal and consistent display, images placed using specific blocks (teasers, hero, cover, etc) must
- respect the proportion 16:9 (or W/H=1.777)
- be minimum sized
This size is specified in the help of each block
Classic block
Images placed with the Classic block have no specific constraints. However, images are automatically resized on display so that they do not exceed the width of the main column.
- Maximum useful width: 570px
InLine images
Images placed using the Inline tool have no specific constraints except that you can only adjust the length of the image and they are not automatically resized when displayed. This means that your image may not fit in the column and overflow to the right.
Image format
Browsers support 3 different image formats.
- GIF (Graphic Interchange Format) – Extension: .gif
- Optimized for icons, logos, illustrations
- Limited to 256 colours
- Compression without loss of quality
- Supports transparency
- Possibility of animation
- JPEG (Joint Photographic Expert Group) – Extension: .jpg
- Optimized for photography
- Supports millions of colours
- Adjustable compression but with loss of quality
- No transparency or animation
- PNG (Portable Network Graphic) – Extension: .png
- Suitable for all types of images
- Millions of colours
- Compression without loss of quality but photos a bit heavier than JPEG.
- Supports transparency