Combine images into CSS sprites

You heard this in relation to how you should store your originals. If your camera doesn’t make Raw or TIFF or something non-desctructive like that as its native file format, then your very first step after downloading the JPEG is to convert it to a 24-bt PNG. Do that and then never touch the JPEG again. Place the PNG in your Freeway layout in any non-pass-through graphic container you like. Freeway will convert it to JPEG for you, and all will be well with the world.

So why shouldn’t you JPEG a JPEG? JPEG is a lossy compression algorithm. It works by analyzing the photo data in 32px-square “superblocks”, finding those that it can reduce to a single expression or a flat color, and throws out all the other picture data in that block. Then it moves on to the next. Each time it does this, it also horses around with the edges of high-contrast items, producing a similar artifact to aggressive sharpening (in Photoshop) on a low resolution image.

Ever see “crawly things” in the sky next to a dark object like a tree? That’s a classic JPEG artifact.

So combine these features together (the sharpening-like effect, which tries to enhance the boundary between high contrast areas, and the random noise brought in by the superblock treatment, and you end up with an escalating recipe for disaster. Save a JPEG as a JPEG enough generations, and it will not only look worse each time, it will also start to get slightly larger, as that noise (indistinguishable from detail to an algorithm) has to be sharpened more and more each time, which means fewer large areas of color to be expressed as a tidy algorithm.

JPEG is a fine delivery medium for the Web, but as an archival format, you could only do worse with GIF.

Walter

On May 16, 2013, at 7:58 PM, Artivideo wrote:

I read somewhere that in Freeway it is better to use png files than jpg files. So what is your advice ?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It is a bg image - use a jpeg and compress the hell out of it.

As I said previously - Google doesn’t always get everything right.

Common sense tells us that a 200K jpeg is better than a 2Mb png

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m not sure how much I gain by using a sprite for my search field, but it has worked great for me for years; and I recently made it a 144ppi retina too. You can view it on any page in my site, at the bottom left corner of the page:

The GIF format gives me the smallest size for my search field sprite. Sometimes PNG-8 gives a size smaller than GIF, but GIF with a splattering of “Lossy” in Photoshop really cranks the size down on many graphics, with no perceptible artifacts. For Retina images I tend to use JPEG @44% compression in PS, GIF with lossy of 10%, or PNG-8 with a little WebSnap.

I would love to implement CSS Sprite Rollovers across my site, but there isn’t a nice solution for that now. For all the nitty gritty details, have a read through this thread:

http://freewaytalk.net/thread/view/2010

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What you gain here is simplicity in the construction of a rollover. Rather than having two separate images (one of which must be preloaded in order to have the effect work smoothly on the first try) you have only one, and no JavaScript is needed. Now, in your example case, you do need JavaScript, because IE < 9 won’t accept a :hover declaration on anything that isn’t an tag, but for a normal mouseover on a link, you can do everything in one image and one CSS file, which is a nice separation of concerns.

Paul Dunning has an Action to build rollovers with pure CSS like this, but it doesn’t merge the two states into a single image, so it’s not strictly speaking a CSS Sprite rollover.

Walter

On May 16, 2013, at 8:46 PM, JDW wrote:

I’m not sure how much I gain by using a sprite for my search field, but it has worked great for me for years; and I recently made it a 144ppi retina too. You can view it on any page in my site, at the bottom left corner of the page:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,

Very nice site :slight_smile: A lot of work for me to do to achieve the same level. I will do some more effort to improve the way to implement images.

By the way can you tell me how you get the magnifying glass in your search tekst field. Is it a standard freeway action ?

On 17 May 2013, 12:46 am, JDW wrote:

I’m not sure how much I gain by using a sprite for my search field, but it has worked great for me for years; and I recently made it a 144ppi retina too. You can view it on any page in my site, at the bottom left corner of the page:

VISION Auto Security Systems

The GIF format gives me the smallest size for my search field sprite. Sometimes PNG-8 gives a size smaller than GIF, but GIF with a splattering of “Lossy” in Photoshop really cranks the size down on many graphics, with no perceptible artifacts. For Retina images I tend to use JPEG @44% compression in PS, GIF with lossy of 10%, or PNG-8 with a little WebSnap.

I would love to implement CSS Sprite Rollovers across my site, but there isn’t a nice solution for that now. For all the nitty gritty details, have a read through this thread:

http://freewaytalk.net/thread/view/2010

–James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Artivideo, the magnifying glass is part of the same graphic. The field itself is part of the graphic too.

And please remember that this is a single graphic. It’s called a “sprite” because it has two states. You can only see one state at a time because you are basically looking through a window that only shows half of the graphic. When you click your cursor inside, then the other part of the graphic/sprite comes into view.

All of this works via code. I use the Protaculous2 Action. I then click the “DOM Loaded Observer” button and paste the following text inside:

  $$('input.search').each(function(elm){
    var def = 'Search this site...';
    elm.addClassName('safari');
    if($(elm).empty())
      elm.setStyle({'color':'#888'}).value = def;
    elm.observe('focus',function(evt){
      if($F(elm) == def)
        elm.setStyle({'color':'#000'}).clear().focus();
      elm.removeClassName('safari');
      elm.addClassName('safari_focus');
    });
    elm.observe('blur',function(evt){
      if($(elm).empty())
        elm.setStyle({'color':'#888'}).value = def;
      elm.removeClassName('safari_focus');
      elm.addClassName('safari');
    });
  });

(CREDIT: Code courtesy of Walter Davis.)

But that’s not all. I then click on the Page menu in Freeway and choose “HTML Markup…” In the Before section (see the popup at the bottom of the Markup dialog for that), I use the following code:

<style type="text/css">
input.safari, input.safari_focus {
    font: 12px Arial, MS Serif, Sans-serif;
    border: none;
    padding: 6px 20px 6px 24px;
    background: url(http://www.kiramek.com/Resources/SearchField_144.gif) no-repeat left top;
    background-size: 197px 52px;
    height: 14px;
    width: 152px;
}
input.safari_focus {
    overflow: visible;
    background: url(http://www.kiramek.com/Resources/SearchField_144.gif) 0 -26px;
    background-size: 197px 52px;
    height: 14px;
    width: 152px;
}
*:focus {outline: 0;}
</style>

<!--[if lte IE 8]>
<style type="text/css">
input.safari, input.safari_focus {
    font: 12px Arial, MS Serif, Sans-serif;
    border: none;
    padding: 6px 20px 6px 24px;
    background: url(http://www.kiramek.com/Resources/safari_search_2013.gif) no-repeat left top;
    height: 14px;
    width: 152px;
}
input.safari_focus {
    overflow: visible;
    background: url(http://www.kiramek.com/Resources/safari_search_2013.gif) 0 -26px;
}
*:focus {outline: 0;}
</style>
<![endif]-->

(CREDIT: Code courtesy of Walter Davis.)

If you don’t care about IE8 or earlier, then you don’t need the bottom half of the above Page Markup. But you will need to tweak the path, the filename, and pixel dimensions to suite your web application.

I hope this gets you on your way!

Best,

James Wages


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi james thanks for the info.

I applied the Protaculous2 Action and did the HTML marup but
I can not find the “DOM Loaded Observer” to insert the code ?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You must apply Protaculus2 to the Page. Then open the Actions palette. You should then be able to see that button. But if you cannot see Protaculus2 in the actions palette, it means you probably have some item on the page selected.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Found the Dom :slight_smile: Will let you know if it works

On 20 May 2013, 11:32 am, Artivideo wrote:

Hi james thanks for the info.

I applied the Protaculous2 Action and did the HTML marup but
I can not find the “DOM Loaded Observer” to insert the code ?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,

I followed your instruction but after publshing I dont see a search field with magnifying glass. In fact I don’t see anything changed ??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, I neglected to mention that you must also sketch a “field” somewhere on your page and name it appropriately so the code you added to your page can find it. What the code does is transform your meter and lowly field into a glorious rounded corner “Safari” style search field.

I’m at home right now, so if you can’t figure it out, then I’ll have to prepare a sample Freeway document for you tomorrow, when I get into the office.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can get the search field with zero extra code simply by choosing Search from the Type field in the Form Element Inspector in Freeway 6. (Your page must be set to HTML5 document type to enable this option.)

Double-click into the HTML box where you want your search field to appear, and choose Insert / HTML Item / Input/Field from the main menu. Click once on that inserted text field and in the Inspector, change the Type picker from its default of Text to Search. Done. There’s no step three.

The native HTML5 search field will have a distinctive appearance in browsers that support that feature. What James has done is to use a screenshot of the Safari search field and use it as the background for all browsers, thus enforcing a consistent visual behavior and removing the browser’s default appearance. I leave the decision of whether or not this is a good thing to you.

Walter

On May 20, 2013, at 7:42 AM, Artivideo wrote:

Hi James,

I followed your instruction but after publshing I dont see a search field with magnifying glass. In fact I don’t see anything changed ??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

“name it appropriately so the code you added to your page can find it” The titel of the textbox should I find somewhere in the code ? Also the markup and Protaculous2 action only change the square textfield in a rounded one with magnifing glass right ? I still have to add the “simple site search” action to the new textfield ?

On 20 May 2013, 12:15 pm, JDW wrote:

Sorry, I neglected to mention that you must also sketch a “field” somewhere on your page and name it appropriately so the code you added to your page can find it. What the code does is transform your meter and lowly field into a glorious rounded corner “Safari” style search field.

I’m at home right now, so if you can’t figure it out, then I’ll have to prepare a sample Freeway document for you tomorrow, when I get into the office.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In Freeway < 6, just use the HTML5 Input Action, found here: http://actionsforge.com/actions/view/264-html5-input

Change the Type picker to Search, and use the Placeholder field to enter ‘Search…’ and check “show previous results” for the down-caret and magnifying glass icon. You will only see this particular visual presentation on desktop Safari. iOS Safari has its own take on the type=search field, and other browsers have their own, ranging from no-different-than-text to subtly-rounded corners.

Walter

On May 20, 2013, at 9:06 AM, Artivideo wrote:

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No clue what you mean by " Change the Type ticker …icon ! I can install that HMTL5 page action (although my complete site is configures as XHTML 1.0 transitional) but than I am lost what to do.

On 20 May 2013, 1:32 pm, waltd wrote:

In Freeway < 6, just use the HTML5 Input Action, found here: http://actionsforge.com/actions/view/264-html5-input

Change the Type picker to Search, and use the Placeholder field to enter ‘Search…’ and check “show previous results” for the down-caret and magnifying glass icon. You will only see this particular visual presentation on desktop Safari. iOS Safari has its own take on the type=search field, and other browsers have their own, ranging from no-different-than-text to subtly-rounded corners.

Walter

On May 20, 2013, at 9:06 AM, Artivideo wrote:

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You can leave the HTML5 Page action in place, but you need to click once on the text field and apply the HTML5 Input Action to that. Then you’ll see the Type picker in the Actions palette. (It is not really necessary to apply the HTML5 Action to the page, the HTML5 Element Action all by itself will also alter the page’s DOCTYPE to HTML5. It doesn’t matter what version of HTML you have chosen for the page (besides HTML 3.2) – the result will be a valid HTML5 doctype.

Walter

On May 20, 2013, at 9:56 AM, Artivideo wrote:

No clue what you mean by " Change the Type ticker …icon ! I can install that HMTL5 page action (although my complete site is configures as XHTML 1.0 transitional) but than I am lost what to do.

On 20 May 2013, 1:32 pm, waltd wrote:

In Freeway < 6, just use the HTML5 Input Action, found here: http://actionsforge.com/actions/view/264-html5-input

Change the Type picker to Search, and use the Placeholder field to enter ‘Search…’ and check “show previous results” for the down-caret and magnifying glass icon. You will only see this particular visual presentation on desktop Safari. iOS Safari has its own take on the type=search field, and other browsers have their own, ranging from no-different-than-text to subtly-rounded corners.

Walter

On May 20, 2013, at 9:06 AM, Artivideo wrote:

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks i got it to work in safari and chrome. In Firefox i get the old square textfield. In Opera, text field is round but no magnifying glass and the cursor is on the left site end already in the rounded corners.

On 20 May 2013, 2:00 pm, waltd wrote:

You can leave the HTML5 Page action in place, but you need to click once on the text field and apply the HTML5 Input Action to that. Then you’ll see the Type picker in the Actions palette. (It is not really necessary to apply the HTML5 Action to the page, the HTML5 Element Action all by itself will also alter the page’s DOCTYPE to HTML5. It doesn’t matter what version of HTML you have chosen for the page (besides HTML 3.2) – the result will be a valid HTML5 doctype.

Walter

On May 20, 2013, at 9:56 AM, Artivideo wrote:

No clue what you mean by " Change the Type ticker …icon ! I can install that HMTL5 page action (although my complete site is configures as XHTML 1.0 transitional) but than I am lost what to do.

On 20 May 2013, 1:32 pm, waltd wrote:

In Freeway < 6, just use the HTML5 Input Action, found here: http://actionsforge.com/actions/view/264-html5-input

Change the Type picker to Search, and use the Placeholder field to enter ‘Search…’ and check “show previous results” for the down-caret and magnifying glass icon. You will only see this particular visual presentation on desktop Safari. iOS Safari has its own take on the type=search field, and other browsers have their own, ranging from no-different-than-text to subtly-rounded corners.

Walter

On May 20, 2013, at 9:06 AM, Artivideo wrote:

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, this is expected and correct behavior. If Firefox ever decides to style their search field differently than the text field, you will get that behavior there. This is the whole point of using the native field – they don’t stick out and look weird on any platform. Unlike Web developers, most users do not have more than one browser installed or in daily use. So they get used to one way for things to look, and they don’t know quite what to do when that assumption is overridden by an over-eager designer.

Walter

On May 20, 2013, at 10:33 AM, Artivideo wrote:

Thanks i got it to work in safari and chrome. In Firefox i get the old square textfield. In Opera, text field is round but no magnifying glass and the cursor is on the left site end already in the rounded corners.

On 20 May 2013, 2:00 pm, waltd wrote:

You can leave the HTML5 Page action in place, but you need to click once on the text field and apply the HTML5 Input Action to that. Then you’ll see the Type picker in the Actions palette. (It is not really necessary to apply the HTML5 Action to the page, the HTML5 Element Action all by itself will also alter the page’s DOCTYPE to HTML5. It doesn’t matter what version of HTML you have chosen for the page (besides HTML 3.2) – the result will be a valid HTML5 doctype.

Walter

On May 20, 2013, at 9:56 AM, Artivideo wrote:

No clue what you mean by " Change the Type ticker …icon ! I can install that HMTL5 page action (although my complete site is configures as XHTML 1.0 transitional) but than I am lost what to do.

On 20 May 2013, 1:32 pm, waltd wrote:

In Freeway < 6, just use the HTML5 Input Action, found here: http://actionsforge.com/actions/view/264-html5-input

Change the Type picker to Search, and use the Placeholder field to enter ‘Search…’ and check “show previous results” for the down-caret and magnifying glass icon. You will only see this particular visual presentation on desktop Safari. iOS Safari has its own take on the type=search field, and other browsers have their own, ranging from no-different-than-text to subtly-rounded corners.

Walter

On May 20, 2013, at 9:06 AM, Artivideo wrote:

I have freeway 5.6.5. Also thisversion has a simple search field action which I use at the moment but it is not so nice as the one James uses on his website. So i want to try to get the same.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi James,

" and name it appropriately so the code you added to your page can find it" can not find the name in de code you wrote.

Need some more help to link the textfield top the code


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options