Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fluid images with srcSetBreakpoints: unnecessary images generated

See original GitHub issue

Summary

We are creating fluid images with gatsby-image/sharp with original images of dimension 1440x700. We configured maxWidth: 800 and maxHeight: 640, and a single srcSetBreakpoint: [800].

When gatsby runs, it creates an 800x640 image as requested, but also a 1440x1152 image. This does not make sense to me as it’s larger than the requested maxWidth.

The comment in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/index.js#L387 says that it’s there to “to ensure the largest image possible is available for small images”. I don’t understand - if I specifically set maxWidth, why does gatsby create a larger one?

Thanks!

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:10 (2 by maintainers)

Top GitHub Comments

3reactions

ascorbiccommented, Feb 10, 2020

I’d be happy to look at a PR that changes this

2reactions

decimoseptimocommented, Feb 8, 2020

Also lighthouse may throw Properly size images warnings. When the srcset includes an aditional breakpoint (with the original image, at a larger size), that you’re not inteded to publish.

This has been asked before.

Top Results From Across the Web

Gatsby Image API

Gatsby image objects are created through GraphQL methods. There are two types of image optimizations available, fixed and fluid, which create multiple image...

Understanding gatsby-image (Part 3): Controlling sizes ...

If you want more control over which image sizes are generated by gatsby-plugin-sharp you can use the srcSetBreakpoints parameter in your fluid query....

Gatsby-image: provide the right image size to different resolution

Fluid images in Gatsby stretches across the container (e.g: for a ... which sizes are output you can use the srcSetBreakpoints parameter.

CSS Fluid Image Techniques for Responsive Site Design

I've covered the basics of media queries in past articles; now it's time to look at fluid images, a technique first suggested by...

How can you accurately set a fluid max-width for gatsby ...

I have a graphql query that get's gatsby image props. ... fluid(maxWidth: 1600, srcSetBreakpoints: [767, 1028]) { .