I've been working on the graphics for my site and have a bit of a question. JPG files are too large and so my site would load slowly, for that reason I decided to use GIF format. The problem is GIF loses some quality. I then noticed PNG keeps the color as is, keeping the quality. PNG is larger in file size then GIF but not as much as when I use JPG.
My question is, if I use PNG, will most people be able to view my site? I'm not sure if PNG is supported by all web browsers or computers. This might sound like a awkward question however I worry some might not be able to view the PNG files on my site.
PNG graphics help
-
Oualawouzou
- Cartoon Cop (Moderator)
- Posts: 1548
- Joined: Fri Jan 10, 2003 7:47 am
- Contact:
I was curious, so i looked it up. PNG is supported from IE 3 (IE 4 mac) on, all versions of Firefox / Mozilla, and from Opera 3 on.
Full alpha support only comes in IE 7, Opera 6+, and Mozilla though.
If you have photoshop, use the "save for web" function and rachet down the number of colors - you'll notice a noticable decrease in size w/o giving up too much quality.
Full alpha support only comes in IE 7, Opera 6+, and Mozilla though.
If you have photoshop, use the "save for web" function and rachet down the number of colors - you'll notice a noticable decrease in size w/o giving up too much quality.
I'm not that knowledged in such details as web colors. When I save as a GIF I see some lose in color and quality and when I save using web only colors I see a larger lose of quality. Most of the web comics I read seem to use JPG and PNG and they load fine for me. Although my decision might mean some out there might view my site differently, I'd rather stay to what I'm using which is PNG.
If I use PNG though, what problems might happen to those viewing my site? Will the site not load, will colors appear odd or will the PNG files simple not show?
If you want an example of my site, here is the test of the main page:
http://zyxith.comicgenesis.com/test.html
If I use PNG though, what problems might happen to those viewing my site? Will the site not load, will colors appear odd or will the PNG files simple not show?
If you want an example of my site, here is the test of the main page:
http://zyxith.comicgenesis.com/test.html
If you use gimp you can custom index. Its free too.
http://gimp-win.sourceforge.net/stable.html
Just go image->mode->index and you can set the number of colors to whatever you want and turn dithering on and off.
Flat shaded comics can be shrunk quite a bit if you turn the color number down from 256 to like 50. I don't much like dithering, but I guess it can be useful for more complex pictures. I never did find a way to do all that with photo shop.
It should be able to open layered psd files if thats what you use, so you can do all the drawing in photoshop, then open it with gimp, flatten it, index it, and save it to 200704XX.png or whatever.
http://gimp-win.sourceforge.net/stable.html
Just go image->mode->index and you can set the number of colors to whatever you want and turn dithering on and off.
Flat shaded comics can be shrunk quite a bit if you turn the color number down from 256 to like 50. I don't much like dithering, but I guess it can be useful for more complex pictures. I never did find a way to do all that with photo shop.
It should be able to open layered psd files if thats what you use, so you can do all the drawing in photoshop, then open it with gimp, flatten it, index it, and save it to 200704XX.png or whatever.
-
Reinder
- Cartoon Hero
- Posts: 1691
- Joined: Fri Jan 01, 1999 4:00 pm
- Location: Groningen, The Netherlands
- Contact:
What the others said.
On file sizes:
PNG files can usually be optimized with the Save for Web feature in Photoshop or the Export feature in Paint Shop Pro. They can be optimized further without losing quality compared to the PNG file you input, by running your PNG file through PNGOUT.
However:
If you're interested in publishing full-colour images, and your comics are NOT flat-coloured, you really should take a closer look at exporting to JPG with the same tools I mentioned above. It's very likely that you'll find a setting in which the JPG turns out smaller than a full-colour PNG while still being of acceptable quality.
(With my own comics, it's touch and go. They're flat colours with limited shading, and sometimes PNG works better, sometimes JPG does. I experiment a lot before settling on which version I'll save and upload.)
On file sizes:
PNG files can usually be optimized with the Save for Web feature in Photoshop or the Export feature in Paint Shop Pro. They can be optimized further without losing quality compared to the PNG file you input, by running your PNG file through PNGOUT.
However:
If you're interested in publishing full-colour images, and your comics are NOT flat-coloured, you really should take a closer look at exporting to JPG with the same tools I mentioned above. It's very likely that you'll find a setting in which the JPG turns out smaller than a full-colour PNG while still being of acceptable quality.
(With my own comics, it's touch and go. They're flat colours with limited shading, and sometimes PNG works better, sometimes JPG does. I experiment a lot before settling on which version I'll save and upload.)
Reinder Dijkhuis
Rogues of Clwyd-Rhan | Waffle | My DeviantArt gallery | Chronicles of the Witch Queen
Rogues of Clwyd-Rhan | Waffle | My DeviantArt gallery | Chronicles of the Witch Queen
I'm not worried about my comic. My issue is with the graphics on my site since if they're too large, it'll take a while to load. At the moment it looks like all the graphics on my site are a total of 250KB which to me doesn't seem too much. It might take longer for dial up uses, I'm not sure, I myself use DSL so I don't know how long it takes dial up users to load 250KBs.
In short though all I am worried about is if people out there won't be able to view my site since I use PNG for the graphics.
I don't really understand much of what was said in the last 2 posts. I don't even know what dithering means.
In short though all I am worried about is if people out there won't be able to view my site since I use PNG for the graphics.
I don't really understand much of what was said in the last 2 posts. I don't even know what dithering means.
-
Dr Neo Lao
- Cartoon Hero
- Posts: 2397
- Joined: Wed Oct 18, 2006 5:21 am
- Location: Australia
This is just me:
Most of my site graphics are buttons and the background image rather than borders, corners and stuff like that. As such, most of the images are around 1 to 2Kb, and the background is 16kb for a total of around 80Kb.
It'll depend on how much you have on all pages and how much you have on your index, but as a nice rule of thumb I've been thinking that the comic image size should be about the maximum of graphics and the maximum of text on the index and the comic should be the biggest thing on your non-latest comic pages.
Just to clarify: if your comic image is (on average) around 250Kb, then your index could have 250Kb of 'other' images (buttons for navigation, graphics, vote buttons, background, etc) and 250Kb of text (html code, news, blog, etc) for a total of 750Kb for the index.
Your non-latest comic pages would have the 250Kb comic but obviously a lot less of the other two to make it easier for readers to navigate your archives.
With this simple thirds fomula, if you have a large comic, you'll have a large site. If you have a small comic, you'll have a small site. That's my thinking at any rate...
Most of my site graphics are buttons and the background image rather than borders, corners and stuff like that. As such, most of the images are around 1 to 2Kb, and the background is 16kb for a total of around 80Kb.
It'll depend on how much you have on all pages and how much you have on your index, but as a nice rule of thumb I've been thinking that the comic image size should be about the maximum of graphics and the maximum of text on the index and the comic should be the biggest thing on your non-latest comic pages.
Just to clarify: if your comic image is (on average) around 250Kb, then your index could have 250Kb of 'other' images (buttons for navigation, graphics, vote buttons, background, etc) and 250Kb of text (html code, news, blog, etc) for a total of 750Kb for the index.
Your non-latest comic pages would have the 250Kb comic but obviously a lot less of the other two to make it easier for readers to navigate your archives.
With this simple thirds fomula, if you have a large comic, you'll have a large site. If you have a small comic, you'll have a small site. That's my thinking at any rate...
I have gone exclusively to PNG for my comic, which is posted with a transparency. I have noticed two things: The PNGs seem to be a bit darker than my original psd (photoshop) file that I work in... in some versions of IE, the transparency part of the canvas/pic shows as a "shadow".. not quite transparent.
