Article Body Blocks

Image Block

Using Images with transparency

In order for images to look best in light/dark mode, there are a couple situations for when you might want transparent backgrounds:

• A single graphic with a transparent background and text colors that have enough contrast on both light and dark page backgrounds
• Compositions of multiple photos
• Photos with page tears or other types of edge treatments

The recommended approach to handling this in our CMS is to save the image in two formats:

Targeted to the web platform in Craft: .webp which supports transparency and generates small file sizes for for both graphics and photos (unlike .png). The latest versions of Photoshop support webp out of the box (File > Save As… > Change the file format to WebP in the dropdown).

Targeted to all other platforms in Craft: .jpeg or .png, whichever results in a smaller file size. Do not use png for anything other than a graphic or there will be problems. (If you’re saving this image as a jpeg, build in a white background in a way that looks intentional when viewed in dark mode:

• For photo compositions, for example, add a white border on all sides of an image.
• For images with page tears, for example, use an image that does not have the edge treatment.

If you are not able to create two images (due to time crunch, or if you aren’t able to make a webp image), then upload a single jpeg or png image for all platforms. Again, do not use png for anything other than a graphic or there will be problems.