How do I “Combine images into CSS sprites” in freeway pro 5.6.5 ?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It’s nothing that Freeway can help you with directly. What I have done in the past is to draw a base image in Freeway, then layer a bunch of other smaller images over that (be sure to set them to combine, otherwise they will just be separate layers, just as they started). Freeway’s arrangement tools (distribute, align) can help you compose a grid of smaller images into a single sprite. Once you have done that (manually) and exported the composed image, then you can use it as a sprite following any of the usual techniques. Here’s my original exposition on that: Home
Walter
On May 10, 2013, at 8:34 AM, Artivideo wrote:
How do I “Combine images into CSS sprites” in freeway pro 5.6.5 ?
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
hmmm looks complicated Waltd.
What I don’t undertstand is that it concern only a very limited amount of files (11 to be exactly). These files are copies of the original files which freeway generates. With other copies of the same files the problem does not excist.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If you’re seeing this in a “speed up my site” analyzer or something like that, then it’s likely that it is looking for any image under 32px in either dimension, and under a certain number of square pixels in any case. Larger images do not really benefit from the sprite trick, so they wouldn’t be promoted to you as candidates for this technique.
If this is indeed the context in which you are seeing this message, you may safely ignore it unless you are hand-coding or using a tool that natively supports sprites. Freeway does not support sprites out of the box or with an Action.
Walter
On May 10, 2013, at 1:42 PM, Artivideo wrote:
hmmm looks complicated Waltd.
What I don’t undertstand is that it concern only a very limited amount of files (11 to be exactly). These files are copies of the original files which freeway generates. With other copies of the same files the problem does not excist.
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
On 10 May 2013, 12:34 pm, Artivideo wrote:
How do I “Combine images into CSS sprites” in freeway pro 5.6.5 ?
I wish Softpress would offer this feature. It would make building a graphics intensive site a lot easier, IMHO.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I wish Softpress would offer this feature. It would make building a graphics intensive site a lot easier
That isn’t really what sprites are for.
Sprites are primarily used to combine smaller images - like those used in navigation - to cut down on server requests
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The files which are indicated by google which should be in a sprite are just the 11 buttons (each are comprised of 3 layers) which are visible on each page on my website www.artivideo.nl. I wil print out your info and try to figure out how it works. Any help is welcome.
On 10 May 2013, 6:14 pm, waltd wrote:
If you’re seeing this in a “speed up my site” analyzer or something like that, then it’s likely that it is looking for any image under 32px in either dimension, and under a certain number of square pixels in any case. Larger images do not really benefit from the sprite trick, so they wouldn’t be promoted to you as candidates for this technique.
If this is indeed the context in which you are seeing this message, you may safely ignore it unless you are hand-coding or using a tool that natively supports sprites. Freeway does not support sprites out of the box or with an Action.
Walter
On May 10, 2013, at 1:42 PM, Artivideo wrote:
hmmm looks complicated Waltd.
What I don’t undertstand is that it concern only a very limited amount of files (11 to be exactly). These files are copies of the original files which freeway generates. With other copies of the same files the problem does not excist.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok I tried some things of your outline (not sure if I implemeted it the right way) but the only hing i achieve is that the layered buttons have constantly the red colour even if not hoovered.
The problem that Google sees is that each of the 11 buttons (consisting each of 3 layers) are loaded seperately on each page. Did not found a way yet to embed all the buttons as one item WITHOUT loosing the hoover functionality when pointing at a button. So if someone has a solution that EVEN I can apply that would be great.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
OK - here is an example of your navigation http://www.deltadesign.co/FW6Test/artivideo-sprite.html (not entirely implemented) using a sprite made at http://wearekiss.com/spritepad
It uses a single 52Kb sprite - which admittedly could be smaller.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can’ figure out how this spritepad works. Drop and drag they say.but from were. From the Freeway page layout, from the website in the browser. Both don’t work. Moreover how do I be sure that the location of the items will be in the same place and how do I incorporate it back in Freeway. They claim not minutes but seconds in spritepad but I think it will be weeks for me haha 
Btw. spritepad does not support Safari.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Drop and drag they say.but from were.
From the finder - if you are using FW created images then you will get them in your Resources folder or you can export them from FW itself.
It really doesn’t take long to create the Sprite image but it does take some time to incorporate it into FW and you will need to understand the CSS involved.
how do I be sure that the location of the items will be in the same place
It is the associated CSS file that does all that for you.
Sorry I cannot hold your hand on this as I have to leave on a trip but if you can hang off until Tuesday I will give you an example file.
Note the blue version of the contact button is missing from your site. Did you hover over the var button in my example to see the complete sprite image?
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi David,
Thanks I corrected the blue version of the contact, and 2 other buttons had the same problem. It was gone because I copied some things from the master page to the others. I hope they fixed the “reapply master” option in freeway 6 because that does not work quit well in FW5 and therefore I have to copy sometimes items by hand from the master page to other pages with all the concequences if you are to sloppy like me.
In my resource forlder not only the FW generated images are there but also the original ones (which are uncompressed and thus big files and that is how I can recognize them). So I have to drage these FW generated image files from the FW SITE to that spritepad application ? I have little knowledge of CSS, just use the CSS menue in FW but I am not able to write the CSS code.
Ok I will wait till you are back. Have a nice trip David.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The files which are indicated by google which should be in a sprite are just the 11 buttons (each are comprised of 3 layers
Just bear in mind that if the purpose of this is to ultimately reduce page load times then the effort involved may be negated by other factors on your page(s)
In other words by reducing a few server requests and shaving a few Kb may be small beer compared to reducing some video files by several Mb.
So before you go to the trouble you need to decide whether the effort is truly justified.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
There are no video files in de website, just links to video files hosted by Vimeo.
If I run insight from google (just try it with www.artivideo.nl) it indicates that CSS sprite are missing and will give the most speed gain.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
it indicates that CSS sprite are missing and will give the most speed gain.
I am not in a position to check however simple maths should give you the answer ie the total size of the individual navigation images compared to the 53Kb of the sprite.
Have you had complaints about page loading times?
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
http://www.deltadesign.co/FW6Test/artivideo-pages/
Let me know if you want to pursue the integration of a sprite bearing in mind that you will have to add code via Page>Html markup and you will lose some FW WYSIWYG mojo.
So if you are not comfortable with that…
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes I want to pursue it and see if it improves my site. So any help is welcome. Is this feature “combining images in CSS sprites” implemented in the new 6 version ?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
No, and there’s nothing I can think of in the Actions API that would allow a cleverer person than me to build such a feature into an Action. But there are stand-alone desktop and Web applications that will build you a sprite file, a matching CSS sheet, and an example HTML page from a folder of images. If you can wrap your head around the CSS and the disconnected and anti-WYSIWYG workflow in Freeway, you could use this technique to great effect.
Actually, thinking as I write this, maybe there’s a way to build an Action that would consume (and link) the CSS from one of these tools, and would then let you define images to be replaced by sprites within your pages. The truly hard part would be to build the sprite composite image directly within Freeway, working only from various disconnected images on separate pages. So maybe if we punt that off to a purpose-built tool, the rest will be a manageable thing for Freeway and the Actions API.
Walter
On May 16, 2013, at 9:14 AM, Artivideo wrote:
Yes I want to pursue it and see if it improves my site. So any help is welcome. Is this feature “combining images in CSS sprites” implemented in the new 6 version ?
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 want to pursue it and see if it improves my site.
What sort of improvement are you looking for?
As I see it you will gain virtually nothing using a sprite for the nav buttons in the way of file size. You certainly will reduce server requests for the number of images ie 1 instead of 30.
However you may be able to gain more in the way of load time by reducing texture_curtains_background_30644_2560x1440.png from nearly 1/2Mb down to less than 100Kb.
For a start it does not need to be a png.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok lets forget the css sprite. You are probably right and the gain is marginal.
Concerning the background file it is a bit strange aswell. If I use a JPEG file (which can be fairly small like 300 to 400 Kb without loosing resolution for a size 2560*1440) I get a message in Google to optimze the background by compress it a little more (9% is possible they say). If I use a png file which is large (2 - 3 Mb and which makes loading pages slow) I do not get a message in Google to compress the png file. Moreover even with the best compress utility on internet the reduction of a PNG file is only marginal. So what to use. A small jpe file and take the message in google for granted but have page loads or using big png files and don’t get any comments from Google. 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