[jQuery] Re: [Off-Topic] CSS Combine Images
Hi, I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) Have you had a look at ImageMagick? The ImageMagick tool montage should do what you need. I guess you could also profit from writing a GIMP script foo if ImageMagick is not an alternative for you. I don't whant to neglect your efforts, just give you some tips how to overcome your current restrictions almost for free. I guess you would have a hard time to find an image format usable for the web that is not supported by GIMP, extending the script to multiple rows is very simple and you have any scaling and extending functions you might whant to have for images with different sizes. Christof
[jQuery] Re: [Off-Topic] CSS Combine Images
Alexander Graef wrote: Just google for it, there are many many sources that have dealt with this over the years. Here are some: http://www.alistapart.com/articles/slidingdoors2/ http://www.websiteoptimization.com/speed/tweak/combine/ http://www.quate.net/newsnet/read.php?id=48 http://wellstyled.com/css-nopreload-rollovers.html Cheers Alexander Don't forget: http://www.alistapart.com/articles/sprites --Klaus
[jQuery] Re: [Off-Topic] CSS Combine Images
I have done this in php with gd and ImageMagick in the past, but this a desktop application that will allow more finegrained control of the combined output image and the source handling in the future. Sure there are many options to do it, I even created a photoshop action to do it, but none of these are really doing the trick for me. Just sharing :) Alexander -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Christof Donat Sent: Friday, July 27, 2007 9:22 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: [Off-Topic] CSS Combine Images Hi, I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) Have you had a look at ImageMagick? The ImageMagick tool montage should do what you need. I guess you could also profit from writing a GIMP script foo if ImageMagick is not an alternative for you. I don't whant to neglect your efforts, just give you some tips how to overcome your current restrictions almost for free. I guess you would have a hard time to find an image format usable for the web that is not supported by GIMP, extending the script to multiple rows is very simple and you have any scaling and extending functions you might whant to have for images with different sizes. Christof __ NOD32 2424 (20070726) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com
[jQuery] Re: [Off-Topic] CSS Combine Images
Hi, I have done this in php with gd and ImageMagick in the past, but this a desktop application that will allow more finegrained control of the combined output image and the source handling in the future. montage is a CLI tool with fairly finegrained control of the combined output ;-) However I just whanted to add some thoughts. Have you thought of using Qt for the GUI? Qt also gives you some image manipulation functions and can handle various formats as well. Btw you win a cross platform desktop application for Windows, MacOS X and various X11 based platforms like e.g. Linux, Solaris or the BSDs. Qt itself is a C++ library, but there are bindings to many other languages as well, like e.g. Python, Perl, Java, etc. Sure there are many options to do it, I even created a photoshop action to do it, but none of these are really doing the trick for me. Just sharing :) ScriptFoo goes further than photoshop actions. Actually you get a touring complete language to manipulate even every single pixel of some set of images if you like. You can do the UI with GTK then. AFAIK photoshop actions are not really much more than a recoded pattern of appling existing Photoshop tools. Actually I was wandering why the available image formats should be an issue. That is why I guess you have not been able to find the best tools for that. In my experience most image formats are no issue for desktop applications nowadays. Even if none of the easy ways like integrating into Gimp or using Qt is an option for you, you can always call e.g. the netpbm tools to read any input or generate any output format you like. Christof
[jQuery] Re: [Off-Topic] CSS Combine Images
Thanks for the input. The image formats are not really an issue, just not supported at this stage of the project :) And this is a cross platform tool, currently running on windows and mac, soon linux. Just had no time to test it on Linux yet. Cheers Alexander -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Christof Donat Sent: Friday, July 27, 2007 10:09 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: [Off-Topic] CSS Combine Images Hi, I have done this in php with gd and ImageMagick in the past, but this a desktop application that will allow more finegrained control of the combined output image and the source handling in the future. montage is a CLI tool with fairly finegrained control of the combined output ;-) However I just whanted to add some thoughts. Have you thought of using Qt for the GUI? Qt also gives you some image manipulation functions and can handle various formats as well. Btw you win a cross platform desktop application for Windows, MacOS X and various X11 based platforms like e.g. Linux, Solaris or the BSDs. Qt itself is a C++ library, but there are bindings to many other languages as well, like e.g. Python, Perl, Java, etc. Sure there are many options to do it, I even created a photoshop action to do it, but none of these are really doing the trick for me. Just sharing :) ScriptFoo goes further than photoshop actions. Actually you get a touring complete language to manipulate even every single pixel of some set of images if you like. You can do the UI with GTK then. AFAIK photoshop actions are not really much more than a recoded pattern of appling existing Photoshop tools. Actually I was wandering why the available image formats should be an issue. That is why I guess you have not been able to find the best tools for that. In my experience most image formats are no issue for desktop applications nowadays. Even if none of the easy ways like integrating into Gimp or using Qt is an option for you, you can always call e.g. the netpbm tools to read any input or generate any output format you like. Christof __ NOD32 2424 (20070726) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com
[jQuery] Re: [Off-Topic] CSS Combine Images
Link: http://dev.portalzine.de/index?/pzImageCombine--print http://dev.portalzine.de/index?/pzImageCombine--print Sorry Alexander _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alexander Graef Sent: Friday, July 27, 2007 12:22 AM To: jquery-en@googlegroups.com Subject: [jQuery] [Off-Topic] CSS Combine Images Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast. There is an easy way to overcome this by combining images into one single image and address the single images using CSS. CSS for 1st image in row: background-image : url(combined.png); background-position : 0px -16px; CSS for 2nd image in row: background-image : url(combined.png); background-position : 0px -32px; I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;) Current restrictions: - Only png images are allowed. - Only one row. - All source images must have the same size. Planned features: - Linux version - Multiple rows - Multiple source sizes - Multiple input formats - Image selection and sort options - Drag drop grid to place images I am sure some of you might see some use for this. Enjoy Alexander - portalZINE(R)- innovation uncovered http://www.portalzine.de http://www.portalzine.de dev.portalZINE(R) - all about development http://dev.portalzine.de http://dev.portalzine.de pro.portalZINE(R) - customized experience http://pro.portalzine.de __ NOD32 2424 (20070726) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com
[jQuery] Re: [Off-Topic] CSS Combine Images
I think this is a cool idea, but what is needed is an example so we can see how valuable it is. A nice example would show the slow way vs your sliced way and see how they compare. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alexander Graef Sent: Thursday, July 26, 2007 3:22 PM To: jquery-en@googlegroups.com Subject: [jQuery] [Off-Topic] CSS Combine Images Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast. There is an easy way to overcome this by combining images into one single image and address the single images using CSS. CSS for 1st image in row: background-image : url(combined.png); background-position : 0px -16px; CSS for 2nd image in row: background-image : url(combined.png); background-position : 0px -32px; I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;) Current restrictions: - Only png images are allowed. - Only one row. - All source images must have the same size. Planned features: - Linux version - Multiple rows - Multiple source sizes - Multiple input formats - Image selection and sort options - Drag drop grid to place images I am sure some of you might see some use for this. Enjoy Alexander - portalZINE(R)- innovation uncovered http://www.portalzine.de http://www.portalzine.de dev.portalZINE(R) - all about development http://dev.portalzine.de http://dev.portalzine.de pro.portalZINE(R) - customized experience http://pro.portalzine.de
[jQuery] Re: [Off-Topic] CSS Combine Images
This is a well-know technique. If I remember right, credits goes to http://wellstyled.com/css-nopreload-rollovers.html -Olivier Mitchell Waite wrote: I think this is a cool idea, but what is needed is an example so we can see how valuable it is. A nice example would show the slow way vs your sliced way and see how they compare. *From:* jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] *On Behalf Of *Alexander Graef *Sent:* Thursday, July 26, 2007 3:22 PM *To:* jquery-en@googlegroups.com *Subject:* [jQuery] [Off-Topic] CSS Combine Images Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast. There is an easy way to overcome this by combining images into one single image and address the single images using CSS. CSS for 1st image in row: background-image : url(combined.png); background-position : 0px -16px; CSS for 2nd image in row: background-image : url(combined.png); background-position : 0px -32px; I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;) Current restrictions: - Only png images are allowed. - Only one row. - All source images must have the same size. Planned features: - Linux version - Multiple rows - Multiple source sizes - Multiple input formats - Image selection and sort options - Drag drop grid to place images I am sure some of you might see some use for this. Enjoy Alexander - portalZINE(R)- innovation uncovered http://www.portalzine.de dev.portalZINE(R) - all about development http://dev.portalzine.de pro.portalZINE(R) - customized experience http://pro.portalzine.de
[jQuery] Re: [Off-Topic] CSS Combine Images
The technique is years old and has been used in many different ways over the years. Just trying to ease the way to build the combined images. Cheers Alexander _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Olivier Percebois-Garve Sent: Friday, July 27, 2007 4:24 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: [Off-Topic] CSS Combine Images This is a well-know technique. If I remember right, credits goes to http://wellstyled.com/css-nopreload-rollovers.html -Olivier Mitchell Waite wrote: I think this is a cool idea, but what is needed is an example so we can see how valuable it is. A nice example would show the slow way vs your sliced way and see how they compare. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alexander Graef Sent: Thursday, July 26, 2007 3:22 PM To: jquery-en@googlegroups.com Subject: [jQuery] [Off-Topic] CSS Combine Images Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast. There is an easy way to overcome this by combining images into one single image and address the single images using CSS. CSS for 1st image in row: background-image : url(combined.png); background-position : 0px -16px; CSS for 2nd image in row: background-image : url(combined.png); background-position : 0px -32px; I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;) Current restrictions: - Only png images are allowed. - Only one row. - All source images must have the same size. Planned features: - Linux version - Multiple rows - Multiple source sizes - Multiple input formats - Image selection and sort options - Drag drop grid to place images I am sure some of you might see some use for this. Enjoy Alexander - portalZINE(R)- innovation uncovered http://www.portalzine.de http://www.portalzine.de dev.portalZINE(R) - all about development http://dev.portalzine.de http://dev.portalzine.de pro.portalZINE(R) - customized experience http://pro.portalzine.de __ NOD32 2424 (20070726) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com
[jQuery] Re: [Off-Topic] CSS Combine Images
Just google for it, there are many many sources that have dealt with this over the years. Here are some: http://www.alistapart.com/articles/slidingdoors2/ http://www.websiteoptimization.com/speed/tweak/combine/ http://www.quate.net/newsnet/read.php?id=48 http://wellstyled.com/css-nopreload-rollovers.html Cheers Alexander _ From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Mitchell Waite Sent: Friday, July 27, 2007 4:01 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: [Off-Topic] CSS Combine Images I think this is a cool idea, but what is needed is an example so we can see how valuable it is. A nice example would show the slow way vs your sliced way and see how they compare. From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Alexander Graef Sent: Thursday, July 26, 2007 3:22 PM To: jquery-en@googlegroups.com Subject: [jQuery] [Off-Topic] CSS Combine Images Normally for each image on a webpage a separate request to the webserver is required, each taking as much as a hundred millisecond. Does not sound much, but can add up fast. There is an easy way to overcome this by combining images into one single image and address the single images using CSS. CSS for 1st image in row: background-image : url(combined.png); background-position : 0px -16px; CSS for 2nd image in row: background-image : url(combined.png); background-position : 0px -32px; I have been using this technique for some time now and always searched for a tool that would help me combine those images easily, but never succeeded. That is why I decided to build my own :) This small tool allows you to choose an image directory and combine all png images into one single image. Its still in its alpha stage and far from feature complete ;) Current restrictions: - Only png images are allowed. - Only one row. - All source images must have the same size. Planned features: - Linux version - Multiple rows - Multiple source sizes - Multiple input formats - Image selection and sort options - Drag drop grid to place images I am sure some of you might see some use for this. Enjoy Alexander - portalZINE(R)- innovation uncovered http://www.portalzine.de http://www.portalzine.de dev.portalZINE(R) - all about development http://dev.portalzine.de http://dev.portalzine.de pro.portalZINE(R) - customized experience http://pro.portalzine.de __ NOD32 2424 (20070726) Information __ This message was checked by NOD32 antivirus system. http://www.eset.com
