Scrutinizing SPARKLE (Freeway alternative)

Freeway
69

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.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

70

On 26 Aug 2016, 7:27 am, Duncan Wilcox wrote:

Hi Anthony,

Sparkle doesn’t currently support horizontal submenus.

Duncan

Thanks for the clarification Duncan.
Could a horizontal submenu be achieved by using an externally created script added in to a sparkle page?

Just keen to know more about such possibilities.

Anthony

freewaytalk mailing list
email@hidden
Update your subscriptions at:

71

Thanks for the clarification Duncan.
Could a horizontal submenu be achieved by using an externally created script added in to a sparkle page?

Presumably yes, we have users integrating animations built with Hype, so why not. However it requires some development skills which you’d need to have.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

72

Thank you, Duncan & Thomas!

So Duncan, when you say “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.” What is high-res to Sparkle?

And how do I know what dimension to make the photo? Is it the largest size I determine I want for my layout?

Thanks much,
joette / redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:

73

So Duncan, when you say “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.” What is high-res to Sparkle?

Well the question is really what is high-res to your layout. In the image inspector there is a resolution meter that shows how your image resolution fits with the current on page dimensions, for example: http://sparkle.cx/docs/images/pasted-image-280.jpg

In general I’d say 3x pixel density is overkill but 2x is very common, so the image could be twice the width and height of the image’s largest size, and all other images will be downscaled from that.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

74

Well, I’m a print designer and tend to think in terms of dpi. I don’t know what dpi “3x pixel density” would be. Help.

Is this new way (to me) of handling images due to responsive layouts be one reason so many sites load so slowly these days? Are the majority of people using photos that are overly hi-res?

thx!

joette/redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:

75

Well, I’m a print designer and tend to think in terms of dpi. I don’t know what dpi “3x pixel density” would be. Help.

Since the size of pixels on screen is dependent on the screen resolution and size, there’s no way to consistently translate from pixels to inches, and by extent to dpi.

If you want to think in dpi terms for simplicity for a minute, you can pick a specific screen size and think it through with that. The dpi values would still be irrelevant in print context because it makes sense to pack pixels denser based on how far the screen typically is from your eyes. So for example the original iPhone’s screen was 163 dpi, more than a computer screen’s 72 to 96 dpi (or whatever) but very discernible pixels.

The 3.5” and 4” screens starting with the iPhone 4 doubled the horizontal and vertical pixel density, hence 2x, to 326 dpi. The reason it is referred to as 2x is the HTML coordinates and typesetting references are the same as those of the original 163dpi phone, but each point is a 4x4 pixel grid. Web content still addresses 320x480 points (or 320x568 for the 4” screen), and the pixels are on half-point coordinates. Or in the case of images, they’re shrunk to half size so each of the image pixels lands on a physical screen pixel.

The iPhone 6/6s 4.7” screen have a natural point size of 375x667, but the screen has double density so 750x1334 pixels (326 dpi like the original iPhone). The 6+/6s+ on the other hand have a 5.5” screen and 414x736 points, but Apple opted to use a grid of 3x3 pixels for each screen point so 1242x2208 pixels, so 3x retina, except they then downsample that to the actual screen resolution which is 1080x1920 pixels, so ultimately 401 dpi which isn’t quite 163x3. And interestingly there’s no way you’re going to get a perfectly sharp image (but your eyes won’t be able to see it).

This is an interesting guide to points, pixels and screen sizes in iPhones. There’s more with iPads and of course a hugely more varied scenario on Android.

On laptops and desktops 2x is generally in the 220 dpi range, which is considered retina (indistinguishable pixels) because they stand further away from your eyes than a phone or tablet.

The gist of all this is, it’s only practical to think of what the devices are capable of, and what a browser running on one of them will request, rather than thinking in terms of inches.

Is this new way (to me) of handling images due to responsive layouts be one reason so many sites load so slowly these days? Are the majority of people using photos that are overly hi-res?

“Slow” can mean a lot of things, often:

  • the page references an asset on a slow server (or is itself on a slow server), often a render-blocking asset like a stylesheet or a webfont, so your perception is its slower than it actually is (but it makes no difference actually)
  • the page is fed by a database of sorts, often a puny mysql which is overloaded (classic for non professionally run wordpress/joomla/drupal sites)
  • the page is actually downloading a shitload of stuff, which can either be lazy/dump optimization or huge ad/tracking packages (typical for sketchy news sites)

If properly built, the responsive image setup is actually no different for a desktop device and a lot faster for mobile devices. Amateurishly coded websites/webapps sometimes do have oversized images, though frankly it is one of the easiest problems to fix, it’s more about carelessness.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

76

I found the answer on Google. I haven’t had to update any of my personnel sites in a while! Good to know. If any other print people come across this 1x, 2x, 3x issue, here’s a good link to see what’s what:

Thx all!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

77

And… I just realized Duncan had the same link in his very detailed post to me. I didn’t see it because we apparently posted at the same time!!

Thanks Duncan, I very much appreciate your explanations and it has helped very much. I’m getting it!

Downloaded Sparkle and will take it for a spin.

joette/redfeather

freewaytalk mailing list
email@hidden
Update your subscriptions at:

78

Duncan is right to recommend “2x” (144ppi) at the largest pic size you will display. Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and filesize.

I usually can compress 144ppi JPGs to 44% in Photoshop without really seeing compression artifacts when displayed on a retina screen. But if there is a lot of tiny red text, I may need to take it up to a 50% compression to make it look nice. And when I need transparency, I tend to use PNG more than GIF because the filesize is smaller, and I use TinyPNG to compress my 24-bit PNGs into 8-bit files without noticeable loss in visual information.

So it seems that Sparkle will use your original pic as is, like a Freeway pass-thru image, when Sparkle displays that image at it’s actual 144ppi size, but Sparkle (or rather, the browser) will shrink the image when that same pic scales down on a responsive page, and Sparkle will present a lower rez 72ppi version of the pic when Sparkle wants to display it on non-retina machines. But how fuzzy or sharp that 72ppi image will be is not something I’ve tested in Sparkle, nor do I know if 8-bit PNGs will remain 8-bit PNGs (and so on) when Sparkle does it’s image manipulations. What I find in Photoshop is that if I make a 144ppi image to be 72ppi, it needs a little sharpening to look its best, unless I use the “sharper” resize antialias setting in Photoshop. So an extensive test in Sparkle would be necessary for one to know exactly graphics are output to both 72ppi and retina devices.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

79

Duncan is right to recommend “2x” (144ppi) at the largest pic size you will display. Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and file size.

As mentioned “dpi” is an incorrect term. You might want to use it as a label but it’s rather abstract, 1x/2x/3x seem easier to remember. 3x would be 216dpi by that metric.

I usually can compress 144ppi JPGs to 44% in Photoshop without really seeing compression artifacts when displayed on a retina screen. But if there is a lot of tiny red text, I may need to take it up to a 50% compression to make it look nice.

The optimal JPG compression really depends a lot on the content, absolute figures like that aren’t a good rule of thumb. Optimal compression is still a bit of a research topic, Google built this tool which is a “psychovisual estimator" somewhat like mp3 uses psychoacoustics to compress best for music:

GitHub - google/butteraugli: butteraugli estimates the psychovisual difference between two images https://github.com/google/butteraugli

That said the smaller the pixel size the smaller and less noticeable compression artifacts are, the more you can compress the same image, so if you’re compressing the non-retina 1x jpg at 60% you might compress the 2x at 50% and the 3x at 40%. For example http://silev.org/test/Retina-resize.html http://silev.org/test/Retina-resize.html shows this.

And when I need transparency, I tend to use PNG more than GIF because the filesize is smaller, and I use TinyPNG to compress my 24-bit PNGs into 8-bit files without noticeable loss in visual information.

GIF is definitely a file format that should not be used anymore, for any reason including animation. 8-bit PNG only has 1 bit for alpha which most of the time really looks ugly.

So it seems that Sparkle will use your original pic as is, like a Freeway pass-thru image, when Sparkle displays that image at it’s actual 144ppi size, but Sparkle (or rather, the browser) will shrink the image when that same pic scales down on a responsive page, and Sparkle will present a lower rez 72ppi version of the pic when Sparkle wants to display it on non-retina machines. But how fuzzy or sharp that 72ppi image will be is not something I’ve tested in Sparkle, nor do I know if 8-bit PNGs will remain 8-bit PNGs (and so on) when Sparkle does it’s image manipulations. What I find in Photoshop is that if I make a 144ppi image to be 72ppi, it needs a little sharpening to look its best, unless I use the “sharper” resize antialias setting in Photoshop. So an extensive test in Sparkle would be necessary for one to know exactly graphics are output to both 72ppi and retina devices.

Yes Sparkle is applying light sharpening when resizing images.

Ultimately I have to wonder if all the hard earned knowledge is something that is worth clinging on to. I just came across this yesterday:

http://monkeyphil.co/blog/i-used-to-build-websites http://monkeyphil.co/blog/i-used-to-build-websites

So essentially the £5k and up website market is gone. And that figure is falling, fast.

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

80

On 27 Aug 2016, 1:57 am, JDW wrote:

Three years ago I tested retina graphics extensively and found that 72ppi images look blurry and awful on retina iOS devices and Macs, but 144ppi looks very good, and 288ppi is great but almost too sharp. So 144ppi is the ideal in terms of look and file size.

Computer displays/monitors aren’t interested in ppi or dpi. You need to forget this idea.

Computers are only interested in pixels. So if an image is 1000x1000 pixels, then it will display as such on any monitor. That’s it. Setting it as being 72, or 100, 1000 pixels per inch will change nothing. IOW, a 1000ppi - 1000x1000 pixel image, will not appear as a 1 inch square image on your monitor.

So just choose the pixel dimensions you want. That’s it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

81

I disagree insofar as my eyes don’t lie, and I know how to save graphics in Photoshop and use them as pass through graphics in Freeway.

In Freeway, if I import a graphic into an HTML box (which makes it a “pass through” graphic) and I then checkmark the “high resolution” setting in the Inspector, that graphic will display at 50% size (50% of the pixel dimensions I set for that box in Freeway) but the graphics content be twice the resolution (i.e., 144ppi vs. 72ppi). And when I create my graphics in Photoshop, I set the dimensions (matched to the pixel dimensions of the HTML container box in Freeway) and choose 144ppi.

In that knowledge I had created a comparison in the past showing a 72ppi passthrough side-by-side with a 144ppi pass-through and a 288ppi pass-through. And the 144ppi looked best to my eyes and was a reasonable filesize too.

If I turn a blind eye to ppi, I will no longer what what I will get in the browser, at least not when I design in Freeway, using an HTML container box of known, fixed dimensions.

I fully understand that RESPONSIVE sites that scale graphics throw a monkey wrentch into this, but I have never created a responsive size that scales the graphics, so I am only thinking about a static “retina” graphic here that is viewed at 100% of its designed size in the browser.

Now with scalable graphics, it’s different insofar as you won’t know all the ways it will be scaled necessarily, but you still need a starting point. And I would assume my personal rule still applies with regard to the largest physical dimensions the graphic in question would be displayed. So for example, if the largest (default) size of the graphic is to be 1000x1000 pixels, then obviously that would be put into a box in the web design app that is half those dimensions in order to yield a 144ppi “retina” output (if the target output is intended for retina display devices). But if the web design app also saves a normal resolution 72ppi graphic for display on non-retina devices, then it would still display within the same physical dimensions but its resolution be would half the retina version. That would be the default, starting point size which would scale in the browser according to whatever algorithm the browser uses to scale graphics.

This is how I’ve always thought about graphics I design, and I see what I expect when I view my Freeway output in various browser on the Mac, Windows, and iOS devices, some with normal resolution and some with high-dpi screens.

So while some may dislike terminology, my eyes don’t lie. I know what I am seeing. I design for it with pixel perfect precision, and it looks good, and that satisfies me.

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:

82

DPI and PPI are printing terms. A monitor is not a print. Every image that doesn’t fit your monitor space precisely at 100%, is re-sized (interpolated) either up or down - ‘on the fly’. There’s nothing else to know. DPI and PPI on a monitor are meaningless.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

83

Terms have meaning as long as one gives them meaning. You are preaching semantics without speaking specifically of what I wrote in my previous post. As such, I stand firmly behind everything written in my previous post and would like to direct everyone’s attention to it.

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:

84

Terms have specific meaning, and it doesn’t matter if you want to assign a different meaning to them, that’s still not going to change their actual meaning.

If you remember printing ink on paper, there you need to know DPI, and it refers to the halftone dot pitch – the distance between the centers of the dots of ink that fool your eye into seeing a continuous tone image.

Digital photos have a pixel dimension in the X and Y coordinates. They also have a header (metadata) that nominally sets the PPI (pixels per inch) of the file, but that’s just the divisor. If you have a 1000 pixel wide image, and it’s set to 200 PPI, that doesn’t make it higher or lower resolution, that just means that an application that cares about PPI will interpret it as being 5 “inches” wide, but since displays haven’t been 72PPI since they came with beige cases, that doesn’t mean 5 actual inches, either.

Web browsers do not care about inches. They only care about pixels. And even if you have a Retina screen, the browser still thinks it is painting a normal resolution screen. It just gets to use 4 (or more, if it’s an iPhone 6s Plus) actual pixels for each “pixel”, and the operating system deals with those details.

When you check that box in the inspector that marks an image as high resolution, all you are doing is telling Freeway to make the image twice as large (in pixels) when it resamples the original. The CSS tells the browser to make the image 50% of its actual pixel dimensions, and that means that twice the actual image data is available for the OS to fill in the 4 actual pixels for every “pixel” on the screen.

This actually gets us back to printing ink, if you think about it. Remember someone telling you that you needed to make your image file twice the PPI of the DPI of your dot pitch? That was for the same reason, because if you didn’t have enough resolution, you would not get a clean halftone.

Walter

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

Terms have meaning as long as one gives them meaning. You are preaching semantics without speaking specifically of what I wrote in my previous post. As such, I stand firmly behind everything written in my previous post and would like to direct everyone’s attention to it.

James Wages

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

freewaytalk mailing list
email@hidden
Update your subscriptions at:

85

I haven’t assigned a different meaning to the same terms I’ve been using for decades. The only change I made in the past is in going from DPI to PPI lingo, and even we Freeway users had talks about that subject at the time with folks from SoftPress.

I understand your way of thinking. But all I have been saying is that I prefer to have a MEANINGFUL “frame of reference” for my brain to make perfect sense of pixel data, in light of the resolutions I wish to design for.

The following screencast with voiceover clearly shows why I said what I said in my previous two posts:

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:

86

I fully understand that RESPONSIVE sites that scale graphics throw a monkey wrentch into this, but I have never created a responsive size that scales the graphics, so I am only thinking about a static “retina” graphic here that is viewed at 100% of its designed size in the browser.

In some circumstance Sparkle can now create 30 variants of the same image. An image gallery with 10 images and 10 thumbnails would have 600 images. Would you be pixel peeping every one of those?

Duncan

freewaytalk mailing list
email@hidden
Update your subscriptions at:

87

No, Duncan. I probably wouldn’t. Then again, I don’t use image galleries.

Did you watch my screencast and understand my explanation though?

James W.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

88

There is currently a browser rendering issue with retina images in recent versions of Webkit browsers when viewed on non-retina displays that leads to significant image softening. Safari seems worse than Chrome.

The fix (sort of) is to add some page CSS until the developers fix this properly, so it works like FireFox.

I’ve thrown up a couple pages showing this problem. You can see it at http://www.sunnymede.net/css/ and then follow the link to http://www.sunnymede.net/retina/ for comparison.

Ashley

freewaytalk mailing list
email@hidden
Update your subscriptions at: