Images with Sparkle: Looking at their documentation, am I confused regarding images. In the past with Freeway I tweak my photos in Photoshop and size them exactly as I want them to be and use Save for Web (Photoshop) so they don’t take long to load. Sparkle says it takes my photo jpg and resamples and exports the image to the correct size for the element. Why? If I decide what size the photo is going to be on a given page, why can’t I do the work in PS and upload it to Sparkle and have it left alone? What am I missing here?
Hi Redfeather, as Thomas mentions, Sparkle creates a picture element, or in the case of a box background, Sparkle uses media queries to load a different image at different breakpoints, or in the case in the forthcoming webp support in 2.1, different CSS rules to load different compression formats (webp saves about 25% size and is used by Chrome 25+ and the upcoming Safari 10, and more importantly, their mobile variants).
The gist of it is, like for so many other things, making the appropriate image size in Photoshop and putting it into your web page is something you need to unlearn. It was the recommended thing to do for so many years, but already in 2010 with the introduction of the retina screen on the iPhone 4 it was dubious. In 2016 the picture element and other techniques ensure that in a responsive website each device downloads the smallest image they need to show a crisp image for their pixel density. This means your images folder will contain many image files for each image in your page, and this is a good thing (if you don’t have to prepare them all yourself).
By the way the wording in the documentation may seem to suggest Sparkle resamples the image when enlarging it, this is not the case. Sparkle only creates high resolution variants of an image if the source image has enough pixels in it, otherwise it only leaves the lower resolution version. But by giving Sparkle a high resolution source image you can ensure that your site looks great on my retina macbook pro even if you’re creating it on, say, your non-retina iMac.
freewaytalk mailing list
Update your subscriptions at: