Dimensions | Pixels | File size |
---|---|---|
100 x 100 | 10.000 | 39 KB |
200 x 200 | 40.000 | 156 KB |
300 x 300 | 90.000 | 351 KB |
500 x 500 | 250.000 | 977 KB |
800 x 800 | 640.000 | 2500 KB |
Format | Transparency | Animation | Browser |
---|---|---|---|
GIF | Yes | Yes | All |
PNG | Yes | No | All |
JPEG | No | No | All |
JPEG XR | Yes | Yes | IE |
WEBP | Yes | Yes | Chrome, Opera, Android |
pngquant.org
optipng.sourceforge.net
jpegclub.org/jpegtran
const path = require(`path`)
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: path.join(__dirname, `src`, `images`),
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import * as S from "../components/styled"
import Img from "gatsby-image"
const Image = () => {
const data = useStaticQuery(graphql`
query {
hera_traced_webp: file(relativePath: { eq: "hera.jpg" }) {
childImageSharp {
fluid(
maxWidth: 1200
duotone: { highlight: "#f00e2e", shadow: "#192555" }
) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
`)
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import * as S from "../components/styled"
import Img from "gatsby-image"
const Image = () => {
const data = useStaticQuery(graphql`
query {
hera_traced_webp: file(relativePath: { eq: "hera.jpg" }) {
childImageSharp {
fluid(
maxWidth: 1200
duotone: { highlight: "#f00e2e", shadow: "#192555" }
) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
`)
https://github.com/lovell/sharp
Prefer vector formats
github.com/raufsamestone/jamstack-image
jamstack-image.netlify.com
@raufsamestone