I have been wondering how facebook load images so fast.
I am not on any projects related to my question, but I'm just really interested.
With some observation, I noticed that facebook loads a low quality picture as temporary, and shows the high quality one as soon as it is fully loaded.
this makes it seem like it loaded it so fast, but really it was just a low quality one at first.
My question is, how does facebook implement that?
When I put image on my site, it loads it from top to bottom in full quality right on.
Is this done through Javascript/Jquery ajax? or something?
is done through php?
did facebook make to versions on their end? low and high quality? and send the low quality one first?
Thanks :)
Yes! you are right, Facbook loads low quality image first then render it based on network speed. this method called "Progressive JPEGs" which is another type of JPEGs, they are rendered, as the name suggests, progressively.
First you see a low quality version of the whole image. Then, as more of the image information arrives over the network, the quality gradually improves.
From usability perspective, progressive is usually good, because the user gets feedback that something is going on. Also if you’re on a slow connection, progressive JPEG is preferable because you don’t need to wait for the whole image to arrive in order to get an idea if it is what you wanted. If not, you can click away from the page or hit the back button, without waiting for the (potentially large) high quality image.
There is controversial information in blogs and books whether progressive JPEGs are bigger or smaller than the baseline JPEGs in terms of file size.
If you use tool like Photoshop or any designing tool while saving any document in jpg or other format it will ask you 2 option one is for Baseline and another one is Progressive.
But you can achieve same on run time also if you have written any API for this to convert your baseline images to Progressive images while displaying on webpage.
From my understanding, when you click on an image from the Facebook UI, the viewer appears with the low thumbnail version (or a slightly larger version of the thumbnail) loaded. Because of browser caching, that low quality image will display very quickly.
Then in the background, they use javascript to load the higher quality image. Then using some javascript events, they can detect when the higher quality image has loaded. Once loaded, replace the lower quality version with the higher quality version of it.
So from the UI perspective, it's only Javascript. When you upload the photo, they create multiple sizes of the image to allow this effect to happen.
Related
If I have an image containing sprites:
http://www.starka.se/wp-content/themes/starka/images/sprites.png
Using these sprites on the website, will they show as that part of the sprites.png is loaded or will they only show until after the entire sprites.png has been loaded?
Let's say I'm on a connection so slow that this would be noticable...
Another way to clarify:
Would the STARKA text (which is at the top of the .png) show on the website before the social icons (which are a bit further down) or would they both show at the same time AFTER sprites.png is entirely loaded?
According to Yahoo : It depends on where you put your Stylesheets. Depending on browser, the content will only show when all graphic elements related to this content are loaded. So you might think "It doesn't make any difference! ". So using or not using sprites doesn't make any difference, but only in HIGH SPEED connections.
But the thing is, using sprites reduces significantly the time a page needs to load. So "STARKA" might show before the social icons ON VERY VERY SLOW connections.
After visiting your website and seeing how many differents images you have, looking forward to use sprites won't be a loss of time ! It won't solve the problem for people using 56K, but it might still improve your website for many people :)
Currently for my webpage's banner, I'm using http://workshop.rs/projects/coin-slider/ to have 4 images sliding. On the office's slower computers the coin slider seems to be very laggy.
My question is, would animating the 4 images into a single GIF file be better/faster? Are there better options to create a 4-image-moving banner?
Try using a lightweight image gallery, I found some here. The coin slider is lightweight 8KB but there are ones even lighter 2KB or so.
You could technically use a GIF but I think there are some mobile compatibility issues, you can also have better functionality with javascript/jQuery galleries.
As far as slow computers go there isn't much you can do about that, I wouldn't worry too much about it. Just do some extra research on how to minimise files and deliver a faster site.
Gif is not a wise alternet for sliders..you could reduce the quality of your Images and compress them..or if you are using large images and resizing them in slider, you can re size them with any image alteration tool. This will reduce image size too.
And I hope you are not giving images path direct internet links, cause this will automatically increase the loading time.
I have designed This site .The page load speed is very low.I found online site load time which tells the load time of the site.As well as it gives the other statistics .
The page load time statistics snapshot is as folows:
my question is how can i decrease the page load time?Since it becomes very irritating if the page load time is more then 2 sec..
Not sure that this is really a programming question but one problem I see is that your images are too large in terms of file size.
These images are rather large for example:
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/img/bgbody.gif (145kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/he12.bmp (450kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/slid11.bmp (1mb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/Istpanelfinal.jpg (303kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/TA_UnionSTN4.jpg (311kb)
You can start by using a program like Adobe Photoshop to save your images "for web." You might also want to look into converting those bitmaps and GIFs into PNGs. You may also want to make your JPEG images progressive.
If you don't have access to Photoshop, a free alternative that can "save for web" is GIMP.
edit: You might want to look into using some CSS to make a 1 pixel tall image repeat on the x-axis. You'd lose your gradient though.
Something like the following should work:
background-image:url(../images/gradient.gif);background-repeat:repeat-x;
I am trying to load heavy ong images in website. I have tried to use photoshop -> posterize method to reduce the file size of heavy pngs followed by some online tools to reduce the png file size without major compromizing the filesize of an image.
I have als tried pre-loading images, but still they are taking a considerable amount of time to load.
Can anyone please suggest me some way to reduce the loading time of png images on website, so they that they load quick?
Many thanks in advance!
Even if you follow all/some of the the previous advice, a nice addon to your workflow is passing all your PNGs through PNGoptimizer.
It's a simple drag and drop program which strips unnecessary information out of your PNGs. Depending of the type of image, the size saving varies between 5-10% and more than 70%.
Try preloading using XHR and some server tricks.
Or use the webp format.
Your problem must be elsewhere.
At most, 79kb x 5 is less than 1/2 a MB. This would only be a slow load on a slow connection.
I suggest you install YSlow ( http://developer.yahoo.com/yslow/ ). It analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
There is a nice JS script to ease the preloading of images: https://github.com/jussi-kalliokoski/html5Preloader.js
Be also aware, that proper caching is a MUST for heavy sites. Google has a nice introduction for this purpose: https://developers.google.com/speed/docs/best-practices/caching
To avoid flashing images on your site, load low-res images with fast loading time, stretch them to the full size and replace them when the high-res images were loaded. To improve optics you could also place a grid over the low-res image.
This has a pretty neat appearance for the visitor and reduces wait time.
Depending on what server you have, I use image gen for all my .net sites.
http://our.umbraco.org/projects/website-utilities/imagegen
<img src="/ImageGen.ashx?image=/images/an-image.png&width=50&height=50" width="50" height="56" alt="">
Photoshop's Posterize will not help you; PNG's don't use a palette (Unless you choose PNG-8). You can use File->Export for Web to export a smaller PNG (or a gif). If your image contains alpha information, it will be lost if you export for web though. PNG-8 and PNG-24 both have index-transparency.
#ShrutiJakhete you can use lazy load Jquery with your HTML5. The images outside the view port will not be visible until you scroll down the page. Thus it'll reduce the loading time. Check this out http://www.appelsiini.net/projects/lazyload
i am making a website where i want one huge image to cover the complete background. I have seen many websites where the images in the background look to be of very high quality and still the pages load really quickly. How?
for example look at this link http://g2geogeske.com/menus
how can i achieve images with quality like these without compromising with the load time. Also if anyone knows of any tutorial or site which explains this please post the link to thanks.
even after being so big its just 170 kb(backgroung in link).my images are at about 700 kb and still look of lower quality then the one in the link. Am i missing something. some trick or anything??
You want to know how to compress images? Go download a decent image viewer (Irfanview) or editor (Paint.NET) and go to town! The background for the site you linked is a 171kb jpeg file; that's peanuts for a half-decent internet connection.
usually when you save an image as a jpg, you have the option to specify a 'quality' rate. If you look at the image in the site you linked, the background image, even though it's really big, it's only 170K. To me, the magic number to save a JPG is 90% quality.
ADD: Also, if you use Irfanview, you can add a plugin called 'RIOT' that compresses images even further (I think you can also get it as stand-alone or something) http://luci.criosweb.ro/riot/