Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old January 20th, 2008, 12:26 AM
MickinPlymouth MickinPlymouth is offline
Senior Member
 
Join Date: Aug 2007
O/S: Windows XP Home
Location: England
Posts: 106
Must I go back to JPG?

Hi, I've been posting lots of strategy game screenshots in game websites (via Photobucket and Imageshack) for the past few years in JPG format, but recently I switched to PNG format because its much better definition.
But PNG pics seem to display much slower, or am I imagining it?
Is there any way round it, or shall I switch back to JPG?
Thanks
Reply With Quote
  #2  
Old January 20th, 2008, 12:44 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
How do the file sizes compare for identical images between the two formats? If you compress the jpg so it loads faster (smaller file size) you'll also lose quality.
Reply With Quote
  #3  
Old January 22nd, 2008, 08:07 PM
simplyg123's Avatar
simplyg123 simplyg123 is offline
Senior Member
 
Join Date: Apr 2007
O/S: Windows XP Pro
Location: Naples, FL
Posts: 105
id stick with the png, there should'nt be too much difference in the load speed, ive never even noticed one
Reply With Quote
  #4  
Old January 25th, 2008, 03:00 AM
MickinPlymouth MickinPlymouth is offline
Senior Member
 
Join Date: Aug 2007
O/S: Windows XP Home
Location: England
Posts: 106
Thanks for the suggestions guys, but as a fallback plan I might upgrade to a faster connection speed anyway because its cheaper than my current 2Mb speed package, (if I understand the AOL adviser properly) as english wasn't his first language..
He said - "I can offer you Broadband Wireless up to 8Mb with WiFi Router", but when I kept asking him to explain what 'wireless' and 'Wifi router' meant, he just kept saying stuff like "it depends on your requirements" without giving me straight answers, so I hung up, and he'll rate a big fat 'zero' on my next AOL feedback form..;)
Anybody here at Cyber care to tell me about wireless and Wifi routers, like what are they?
Thanks
Reply With Quote
  #5  
Old January 25th, 2008, 03:54 AM
bkdc's Avatar
bkdc bkdc is offline
Senior Member
 
Join Date: Mar 2003
O/S: Windows XP Home
Location: Tampa Fl.
Posts: 123
WEB Design 101
The Web has rules for handling images. Basically, they are:

You should only use JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format) images.
Your image should be as small (in bytes) as possible. The smaller the file, the faster it loads.
The resolution of your images should be 72 dpi (dots per inch).
Follow these simple rules and you shouldn't have any problems with download and pageload times.
Reply With Quote
  #6  
Old January 25th, 2008, 05:15 AM
simplyg123's Avatar
simplyg123 simplyg123 is offline
Senior Member
 
Join Date: Apr 2007
O/S: Windows XP Pro
Location: Naples, FL
Posts: 105
Quote:
Originally Posted by bkdc View Post
WEB Design 101
The Web has rules for handling images. Basically, they are:

You should only use JPEG (Joint Photographic Experts Group) and GIF (Graphic Interchange Format) images.
Your image should be as small (in bytes) as possible. The smaller the file, the faster it loads.
The resolution of your images should be 72 dpi (dots per inch).
Follow these simple rules and you shouldn't have any problems with download and pageload times.
Sorry but those rules are changing with the times. >png is the best option, if you want to maintain quality, sure it may load 1 second longer than jpg. But in these times, all the new browsers are now capable of utilizing png files. And 80% of internet users are using some form of high speed internet.

The best thing about png is it can replace gif and png

gif is great due to the transparency abilities, but lacks quality big time. Png can be used transparent or with a BG color, and has the best quality available

Jpg is ok too, but quality is still pretty low, and lacks transparency capabilities.

Png is the all-around file format
Reply With Quote
  #7  
Old January 25th, 2008, 05:53 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
I agree. PNG is the best image format. The only issue with it is that IE does not support PNG24 well.

it's completely wrong to think gif and jpg are the only correct formats. Your web 101 class sucked
Reply With Quote
  #8  
Old January 25th, 2008, 06:57 AM
MickinPlymouth MickinPlymouth is offline
Senior Member
 
Join Date: Aug 2007
O/S: Windows XP Home
Location: England
Posts: 106
Okay maybe we can work something out here, what do you think of this idea -
I can use JPG for images where pinsharp definition isn't all that necessary
I can use GIF if I need slightly better definition
I can use PNG if I need topnotch definition.

Just to recap my original problem - I used to use PNG for everything, but it meant my images displayed very slowly at websites, (8 minutes or more for a typical page of 20 images as if they were slowly 'scanning' onto the screen in a series of horizontal strips)
I've asked around, and some other people say they experience the same slowness when accessing my pics, yet other people say 'no slowness for me'.
My AOL connection speed is 2Mb which I'm told should be fine, so i presume my middle-range PC is somehow to blame.

So i'll try my mixed JPG/GIF/PNG approach which should help speed things up, right?
One last thing - when saving as GIF, there are 2 check boxes - 'Save interlaced', and 'Save transparent colour'.
Should I tick them or leave them empty?
Reply With Quote
  #9  
Old January 25th, 2008, 07:02 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
Quote:
Originally Posted by simplyg123 View Post
Sorry but those rules are changing with the times. >png is the best option, if you want to maintain quality, sure it may load 1 second longer than jpg. But in these times, all the new browsers are now capable of utilizing png files. And 80% of internet users are using some form of high speed internet.
Load time is dependent on file size not file format. As for browser support, modern browsers will display png files but even if a person has a fast connection, using a high bandwidth type of image doesn't make sense if a lower bandwidth image will suffice. Another consideration: If 80% of users are using a fast connection, 20% are not. The target audience will have a bearing on file size and quality needs.

Quote:
Originally Posted by simplyg123 View Post
The best thing about png is it can replace gif and png
I think you meant "gif and jpg" (not png).

Quote:
Originally Posted by simplyg123 View Post
gif is great due to the transparency abilities, but lacks quality big time. Png can be used transparent or with a BG color, and has the best quality available
Gif images can have excellent quality if used within their limitations (256 colors). They're also the best bet for transparency. Png images can utilize transparency (including alpha transparency) but IE6 still doesn't support it without special coding in the page on which it's displayed.

Quote:
Originally Posted by simplyg123 View Post
Jpg is ok too, but quality is still pretty low, and lacks transparency capabilities.
Quality is dependent on a lot of things. With proper processing and a good quality original image, jpg quality can be retained. As always, quality is a tradeoff with file size.

Quote:
Originally Posted by simplyg123 View Post
Png is the all-around file format
I agree that png files are superior in many ways but total png support is still some years away. In the meantime there are options.
Reply With Quote
  #10  
Old January 25th, 2008, 07:12 AM
rockboy's Avatar
rockboy rockboy is offline
Cyber Tech Help Moderator
 
Join Date: Aug 2002
O/S: Windows 7 64-bit
Location: California, USA
Posts: 3,087
Quote:
Originally Posted by MickinPlymouth View Post
Just to recap my original problem - I used to use PNG for everything, but it meant my images displayed very slowly at websites, (8 minutes or more for a typical page of 20 images as if they were slowly 'scanning' onto the screen in a series of horizontal strips)
I've asked around, and some other people say they experience the same slowness when accessing my pics, yet other people say 'no slowness for me'.
My AOL connection speed is 2Mb which I'm told should be fine, so i presume my middle-range PC is somehow to blame.

So i'll try my mixed JPG/GIF/PNG approach which should help speed things up, right?
One last thing - when saving as GIF, there are 2 check boxes - 'Save interlaced', and 'Save transparent colour'.
Should I tick them or leave them empty?
What are the file sizes that you're dealing with? Load time will depend on how big the files are and how fast the internet connection is. It will also depend on whether or not the images have been cached by the browser.

As for "interlaced" it's mostly preference in the way it's displayed as it loads.

You should check the transparency box if your gif has transparency that you wish to retain. That should give you a prompt to set the color that you wish to be transparent .
Reply With Quote
  #11  
Old January 25th, 2008, 07:05 PM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
PNG has great support for transparency, don't u think so?
Reply With Quote
  #12  
Old January 25th, 2008, 09:03 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
There are two PNG formats PNG8 and PNG24. Both PNG formats support transparency. In general PNG8 is closer to a GIF format and PNG24 is closer to a JPG format + transparency.

IE supports PNG8 just fine. However, IE does not fully support PNG24. For this reason you need to be aware when you are using PNG24 that if there is transparency in the image, IE may not allow that transparency. IF there is no transparency in the image, then use JPG rather than PNG for full support from all browsers.

PNG24 is by far the best image format in general. But because of the IE limitations it's not always feasible. And as rockboy points out it's the file size that is important. If an image is only 900 bytes in gif format and 120 kilobytes in PNG8 format, then it's best to go with gif provided the image looks good.
Reply With Quote
  #13  
Old January 26th, 2008, 12:35 AM
bkdc's Avatar
bkdc bkdc is offline
Senior Member
 
Join Date: Mar 2003
O/S: Windows XP Home
Location: Tampa Fl.
Posts: 123
Quote:
Originally Posted by simplyg123 View Post
. And 80% of internet users are using some form of high speed internet.
According to the "World Almanac Book of Facts - 2008" Broadband users in the US is only 47%.
Reply With Quote
  #14  
Old January 26th, 2008, 01:10 AM
FrEaKmAn FrEaKmAn is offline
Senior Member
 
Join Date: Aug 2005
Posts: 477
Quote:
Originally Posted by Buzz View Post
... If an image is only 900 bytes in gif format and 120 kilobytes in PNG8 format, ...
isn't this file size difference too big? It really depends what you need, but my idea is to go with png's. Why? Because most people are using fast internet now and quality in getting important every day. Do you want that your visitors see crappy gif's on their brand new HD 150 inches screen?
Reply With Quote
  #15  
Old January 26th, 2008, 05:08 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
Format has little to do with speed issues. It's the file size that matters. Simply using png, gif, or jpg will NEVER automatically make a file larger.

When I create images for web sites I try all three formats. Whichever format gives me the best image at the smallest files size is what I use. The only caveat is I do not use PNG24 with transparency because IE will not support it. But if there is no transparency, I have no problem using PNG 24 for an image if the file size is good.

For example, say you are saving an image.
This image results in 4 different file sizes in each format:
PNG8 = 14k
PNG24 19k
GIF = 10k
JPG = 12k

Imagine I know I need transparency for this image. In this case I only look at GIF and PNG8. I pick which format looks better and use that. I'm not concerned with the 4k file size difference because appearance with transparency is my primary concern.

Now imagine the image does not contain transparency.
The GIF looks choppy and terribly dithered.
The PNG8 is not much better in appearance than the GIF but it's slightly better.
The JPG and PNG24 look almost identical and of good quality. In this case I use the JPG because it's 7k smaller in file size.

Every image is different. There are no hard and fast rules for which format to use for any image. The ONLY rule is if you need transparency it should be a GIF or PNG8. At least until IE catches up.

The notion of "crappy images on a 150 HD screen" is backwards. The larger the screen the smaller the images get thus resulting in better quality for standard images. I run a 30" monitor set at 2560x1600 pixels - far larger than any HD TV screen is capable of generating.
Reply With Quote
Reply

Bookmarks

Topic Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Topics
Topic Topic Starter Forum Replies Last Post
How do I put back the time back on task bar sandyocean Windows XP 8 May 17th, 2011 04:58 AM
browser back button wont let me go back kelli123 Windows XP 9 February 8th, 2007 04:49 PM


All times are GMT +1. The time now is 09:16 PM.