WebP und PNG/JPEG in gatsby-image

Mit dem picture Element kann man nicht nur wunderbar für unterschiedliche Auflösungen passende Bildgrößen angeben. Es ist auch möglich verschiedene Bildformate den Browser zur Verfügung zustellen. Da WebP zwar eine hervoragende Qualität, bei einer sehr geringen Dateigröße bietet aber in einigen Browser noch keine Unterstützung gefunden hat (Safari und Internet Explorer), kann so ein Fallback auf ein anderes Bildformat realisiert werden. Der Browser wählt das Bildformat, das er kennt.

Das Picture Element

Das picture Element ist ein Container, der zur Angabe von mehreren Bildquellen für ein img Element dient. So ist es möglich ohne CSS oder Javascript Bilder in responsiven Designs zu handlen. Zudem profitieren die Nutzer von einem nativ-optimierten Laden der Bildressourcen.

<picture>
  <source srcset="img/image.webp" type="image/webp">
  <source srcset="img/image.jpg" type="image/jpeg"> 
  <img src="img/image.jpg" alt="Alt Text!">
</picture>

Browser die das picture und source Element nicht unterstützen ignorieren dieses einfach und durch die Strukturierung wird nur das img Element gerendert.

GraphQL und gatsby-image

Gatsby stellt zur simplen Handhabung von Bild Resourcen eine React Komponente zur Verfügung, die dafür auf ein picture Element aufsetzt. Das Plugin gatsby-transformer-sharp bietet neben den Query Fragment GatsbyImageSharpFixed bzw. GatsbyImageSharpFluid auch die korrespondierenden Fragmente mit WebP Sources an (GatsbyImageSharpFixed_withWebp und GatsbyImageSharpFluid_withWebp). Eine vollständige Auflistung der Query Fragmente finden Sie in der Gatsby Dokumentation

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
	# "GatsbyImageSharpFixed" einfach mit 
	# "GatsbyImageSharpFixed_withWebp" tauschen
        fixed(width: 125, height: 125) {		  
          ...GatsbyImageSharpFixed_withWebp
        }
      }
    }
  }
`