storage-resize-images: Resize images by specifying only a width
See original GitHub issuestorage-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.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Resize Images | Extensions Marketplace by Firebase
Resize Images. Made by Firebase. Resizes images uploaded to Cloud Storage to a specified size, and optionally keeps or deletes the original image....
Read more >Optimize and resize images in Firebase storage using ImageKit
Here's the guide to deliver optimized images directly from your firebase storage. Create overlays, manage dpr ratio, dynamic banners & more.
Read more >Object Storage Service:Resize images - Alibaba Cloud
Resize images,Object Storage Service:Operation: resize Default value: FFFFFF (white). Resize the source image based on the longer side that ...
Read more >Dynamically resize image using firebase ... - Stack Overflow
For example, say that you specify a max width of 200px and a max height of 100px. You upload an image that is...
Read more >How to resize images in Photoshop - Adobe Support
Resize images in Photoshop · Open an image in Photoshop and choose Image > Image Size. · Modify image preview · Modify image...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
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 tofit: outside
on the sharp function. Docs found here: https://sharp.pixelplumbing.com/api-resize