In functions.xsl we have the following template for showing thumbnails

          
```
<xsl:apply-templates select="." mode="displayThumbnail">
      <xsl:with-param name="crop" select="true()"/>
</xsl:apply-templates>
```
depending upon the content type the following templates set the various sizes of the thumbnails

The following when specified in the Protean.web.config enables webp functionality
	
```
        <add key="EnableWebP" value="on" />
	<add key="EnableRetina" value="off" />
```

This is an example of a site that has responsive / webp images enabled.
This is in the bespoke products.xsl which sets bespoke image sizes required for the various screen breakpoints.
  
```
<xsl:template match="Content[@type='Product']" mode="getThWidth">100</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight">100</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-xxs">325</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-xxs">325</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-xs">325</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-xs">325</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-sm">315</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-sm">315</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-md">293</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-md">293</xsl:template>

<xsl:template match="Content[@type='Product']" mode="getThWidth-lg">260</xsl:template>
<xsl:template match="Content[@type='Product']" mode="getThHeight-lg">260</xsl:template>
```

---

- [Back to Functions.xsl](/Front-End-Developer-Guide/v5/XSLT-Guide/Functions.xsl)

---