Retina support for Gridsome Image about gridsome HOT 7 OPEN

For anyone else interested in this issue, or who wants to know part of how g-image works, here's some of what I've found out so far:

• When you pass a string into the src attribute on the g-image component, that src string gets processed and turned into an object containing a bunch of info about the image, including a small version of the image as a data URI.

How the image processing works:

• When you pass a string into the g-image component, a custom Webpack loader (assets-loader) is called, which adds the image to a queue for processing.
• The processing of the image is done by the preProcess method in the ImageProcessQueue (found in lib/app/queue/ImageProcessQueue.js)

I'll hopefully be digging into this more to figure out how I can get the Webpack loader to recognize the responsive attribute, and pass it along to the preProcess method to let it know to process the image at 2x.

from gridsome.

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

from gridsome.

Concerning the retina support, the solution proposed in this issue #288 should do the trick.

from gridsome.

I'm trying to improve by tweaking ImageProcessQueue.js but I spent too much time understanding all the code.

I can't find where I could remove the upper limit for generated sizes without removing it for the intrinsic size too.

@tomtev, could you help me with that ?

I have already modified:

options.sizes || [480, 640, 768, 1024, 1366, 1600, 1920, 2560] (but 2560 is never generated even if the width parameter is >= 2560

options.sizes || (max-width: ${imageWidth}px) 100vw, 50vw; (because 50vw seems better than fixed width for larger viewports)

from gridsome.

@tomtev @hjvedvik, see above comment ☝️

from gridsome.

for now falling back to native:
<img src='@/assets/images/img-01.png', srcset='@/assets/images/[email protected] 2x' />

Note: While using <img /> tag, use @ don't use ~ else you will get error.

from gridsome.

Hello in 2021 all sites need retina.
Can you add this request in Gridsome roadmap?

from gridsome.