Coming from ‘Foundation’ I stumbled over the fact that the images stack in ‘Source’ does not allow upscaling of an image to e.g. it’s parent width. Checking with other ‘image’ stacks, I had to realize that this is the norm - likely because upscaling comes at the cost of image quality.
Is the logic that one should provide sufficiently large images, such that only downscaling is required for e.g the dynamic layout of a grid. I understand that the image stack in ‘Source’ allows to provide multiple image resolutions for different screen resolution - so it all makes sense.
Just looking for a confirmation, since only the ‘Foundation’ Image Stack seems to offer an upscaling functionality.
Yes - Source uses a max-width value for the images. This means the image will never appear bigger than whatever that is set at and also no bigger than it actually is.
I could perhaps add a ‘full width’ setting in the image stack but the recommended approach would always be to use sufficiently sized images.
thanks for the confirmation … yes, I cheekily tried 200% as max width ;)
I guess one possible argument for such a ‘full width’ setting would be the convenience of not having to do a precise analysis of the required dimensions in a dynamic grid layout w/o running into unexpected margins, if one makes a mistake. But I agree, once aware of this constraint, it is not difficult to provide a minimal image size that will always work.
Thanks again, love ‘Source’ … and it keeps teaching me …
It is best practice to be aware of the sizes of your images and make then no wider than they need to be. The images will always scale down in size as the page width or the container or grid become less wide. So you don’t have to do a “precise analysis” and only some quick mental arithmetic is required, such as if 1000px is the max width, and you have 4 grid columns, then make the image widths 1000 divided by 4 = 250px. For image dimensions this is good enough and you don’t realistically need to consider margins, gaps, etc as a 250px wide image is not much bigger in Kb than a 236px image.
jpegMini is superb for resizing images and then optimising them, and you can drop a load of images into the app for a quick resizing+ optimisation.