divinedesigns1 Posted May 24, 2012 Share Posted May 24, 2012 doesnt jpeg load faster than a gif image on a website ? or does it depend on how you use it? 4 Link to comment Share on other sites More sharing options...
amitamberker Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
divinedesigns1 Posted May 24, 2012 Author Share Posted May 24, 2012 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 More sharing options...
justsomeguy Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
amitamberker Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
amitamberker Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
justsomeguy Posted May 24, 2012 Share Posted May 24, 2012 I use 24-bit PNG images for things that need to be high-quality. I use 8-bit PNG images to replace anywhere I would use a gif, and I use compressed jpeg images for most interface and background images. Link to comment Share on other sites More sharing options...
divinedesigns1 Posted May 24, 2012 Author Share Posted May 24, 2012 ok thanks, ill compress my images then n creative sure but skype would be better for that Link to comment Share on other sites More sharing options...
Guest So Called Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
dsonesuk Posted May 24, 2012 Share Posted May 24, 2012 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 More sharing options...
Guest So Called Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
Ingolme Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
divinedesigns1 Posted May 25, 2012 Author Share Posted May 25, 2012 thanks again guys, well i hope these questions helps other 0.o Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
Ingolme Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
dsonesuk Posted May 25, 2012 Share Posted May 25, 2012 img elements are inline by default, so what did you expect? that's why they came out with display:block; and display: inline-block; Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
dsonesuk Posted May 25, 2012 Share Posted May 25, 2012 (edited) 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 May 25, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Guest So Called Posted May 25, 2012 Share Posted May 25, 2012 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 More sharing options...
ShadowMage Posted May 25, 2012 Share Posted May 25, 2012 (edited) 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 May 25, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2012 Share Posted May 25, 2012 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. 5 Link to comment Share on other sites More sharing options...
dsonesuk Posted May 25, 2012 Share Posted May 25, 2012 Well it looks like Mozilla, must have hired former IE developers to work on FF version 12, cause in version 10 in windows, it works just like in the other browsers. Link to comment Share on other sites More sharing options...
amitamberker Posted May 29, 2012 Share Posted May 29, 2012 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 More sharing options...
Ingolme Posted May 29, 2012 Share Posted May 29, 2012 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 More sharing options...
divinedesigns1 Posted May 29, 2012 Author Share Posted May 29, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now