Gatsby, e-commerce a fotky

Shopify

gatsby-image

+

gatsby-transformer-sharp

- Resize large images

- Generate multiple smaller images

- Lazy load

- Show a preview while the image loads

- Hold the image position

Cool lazy loading

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

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

export const query = graphql`
  query {
    file(relativePath: { eq: "images/myimage.jpg" }) {
      childImageSharp {
        # The default maxWidth is 800 pixels
        fluid(maxWidth: 400, maxHeight: 250) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

<picture>
  <source srcset="
      /static/fc3aef5e256dfca47e58ae41112cf4e2/4fe8c/bike.jpg  600w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/47498/bike.jpg 1200w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/50587/bike.jpg 2400w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/77d93/bike.jpg 3600w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/7dcc1/bike.jpg 4800w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/545e0/bike.jpg 7360w
    " sizes="(max-width: 2400px) 100vw, 2400px" />
  <img sizes="(max-width: 2400px) 100vw, 2400px" srcset="
      /static/fc3aef5e256dfca47e58ae41112cf4e2/4fe8c/bike.jpg  600w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/47498/bike.jpg 1200w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/50587/bike.jpg 2400w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/77d93/bike.jpg 3600w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/7dcc1/bike.jpg 4800w,
      /static/fc3aef5e256dfca47e58ae41112cf4e2/545e0/bike.jpg 7360w
    " src="/static/fc3aef5e256dfca47e58ae41112cf4e2/50587/bike.jpg"
    alt=""
    loading="lazy"
    style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;" />
</picture>

Blur up

SVG tracing

Blur up

SVG tracing

Alter-
na-
tivy

  <picture>
      <source srcset="https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&w=1600&q=80,
                      https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&w=1600&q=80&dpr=2 2x"
        media="(min-width: 2400)">

      <source srcset="https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&fit=crop&w=900&q=80,
                      https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&fit=crop&w=900&q=80&dpr=2 2x"
        media="(min-width: 1680px)">

      <source srcset="https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&fit=crop&w=600&q=80,
                      https://images.unsplash.com/
        photo-1540205453279-389ebbc43b5b?auto=format&fit=crop&w=600&q=80&dpr=2 2x"
        media="(min-width: 1024px)">

      <img class="absolute top-0 -z-10 object-cover w-full h-full" src="" />
    </picture>

imgix.com

cloudinary.com

loading="lazy" is not enough

A co ten e-commerce?

Shopify Buy Button - Checkout proces

gatsby-source-shopify - Vytáhnout data

🎉 Stripe - platby

Díky

https://twitter.com/josefrousek

Odkazy

https://image-processing.gatsbyjs.org/

https://using-gatsby-image.gatsbyjs.org/

https://github.com/stlk/stlk-store - https://urbanwilderness.shop/

https://help.shopify.com/en/manual/sell-online/buy-button

https://github.com/Shopify/buy-button-js

Understanding Landing Page Conversions

https://robhope.com/articles/wceu/

Gatsby a fotky

By stlk