On Thu, Feb 16, 2012 at 3:18 PM, Daniel Smith wrote:

Hey all. I would hope this might get some responses...

I just today saved my first png file. In doing so Gimp came up with a choice box, as to parameters you can choose or not:

Interlacing (Adam7) (whatever that is) Save background color
Save gamma
Save layer offset
Save resolution
Save creation time

Interlacing means the rows of the image are not saved in order. This allows web browsers to display a full ugly version of the image right away and make it look prettier as the image gets downloaded. If you don't use interlacing, then the image appears to swipe downwards on the page as its downloaded. In this day and age of fast Internet connections, this isn't such a big deal anymore. But my personal preference leans towards interlacing.

Save background colour mean the PNG file will specify a colour to use as the replacement for the transparency if transparency isn't supported by the viewer. Mostly irrelevant these days. Leave it unchecked to reduce the file size by a tiny, tiny amount.

Save gamma saves the image's reference brightness. Mostly irrelevant. Leave it unchecked to reduce the file size by a tiny, tiny amount.

Save layer offset: no clue (I always leave it unchecked)

Save resolution sets a scale for print Or other non-pixel-size) output. Irrelevant for web use. Leave it unchecked to reduce the file size by a tiny, tiny amount.

Save creation time is kinda self-explanatory. Mostly pointless unless you want an embedded record of when the file was saved. Leave it unchecked to reduce the file size by a tiny, tiny amount.

-- Frank Gore
THE place to talk photography!
www.FriendlyPhotoZone.com

On Fri, Feb 17, 2012 at 12:18 AM, Daniel Smith wrote:

What does Adam7 mean?

http://en.wikipedia.org/wiki/Adam7_algorithm

Alexandre Prokoudine http://libregraphicsworld.org

On 02/16/2012 03:18 PM, Daniel Smith wrote:

Hey all. I would hope this might get some responses...

I just today saved my first png file. In doing so Gimp came up with a choice box, as to parameters you can choose or not:

Interlacing (Adam7) (whatever that is) Save background color
Save gamma
Save layer offset
Save resolution
Save creation time

Can anyone tell me which of these options they use? What does Adam7 mean?

Hey Daniel,

Interlacing is a technique that enables web browsers to display an ultra-low-quality version of the whole image, that becomes progressively clearer while the image is still downloading. With modern Internet connection speeds, this is harmless but unnecessary.

The background color, gamma, and layer offset features that are probably not relevant for your application; I have never found a use for them myself. Saving resolution may be useful in some exotic situations, but generally speaking web browsers will scale any image to the size specified in the (x)html tag that puts the image on the page. Creation time is just the system clock time when you saved the image, useful for revision control under some circumstances but probably not yours.

PNG is a lossless format, so unless you are saving a lot of giant images and run short of time, there is no reason to dial back the compression from the default "9".

I am looking to create some web pages with drupal. Can anyone tell me their process they use to do a similar goal? (With drupal or WP, etc.) What I'm thinking is that certain of the settings are compatible or not with the blogging engine or not? do you use png or jpeg?, etc.

Generally speaking, any blogging engine that allows you to mess with the (x)html should not do anything bad to your images. The server should just store them, along with the code that enables browsers to download and display them on the page. All of the above image formats should work.

I usually use jpg format for nearly all web images, because comparable images saved in png normally have larger file sizes. The most potentially interesting feature of png is that it saves transparency, and *nearly* all web browsers now in use understand how to display png images with transparent areas. If you need a transparent background, and you need higher resolution or better scalability than the gif format provides, png might be your answer. Others may know uses for png that I am not aware of, but so far I have found no use for it in web design.

You will probably be working from a template that specifies the position and size of some key images, such as a large header image. In these instances, build images to that specification. Other images can be placed freely in the main content and sidebar areas; in these instances, again, just make sure that the images you make fit the space provided.

In re transparency, most of the time you will not need it. If you load the page under construction in a web browser and use the eyedropperin the GIMP foreground/background color tool, you can set the exact value to make an opaque part of your image match the page background exactly.

In other instances, you might need to use transparency for something like an easy to change custom font text or logo appearing over a background image. In these cases, I usually build the image with the background image included, create a layer that has the text etc. merged into the background image, then do a selection and invert on a layer that has the text only, so that I can delete the background from the text+background layer cleanly. This gives much better anti-aliasing than just saving the layer with the text content.

Example: http://avptampabay.org/demo/

Per usual, there are lots of ways to do these things, and mine may not be the one you end up using.

:o)

Steve

On Thu, Feb 16, 2012 at 2:55 PM, Steve Kinney wrote:

Others may know uses for png that I am not aware of, but so far I have found no use for it in web design.

PNG is quite useful for some effects. Say I wanted a div element to have a gradient background - I could create a new image that's 1px wide by the height of my div, add a gradient, export as PNG. Then the css would be something like:

div { background: url(/path/to/png/file) repeat-x }

..and all divs would have a gradient background, using one tiny file (and even IE6 will comply). Quite useful for things like faux drop shadows, rounded corners, etc. too (but newer CSS techniques are arguably better/easier).

My general rule is: photograph -> JPEG, icon/effect ->PNG. As with every rule, there are exceptions ;)

Anyhoo, there are tons of uses for PNG in web design. Check out a Joomla template sometime - most of those do a crazy amount of styling using PNG files.

Chris

Very useful information. I'm in the habit of just pressing enter twice to export. :)

I've always wondered what this stuff does, so this has been an interesting read.

-Stefan Maerz

On 17 February 2012 09:55, Steve Kinney wrote:

PNG is a lossless format, so unless you are saving a lot of giant images and run short of time, there is no reason to dial back the compression from the default "9".

On 02/16/2012 03:18 PM, Daniel Smith wrote:

I am looking to create some web pages with drupal. Can anyone tell me their process they use to do a similar goal? (With drupal or WP, etc.) What I'm thinking is that certain of the settings are compatible or not with the blogging engine or not? do you use png or jpeg?, etc.

I usually use jpg format for nearly all web images, because comparable images saved in png normally have larger file sizes.  The most potentially interesting feature of png is that it saves transparency, and *nearly* all web browsers now in use understand how to display png images with transparent areas.  If you need a transparent background, and you need higher resolution or better scalability than the gif format provides, png might be your answer. Others may know uses for png that I am not aware of, but so far I have found no use for it in web design.

In re transparency, most of the time you will not need it.  If you load the page under construction in a web browser and use the eyedropperin the GIMP foreground/background color tool, you can set the exact value to make an opaque part of your image match the page background exactly.

As a point of difference :)

I find myself tending to save the majority of my images (in terms of developing the site - stripes, decorations, non-content stuff) as PNGs.

Firstly, I make most of my images from scratch using minimal numbers of colours to minimise load time anyway so the PNG is almost invariably a lighter weight option. For larger pieces such as banners, photos, avatars, artwork, anything with lots of different colours, I would probably use JPG.

On the transparency front, I find PNG a huge benefit over GIF. The obvious example is for logos/decorative images - GIFs do not have alpha transparency, a major issue for any shape other than a rectangle. Another benefit to using PNGs in websites is being able to make interesting and lightweight blocks of colour combinations using repeat-xy backgrounds of semi-transparent images. eg a 1px black image at 20% transparency, etc. I think the last time I saved anything in GIF was for a favicon...

Xiella

On Thu, Feb 16, 2012 at 4:48 PM, Xiella Harksell wrote:

As a point of difference :)

I find myself tending to save the majority of my images (in terms of developing the site - stripes, decorations, non-content stuff) as PNGs.

You're not the only one, the vast majority of professional web designers use PNGs as a flexible way of displaying images in browsers. The last browser I know of that didn't support PNG files properly was IE6... and can we count how many years old that is?

-- Frank Gore
THE place to talk photography!
www.FriendlyPhotoZone.com

On 02/16/2012 01:54 PM, Frank Gore wrote:

On Thu, Feb 16, 2012 at 4:48 PM, Xiella Harksell wrote:

As a point of difference :)

I find myself tending to save the majority of my images (in terms of developing the site - stripes, decorations, non-content stuff) as PNGs.

You're not the only one, the vast majority of professional web designers use PNGs as a flexible way of displaying images in browsers. The last browser I know of that didn't support PNG files properly was IE6... and can we count how many years old that is?

There is a minor but sound reason for using png rather than jpg in many of these cases - the fact that png is lossless. It does result in somewhat larger files, but if the specific image wants to be compressed to an indexed-mode jpg for file size reasons, a png background is I believe somewhat less likely to create artifacts - or so it seems to me.

-- Burnie

On 02/16/2012 05:25 PM, Burnie West wrote:

On 02/16/2012 01:54 PM, Frank Gore wrote:

On Thu, Feb 16, 2012 at 4:48 PM, Xiella Harksell wrote:

As a point of difference :)

I find myself tending to save the majority of my images (in terms of
developing the site - stripes, decorations, non-content stuff) as PNGs.

You're not the only one, the vast majority of professional web designers use PNGs as a flexible way of displaying images in browsers.
The last browser I know of that didn't support PNG files properly was
IE6... and can we count how many years old that is?

Usage is down to something around 5% on most sites I have seen recent statistics for. Considering the security aspect, it's really not doing anyone a favor to support IE6 any more... But the moment I stop writing alternate style sheets for it, I just "know" my next client will be running it in Win2k and asking me why the pages are all broken and stuff. :o)

There is a minor but sound reason for using png rather than jpg in many of
these cases - the fact that png is lossless. It does result in somewhat larger
files, but if the specific image wants to be compressed to an indexed-mode jpg
for file size reasons, a png background is I believe somewhat less likely to
create artifacts - or so it seems to me.

I did not know that jpg had an indexed mode. I knew I would be getting some interesting feedback when I posted that answer.

I have been doing this junk for so long that I developed an automatic habit of anti-aliasing transparent gif images "by hand" as per my earlier comments. And yes, it is time to abandon that and just use png images. Yay!

:o)

Steve

On 02/16/2012 03:20 PM, Steve Kinney wrote:

On 02/16/2012 05:25 PM, Burnie West wrote:

On 02/16/2012 01:54 PM, Frank Gore wrote:

On Thu, Feb 16, 2012 at 4:48 PM, Xiella Harksell wrote:

As a point of difference :)

I find myself tending to save the majority of my images (in terms of
developing the site - stripes, decorations, non-content stuff) as PNGs.

You're not the only one, the vast majority of professional web designers use PNGs as a flexible way of displaying images in browsers.
The last browser I know of that didn't support PNG files properly was
IE6... and can we count how many years old that is?

Usage is down to something around 5% on most sites I have seen recent statistics for. Considering the security aspect, it's really not doing anyone a favor to support IE6 any more... But the moment I stop writing alternate style sheets for it, I just "know" my next client will be running it in Win2k and asking me why the pages are all broken and stuff. :o)

There is a minor but sound reason for using png rather than jpg in many of
these cases - the fact that png is lossless. It does result in somewhat larger
files, but if the specific image wants to be compressed to an indexed-mode jpg
for file size reasons, a png background is I believe somewhat less likely to
create artifacts - or so it seems to me.

I did not know that jpg had an indexed mode. I knew I would be getting some interesting feedback when I posted that answer.

I didn't mean to imply that jpg has an indexed mode. It just seems to me if one exports a GIMP image in indexed mode to jpg the file comes out smaller. Haven't run extensive tests on that, though.

GIMP actually transforms back to RGB before going to jpg (asking if that's what you want first). So YMMV.

I have been doing this junk for so long that I developed an automatic habit of anti-aliasing transparent gif images "by hand" as per my earlier comments. And yes, it is time to abandon that and just use png images. Yay!

:o)

Steve

_______________________________________________ gimp-user-list mailing list
gimp-user-list@gnome.org
http://mail.gnome.org/mailman/listinfo/gimp-user-list

On 02/16/2012 08:59 PM, Burnie West wrote:

create artifacts - or so it seems to me.

I did not know that jpg had an indexed mode. I knew I would be getting some interesting feedback when I posted that answer.

I didn't mean to imply that jpg has an indexed mode. It just seems to me if
one exports a GIMP image in indexed mode to jpg the file comes out smaller.
Haven't run extensive tests on that, though.

GIMP actually transforms back to RGB before going to jpg (asking if that's
what you want first). So YMMV.

That makes sense. Blast this "e mail" stuff, so easy to misinterpret things that made perfect sense when they were typed.

I have done a lot of tests and I am confident that indexed images consistently make larger files than RBG, no matter how thoroughly tweaked they are. There are some cases where this effect is reduced: Images that have a very limited number of colors in large contiguous areas seem to be the least affected.

In re the jpg vs. png thing referenced in other posts, the alpha channel in png still seems to me the only real advantage the format has for web applications, because png files are consistently larger than jpg files with the same content and resolution. Inkscape exports to png because it is lossless and has an alpha channel, both of which are important when importing the image to a raster editor for final adjustments. These features also make png the most "universal" and error resistant web graphic format, and for that reason the right format to prescribe in high level web design course work.

But there are still lots of cases where jpg is the right choice for most web images: Like sites that will be accessed by mobile devices, or in countries where dialup is still common, or on commercial sites that serve millions of page views a day. These are places where image file sizes can substantially impact the user experience and/or server load.

I am looking forward to the day when all significant browsers support the major features of the proposed html 5 standard. Direct support for vector graphics will be a real revolution, enabling substantial expansion of CSS to eliminate many common (and presently useful) decorative layout hacks, and reducing many common kinds of graphics to a vanishingly small fraction of their present on-disc size.

:o)

Steve

On 12-02-16 06:20 PM, Steve Kinney wrote:

Usage is down to something around 5% on most sites I have seen recent statistics for. Considering the security aspect, it's really not doing anyone a favor to support IE6 any more... But the moment I stop writing alternate style sheets for it,

If you were a supporter of the Any Browser Campaign (http://www.anybrowser.org/campaign/) you shouldn't have to write alternate style sheets. When I did a redesign of my website several years ago I tested my pages using Netscape 7.2 and 8, FireFox 1.5 and 2.0, Opera 9, Blazer 4.0 (the browser on my PDA), and even Internet Explorer 5.5 and 6. The different browsers showed some errors in the layout. I was able to fix all the issues after some adjustments to the style sheets. The pages then looked the same (except due to minor variation in fonts available to the web browser) without any checks anywhere that looked for a specific browser.

If you are using some fancy features on a web page it may not be as easy to have the same level of compatability across multiple browsers on multiple operating systems without some conditional code but the amount of browser specific checks should be kept to a minimum.

On Sat, Feb 18, 2012 at 4:16 PM, Kevin Cozens wrote:

If you are using some fancy features on a web page it may not be as easy to have the same level of compatability across multiple browsers on multiple operating systems without some conditional code but the amount of browser specific checks should be kept to a minimum.

Right, it's not like these new-fangled standards like HTML5 can possibly have any positive effect on a user's experience. Let's all cripple our work in an effort to support old, unmaintained, insecure browsers. In fact, we should ENCOURAGE users to continue using old, unmaintained, insecure browsers. It's the only responsible thing to do.

Good plan!

New, interactive features? Who needs 'em?!?

-- Frank Gore
THE place to talk photography!
www.FriendlyPhotoZone.com

On Sun, Feb 19, 2012 at 1:21 AM, Frank Gore wrote:

Right, it's not like these new-fangled standards like HTML5 can possibly have any positive effect on a user's experience. Let's all cripple our work in an effort to support old, unmaintained, insecure browsers. In fact, we should ENCOURAGE users to continue using old, unmaintained, insecure browsers. It's the only responsible thing to do.

Are you by any chance referring to five kinds of CSS3 gradients that have to be put to a styles file so that it's supported across browsers for sure? ;-)

Alexandre Prokoudine http://libregraphicsworld.org

On 02/18/2012 04:16 PM, Kevin Cozens wrote:

On 12-02-16 06:20 PM, Steve Kinney wrote:

Usage is down to something around 5% on most sites I have seen recent statistics for. Considering the security aspect, it's really not doing anyone a favor to support IE6 any more... But the moment I stop writing alternate style sheets for it,

If you were a supporter of the Any Browser Campaign (http://www.anybrowser.org/campaign/) you shouldn't have to write alternate style sheets. When I did a redesign of my website several years ago I tested my pages using Netscape 7.2 and 8, FireFox 1.5 and 2.0, Opera 9, Blazer 4.0 (the browser on my PDA), and even Internet Explorer 5.5 and 6. The different browsers showed some errors in the layout. I was able to fix all the issues after some adjustments to the style sheets. The pages then looked the same (except due to minor variation in fonts available to the web browser) without any checks anywhere that looked for a specific browser.

If you are using some fancy features on a web page it may not be as easy to have the same level of compatability across multiple browsers on multiple operating systems without some conditional code but the amount of browser specific checks should be kept to a minimum.

Actually I use semantic markup via standards compliant xhmtl 1.0 and CSS 2.1. As an example, the pages in my silly little personal site look and work the same in Firefox, Opera, Chrome, Safari, Epiphany, Konqueror, Midori and IE8. I did not have to tweak anything to accomplish that level of cross browser compatibility - that's what W3C Standards are for and, thank God, Microsoft has finally capitulated and the browser wars are over.

I use a few alternate CSS declarations in an auxiliary style sheet to correct rendering errors in IE6, because some people are still using it, and the way IE6 is broken affects the main navigation menu. Those are the only IE6 errors I bother to correct.

Visitors to the site who are using IE6 or 7 are greeted by a security warning and upgrade link on every page, wrapped in a conditional comment whose contents are only visible on the offending browsers.

:o)

Steve

On 02/18/2012 04:01 PM, Steve Kinney wrote:

Actually I use semantic markup via standards compliant xhmtl 1.0 and CSS 2.1. As an example, the pages in my silly little personal site look and work the same in Firefox, Opera, Chrome, Safari, Epiphany, Konqueror, Midori and IE8. I did not have to tweak anything to accomplish that level of cross browser compatibility - that's what W3C Standards are for and, thank God, Microsoft has finally capitulated and the browser wars are over.

I use a few alternate CSS declarations in an auxiliary style sheet to correct rendering errors in IE6, because some people are still using it, and the way IE6 is broken affects the main navigation menu. Those are the only IE6 errors I bother to correct.

Visitors to the site who are using IE6 or 7 are greeted by a security warning and upgrade link on every page, wrapped in a conditional comment whose contents are only visible on the offending browsers.

:o)

Elegant, Steve - Thanks for the suggestion, and also for promoting W3C awareness. -- Burnie