Scrutinizing SPARKLE (Freeway alternative)

Freeway
94

All was well until changes were made a few months ago to webkit browsers and suddenly everything was mushy on Safari or Chrome. The CSS script I applied just about fixes it. I’ve not used Sparkle but this problem is browser based, therefore it’s the same for everybody.

In Rapidweaver there are various stacks and scripts that will load a non-retina image initially then serve up a retina version if they detect a retina resolution image. I tried a couple options but was never entirely satisfied.

Sparkle does indeed use state of the art techniques to load the appropriate image, based on the browser used. This is more or less what it boils down to, the mix of HTML, CSS, Javascript and experimentation to nail this is quite a bit of work:

  • on Chrome 25+, Safari 10+ webp images are served directly, these are about 25% smaller than corresponding JPGs or PNGs (this is via picture element with mime type qualifier)
  • on Safari 9+ and Firefox 38+ the exact image, both in resolution and density, is served to the browser, and no other unneeded asset is downloaded (this is via the picture element)
  • on earlier browsers the smallest image of any device is specified in the HTML, and as soon as Javascript kicks in the correct size/resolution image is loaded (this is equivalent to using picturefill but a lot more lightweight)

If you’re doing this manually you’ll be tempted to brush it off and say “meh that’s good enough”. In that case… more power to you?

There are lots of additional factors to consider if performance is an issue, such as the way files are delivered via http or http2 and CloudFlare Pro offers a brilliant algorithm for compressing images without loss of quality, but that is a whole different topic.

http2 actually only interleaves requests potentially reducing latency (but since servers aren’t optimized for short jobs it actually ends up increasing latency of smaller resources on average), CloudFlare’s Polish does compress images but most likely nothing you couldn’t do yourself.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

95

My reference to performance and servers was more about the way items can be downloaded concurrently, so a web page that weighs 1mb may not necessarily load any slower than one of 500kb or at least to within a few milliseconds. I also gather some of the traditional best practices for page speed performance are potentially counterproductive for http2.

CloudFlare’s Polish + Jpeg is helpful for those who would struggle to all of this on their own. Many people just save a Jpeg without too much thought and upload it to the server, so Polish might save well over 50% on the image size with the added bonus that images are cached near the user via the CDN. Mirage is another trick they offer for mobile.

I’m quite impressed Sparkle is taking those steps in the background for image handling, assuming the final results are quite good. It’s certainly an advanced approach for built in functionality.

Ashley

freewaytalk mailing list
email@hidden
Update your subscriptions at:

96

@James

Freeway’s “Retina” checkbox was never intended to “create” retina images, it’s more likely there to indicate Freeway to use an image twice the pixel-width (dimension) within your artwork.

####Lingo

The standard screen definition for images in web is 72 dots per inch.

####Retina

It is still 72 dots per inch, but twice the dimension of your image.

####In Freeway

Assumed your dog.jpg shall be the hero-image of your page. It’s 960px wide and has 72dpi. Your page-width in Freeway is as well max-width: 960px.

As standard you’d place it and good.

For retina, you’d now have to double its dimensions, using whatever application.
You end up in a (pretty blurry) 1920px wide - but still 72dpi - image. Save it as dog-large.jpg.

Now draw your HTML item and pass-through your dog-large.jpg. Initially, the html-frame will explode the dimensions of your page-width, right? Now check the retina check-thing and it will shrink down to the expected 960px.

Set the width to 100% (height auto) and you’re even responsive.

####Conclusion

Preferably leave everything on 72dpi. Figure out the pixel-width and argue:

Twice (1.5, 3x whatever) of the given pixels!

####If your reaction is now:

“These look great. I’d wish it would be a bit more complicated”, you’re in luck.

Because the challenge for now is to ask yourself: Wouldn’t it be better to serve different varieties of this image and let the browser decide which one to take? And that’s what Duncan is referring to and Sparkle manages for you - and Freeway never did. We had more the “either … or” approach.

To me it’s an authors responsibility - and not a machine’s. But that’s another chapter of the book. And yes - with Sparkle you’d be in a safer space.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

97

All true, except two things – it’s pixels per inch (dots are for ink), and the browser really does not care about the ppi metadata. It shows pixels. Save the same file at 72ppi or 144ppi or 288 ppi – put them side-by-side as pass-through (or just hand-code it) and you will see two or three identical images. The CSS (what you get when you click the High-resolution check-box) defines what size an image should display at, and the rendering engine in the browser resizes the image on the fly to fit.

Here’s an example to prove the point. View source – and download the images and open them in Photoshop to see what I am talking about here.

http://scripty.walterdavisstudio.com/annie

Walter

On Aug 29, 2016, at 8:30 AM, Thomas Kimmich email@hidden wrote:

It is still 72 dots per inch, but twice the dimension of your image.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

98

I am following this discussion with much interest and trying to “get it”.
Very confusing for a print-oriented girl. Was easy to understand web images before Responsive came along. The lingo was familiar to me, as others have said.

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Thanks to everyone who is contributing to this thread. It’s helpful and very interesting!

joette/redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:

99

Again, the PPI is not relevant at all. When you save a PNG or JPEG or GIF from Photoshop, using the Save for Web and Devices exporter, the PPI header is stripped out (along with a lot of other metadata) because it is just going to be ignored by the browsers. When you open a file that has come out of SFW in Photoshop, it will appear to have 72ppi, but that’s just because that’s what Photoshop’s default is for images that don’t have a specified PPI.

So the only relevant and important measure is pixel dimensions (width and height), not PPI. If you want your image to take up half the width of your page, and you’ve set your page to 960px wide, then you will need an image to display at 480px wide (at 72ppi), so you need to make the actual image file 960px wide to get @2x size, or 1440px wide to get @3x (for the iPhone 6 Plus). Anything larger is a waste, although it sounds like Sparkle does a nice job of down-sizing images to the target dimensions.

Walter

On Aug 29, 2016, at 1:16 PM, redfeather email@hidden wrote:

I am following this discussion with much interest and trying to “get it”.
Very confusing for a print-oriented girl. Was easy to understand web images before Responsive came along. The lingo was familiar to me, as others have said.

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Thanks to everyone who is contributing to this thread. It’s helpful and very interesting!

joette/redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:

100

@Walter: So, if the image were to fill the entire page for example, and if using the one image for everything approach Sparkle seems to have:

If the page size was 960px wide, the image would need to be 1920px wide for 2x?

For image galleries, I would start with the largest size a particular image would be, not the thumbnail in the gallery and do the math to figure out how much of the page it would take up and make it twice that size? The thumbnails would be figured out the same way – the amount of page they take up x 2. Yes?

Thanks!
joette/redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:

101

@Duncan: Using Sparkle, if I save my images as 288 ppi will that be a safe bet or ? The images need to look good.

Well I guess yes. Ultimately an image that as a pixel measurement is twice as wide or tall as the space it need to fit will be ok. 288 dpi, assuming your convention of 72 dpi, would be 4x, so more than enough. Anyway as mentioned Sparkle has a resolution indicator that helps understand this.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

102

If the page size was 960px wide, the image would need to be 1920px wide for 2x?

That’s correct.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

103

On 29 Aug 2016, 2:00 pm, waltd wrote:

All true, except two things – it’s pixels per inch (dots are for ink), and the browser really does not care about the ppi metadata.

What’s amazing here, is that only you and I who seem to understand this Walter! Even Thomas doesn’t. :slight_smile: :slight_smile:

From my point of view, I’m always amazed that seasoned photographers (chums) who have been doing their own websites for years, don’t understand and not only that, like James they keep insisting that the way they work it, is correct. (Of course, it doesn’t really matter most of the time if you don’t understand, if your ‘way of understanding’ produces the same result).

Anyway … just to reiterate (because repetition works :slight_smile: ) computer monitors and operating systems don’t care about ppi or dpi. All they care about is pixels.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

104

@grantsymon It’s pretty clear to me and not complicated to grasp, but sometimes you have to explain things in terms that people can understand when they have been given inaccurate or conflicting information for 20 years. Most people never had to think about this before retina came along.

Ashley

PS Your website seems to be down and gives a 503 error.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

105

On 29 Aug 2016, 7:12 pm, Ashley wrote:

@grantsymon It’s pretty clear to me and not complicated to grasp, but sometimes you have to explain things in terms that people can understand when they have been given inaccurate or conflicting information for 20 years.

That’s very true Ashley

Most people never had to think about this before retina came along.

Well they should have, but didn’t notice the confusion so much, because the ppi/dpi thing was the same pre-retina.

PS Your website seems to be down and gives a 503 error.

Thanks for the heads-up. It’s working for me, but it did load slowly. I guess the host may be doing maintenance.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

106

It’s working for me, but it did load slowly.

Loaded fine for me but I wish I hadn’t visited!

Being on a diet and looking at great pictures of great food don’t mix.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

107

It’s working fine for me now. Must have just been a temporary glitch with the server.

Ashley

freewaytalk mailing list
email@hidden
Update your subscriptions at:

108

On 29 Aug 2016, 7:28 pm, DeltaDave wrote:

Loaded fine for me but I wish I hadn’t visited!

Being on a diet and looking at great pictures of great food don’t mix.

Well, you’ve only got yourself to blame Dave, cause if you hadn’t given me all that help, the damned site wouldn’t have been working at all!! :slight_smile: :slight_smile: :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:

109

Well… Quite a lot of replies since yesterday. After reading them all, I remain satisfied with my own personal “frame of reference” as I describe in my screencast:

Thank you, Duncan, for point out the details on what Sparkle can do with regard to handling hi-rez graphics for us.

Walter, I viewed your little girl photos, but unfortunately, the lens did not focus sharply on her, so all of the graphics look blurred. If you start off with a razor sharp image to begin with, then retina depth will be more readily perceptible.

Thanks to all participants for this excellent discussion on graphic resolution!

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

110

This example had nothing to do with retina, but rather the fact that no matter what “resolution” you set in Photoshop, 1,000 pixels is 1,000 pixels is 1,000 pixels. If the browser cared about PPI, then you would have seen the top image look large and blurry, the second one look half its size and sharp, and the third one look a quarter the size and really freakishly sharp. But despite the fact that the three images were set to different PPI, they were all the same size in a browser.

That’s all I was trying to explain.

Walter

On Aug 29, 2016, at 8:12 PM, JDW email@hidden wrote:

Walter, I viewed your little girl photos, but unfortunately, the lens did not focus sharply on her, so all of the graphics look blurred. If you start off with a razor sharp image to begin with, then retina depth will be more readily perceptible.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

111

@ Duncan, sorry I’m a bit late to the table. I’m not a web designer as such have created websites for teaching and motivation purposes in my business.
I’ve been using FW since 3Express, used FW5.5Pro quite a lot and bought many actions from many of you wonderful folk on this forum. I did buy FW 7 but have never got around to using it. Looking for a tutorial on FW7 I discovered yesterday the sad demise.

Having gone through this thread (and many others) it looks like I’m going to have to jump in with either Sparkle or Blocs or both.

My challenge is this: I used and still do use Max’s WebYep for CMS which is perfect for me as my programming ‘skills’ are limited to copy and paste. I don’t have the time to learn the language.
The CMS’s that appear in Blocs appear to be very pricey and over complicated to me.

Is there any way I can incorporate WebYeb into Sparkle (or does anyone know how?).

Many thanks in anticipation

Mark

freewaytalk mailing list
email@hidden
Update your subscriptions at:

112

Mark, Sparkle is currently focusing on high performance static sites, a very steep road we’re still climbing. CMSs introduce too many compromises, such as replacing responsive images with plain non-optimized jpegs, lacking layout awareness and generally undoing the kind of optimization Sparkle is doing.

Our goal is fully visual page editing within Sparkle. The sort of integration CMSs require, and the complexities and abstraction that come with it, don’t quite work in that context. Not to mention the abysmal editing UI on the server side that most of these CMSs sport.

Duncan
http://sparkle.cx http://sparkle.cx/

freewaytalk mailing list
email@hidden
Update your subscriptions at:

113

Greetings all,

I am finally getting around to try Sparkle on a new site I need to create. I’ve looked through the documentation and I’ve skimmed through this thread, so forgive me if it’s blatantly there and I am blind:
Does anyone know how you specify the page size? In FW we could specify the page size (width/height).

Many thanks and happy Thursday eve,
joette

freewaytalk mailing list
email@hidden
Update your subscriptions at: