storage-resize-images: Resize images by specifying only a width

[blueyetisoftware-jason]

storage-resize-images

This feature request is for extension: \storage-resize-images

What feature would you like to see?

Indicate only a width for the image rather than also specifying the height. This is helpful for mobile and other scrollable formats.

How would you use it?

I would indicate breakpoints for the images based on width and generate a series of images that would be appropriate for different families of mobile devices. For example, Bootstrap uses these media queries

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

I would then create images with each of these widths and utilize them with media queries to grab an image that is big enough for my device and avoid downloading high res images.

[russellwheatley]

Hey @phinatic, if you want your images to be a certain width, you can already do that. The following rules need to be kept in mind (as the extension is currently implemented):

• The resize is optimised to ensure that neither dimension is ever increased.
• The aspect ratio is always preserved.

To ensure your image is resized to the width you desire, it is important that the image already exceeds the width input.

The next step is to ensure that the width input has a lower value than the height input. The dimension with the lowest input value is selected for scaling down to, the other dimension is scaled down to preserve the aspect ratio.

Using the width values you desire, the resize image parameters could look like this: 576x2000,768x2000,992x2000,1200x2000. Like I said, the width input values need to be lower than the width of the image being resized. Otherwise, it will not work.

Let me know if this works for you. Hope this helps!

[blueyetisoftware-jason]

Yep. That is what I did on my end, configuring it with these sizes:

128x4096,256x4096,576x4096,768x4096,992x4096,1200x4096,2048x4096,4096x4096

It works as I intended other than require the additional 4096 in the filenames. Just thought it may clean up the extension to allow this instead. Something similar could be supported for h.

128w,256w,576w,768w,992w,1200w,2048w,4096w

This is being used for responsive images using img srcsets in html

[russellwheatley]

Ok, thanks for the feedback. I'm sure the FE team will consider your feature request 😄 . It is possible to pass in just one dimension to sharp: https://sharp.pixelplumbing.com/api-resize#parameters

[chrisjacobs91]

+1 for this feature

[chrisjacobs91]

I'm trying to resize an image of any aspect ratio to use in a square (300x300). I have setup my resize function to 300x300, however that (as expected I guess) makes sure no dimension is bigger than 300, whilst preserving the aspect ratio. So I end up with an image that's either 300x200 or 200x300 for example.

Is it possible to specify that no dimension should be smaller than 300px, whilst maintaining aspect ratio?

Sort of the inverse of this scenario :)

Update This can be achieved by changing the fit: inside parameter to fit: outside on the sharp function. Docs found here: https://sharp.pixelplumbing.com/api-resize

[dosstx]

If you just pass the original dimensions of the file to an image CDN such as Cloudinary, it will automatically resize the image for you to your user's device 👍 . So , no worries about having to create all different kinds of sizes. Just store the original uploaded image on firebase storage and then let Cloudinary handle the dynamic resizing:

https://cloudinary.com/documentation/fetch_remote_images

[pr-Mais]

@chrisjacobs91 I believe this might be achieved with the new Sharp constructor options for resizing images parameter where you can specify the type of fit you would like e.g. {"fit": "outside"}