Description

Due to floating point precision error, or in some cases carried floating point precision errors, the paddingBottom "don't re-layout" trick sometimes results in an image that's a pixel off in height.

When displaying photos this isn't much of a problem, people won't notice, but displaying things like screenshots or graphics, that pixel difference can blur images noticeably.

Here's a difference map, it's just a 1px stretching, nothing amazing:

Instead of using:

const ratio = `${(1 / fluidResult.aspectRatio) * 100}%`

We should probably use this?

const ratio = `${fluidResult.presentationHeight / fluidResult.presentationWidth * 100}%`

In order to maintain precision?

However in my reproduction I just happened to use an image where both versions produce incorrect final image heights, off by a pixel.

It would probably be a breaking change to pass height and width to all the places where this trick is done, regardless?

Gatsby-image itself does this:

object-fit:cover;
object-position:center

Object fit cover

The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

This solves the visual blurriness problem, but the image is still off by a pixel in height, cut off.

I think object-fit:cover; should be added to gatsby-remark-image at a minimum, and hopefully some discussion can happen regarding the pixel-off problem.

At the end of the day, these images are supposed to be responsive, if pixel perfect matching is required, the fixed query should be used not fluid. That's fair enough.

I can do PRs for whatever we decide to do.

Steps to reproduce

https://gatsby-blurry-image-repro.netlify.app/markdown

You can swap between the markdown and the regular page with the same screenshot.

https://github.com/Mike-Dax/gatsby-blurry-image-repro

Code available here.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.3 - /private/var/folders/dm/pj8g0t455gg16xy2614p_2q40000gn/T/xfs-6128b444/node
    Yarn: 2.0.0-rc.33 - /private/var/folders/dm/pj8g0t455gg16xy2614p_2q40000gn/T/xfs-6128b444/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 76.0.1
    Safari: 13.1