---
title: "How to leverage WebP images for faster loading of a Site Studio site"
date: "2022-01-28T00:46:26+00:00"
summary:
image:
type: "article"
url: "/drupal-starter-kits/add-ons/site-studio/help/92296-how-leverage-webp-images-faster-loading-site-studio-site"
id: "3eb8a6a1-5c15-4cc4-b2e0-1a1fe16197d4"
---

A technique to add WebP images to a Site Studio site is as follows:

1\. Install [Image Optimize](https://www.drupal.org/project/imageapi_optimize) (imageapi\_optimize) and [ImageAPI Optimize WebP](https://www.drupal.org/project/imageapi_optimize_webp) (imageapi\_optimize\_webp)  
2\. Configure pipelines that use WebP and assign them to the image styles you want to use.  
3\. In the component you want to use this on output a picture element and make a duplicate image style for each image style placed before the normal one and use the token `[field.your_field].webp` as the value.