Jump to content

jpeg vs gif agruement


divinedesigns1
 Share

Recommended Posts

doesnt jpeg load faster than a gif image on a website ? or does it depend on how you use it?

  • Like 4
Link to comment
Share on other sites

doesnt jpeg load faster than a gif image on a website ? or does it depend on how you use it?
Hi DDs1,Greetings to you Mate!It depends upon various factors on how you use .jpg and .gif files on a Website.
Link to comment
Share on other sites

Hi DDs1, Greetings to you Mate! It depends upon various factors on how you use .jpg and .gif files on a Website.
greetings creative, and yea i notice that because some of the websites that uses.gif loads a lot faster than some of my websites that uses .jpeg, then again i like to have my images quality to the best, bad habit, but i think that shouldnt be the problem with the loading, so imma be testing it, to see how its possible i got a question for you creative, how you do the animation with gif? i tried it but lol yea i tried it
Link to comment
Share on other sites

It doesn't matter what the format is, what matters is the size of the file that the browser needs to download. Gif images are sometimes smaller because they use an 8-bit color palette instead of the 24-bit color that jpegs use. The "best quality" settings for jpeg images should not be used online, you should be compressing your jpegs by at least 40%-60%.

Link to comment
Share on other sites

greetings creative, and yea i notice that because some of the websites that uses.gif loads a lot faster than some of my websites that uses .jpeg, then again i like to have my images quality to the best, bad habit, but i think that shouldnt be the problem with the loading, so imma be testing it, to see how its possible i got a question for you creative, how you do the animation with gif? i tried it but lol yea i tried it
Hi DDs1,Thank you for your Greetings :) I do the Gif Animation from "Adobe Photoshop" software. Perhaps I can show you a Live Demo if you are willing to get into my Screen via TeamViewer remote access. Let me know if you are interested so that I could get prepared to show you some Live Demos in my Photoshop.
Link to comment
Share on other sites

It doesn't matter what the format is, what matters is the size of the file that the browser needs to download. Gif images are sometimes smaller because they use an 8-bit color palette instead of the 24-bit color that jpegs use. The "best quality" settings for jpeg images should not be used online, you should be compressing your jpegs by at least 40%-60%.
Hi justsomeguy,Yup! The size matters but along with size, even Colors, Number of Layers, Concepts, Frames and etc matters as well. I always use "best quality" settings for .jpg and save the file(s) as "Save for Web" and tick that "Progressive" option depending upon the conditions. But I would never compress my .jpg by 40%-60% to retain the quality and richness of file.
Link to comment
Share on other sites

ok thanks, ill compress my images then n creative sure but skype would be better for that

Link to comment
Share on other sites

Guest So Called

I'm surprised in a topic such as this that nobody has mentioned one aspect of GIFs that is very important to some web design. GIF images render progressively. I'm sure you've seen it, or if you haven't then just look some time, GIFs start out kind of grainy (especially with slow web connections) and then sharpen up as the page and images get completely rendered. JPGs don't do that. What the progressive rendering does is give the appearance of the page rendering more quickly. By the time your eyes focus on the images they are sharpened up or nearly so. To appreciate this effect fully you should declare image dimensions in your IMG tag, so that the browser knows how much room to leave for the image.

Link to comment
Share on other sites

I think you will find progressive rendering, or interlacing CAN be used for jpg images as well, but because jpg were lighter in file size compared to gif it was not used as much unless the larger jpg image file made it more practical to use. This was used in the early days to bring up a image up as soon as possible even though the image was blurry at the start you would get a idea what the image was to stay until fully loaded sharp image had appeared. If saved as non-interlaced it would load one line at time from top to bottom

Link to comment
Share on other sites

Guest So Called

I don't know about the JPGs... And anyway I haven't heard the progressive rendering GIFs mentioned in years, perhaps the concept was more important when most Internet users had slow connections, even slow dial-up connections. Those who are concerned with rendering speed of their pages should pay particular attention to including height and width information so that the browser doesn't have to finish downloading the image to discover the size, and then reflow the browser window. Reflowing is certainly something that must be minimized when rendering speed is important, and rendering speed is always important.

Link to comment
Share on other sites

GIFs are generally so small that the interlacing isn't even noticeable. PNGs have 8 levels of interlacing, which is good for very large, high quality images.

Link to comment
Share on other sites

thanks again guys, well i hope these questions helps other 0.o

Link to comment
Share on other sites

You don't have to apply height or width in most cases, as you would use the correct image size for its specific purpose. Thumbnail images would usually be small to fixed size with their larger counterpart also maybe to fixed large size, and preloaded in the background to make it show instantly when required. You should not use larger images resized to thumbnail size, cause that would really slow the pages loading time.

Link to comment
Share on other sites

Firefox doesn't seem to reserve space for images at all. Before an image loads, or if an image was not found, it just loads the alternate text into what appears to be an inline block with no specified width or height. Even if I set dimensions with CSS and <img> attributes.

Link to comment
Share on other sites

The problem is that you can't set the size reserved for the image. Firefox ignores the dimensions yoiu set for the inline-block if the image hasn't loaded.

Link to comment
Share on other sites

Well I must have been doing it wrong all these years, and have a magical browser that just does not follow that rule, because if i set img tag to display: inline-block; and add height and width either with css, or the attributes of the img element itself. The dimensions are not ignored and you up with a empty space of the dimensions specified where the image would appear if loaded or not loaded. Edit: All my browsers FF, IE7 to 9, Opera, Chrome, Safari are all magical, cause they all follow the same rule, you poor, poor minions.

Edited by dsonesuk
Link to comment
Share on other sites

Guest So Called

I've always set the dimensions in the IMG tag, and never messed with IMG display properties. However since my site is not commercial I've never bothered to check it out in browsers other than IE and FF, and even then only the versions I'm using. Much of what I know about HTML is based upon reading it. I don't have the time or interest to verify everything I've heard as truth. It seems odd to me that a browser would not utilize the IMG dimensional information during rendering to avoid unnecessary reflows.

Link to comment
Share on other sites

It seems that Ingolme and dsonesuk are both correct. I tested in FF 12 and if I put in dimensions (as attributes of the img tag) without changing the display, the browser will not leave room for the image. As soon as I set the display to inline-block, space is saved. Though, any element set to display inline-block will reserve space if dimensions are set in CSS. EDIT: It seems that FF is the only that does not leave space. IE (8), C, O, and S all reserved space for the image without changing the display.

Edited by ShadowMage
Link to comment
Share on other sites

Depends on circumstances on how you plan to display the image, odd images here and there within article, or group of images for a gallery, if you really care about how the loading of image affect the reflow or not, you make adjustments to your needs.

  • Like 5
Link to comment
Share on other sites

Hello Everyone,WOW! This is getting interesting! I was out of station for a while and hence I could not get on the Forum. I think perhaps we should fix a Time and Catch-Up via WebEx / Skype to see Demo from individual members. Thus, it would help each-one of us to understand much better. How about on June 1st 2012? Maybe JustSomeGuy can tell us at what time should we gather.

Link to comment
Share on other sites

Hello Everyone, WOW! This is getting interesting! I was out of station for a while and hence I could not get on the Forum. I think perhaps we should fix a Time and Catch-Up via WebEx / Skype to see Demo from individual members. Thus, it would help each-one of us to understand much better. How about on June 1st 2012? Maybe JustSomeGuy can tell us at what time should we gather.
All the information is right here in this thread. There isn't any more to it. As for a "demo" you can try these things on your own pages to see what happens.
Link to comment
Share on other sites

i should post more useful question or w3s should make an debate section, that be hella cool, so if someone post a question like this one, everyone can share their opinion then again no need for the extra section since theres already a general :) but when i think about another useful question ill post it or when my curiousity kicks in ill post it. thanks for all the useful replies guys

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...