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:

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:

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.