How does Apple do it?

I have a lousy internet connection, but If I go to the apple web site, they can display beautiful, crisp, full screen images that download within seconds. Does anybody, know how thy are able to do this? Do they use some proprietary compression algorithm? I live in the sticks and can’t get fast broadband, so I have to rely on a faint signal from the 3/4g network here, but despite this the Apple web site is able to serve up beautiful , crisp images that don’t take days to display. Any clues how to do this.

Pure HTML, probably. Look in the developer console of your browser. From what I see, the index page that displays in a snap is an HTML page, and the picture of the watch (today) seems to be served as a standard HTML element, plus CSS style.

You can probably obtain very fast display like that by using the WebImageView with preloaded images served through a URL instead of dragged into the project. Or even by displaying images placed on a server in WebHTMLViewer.

You also may want to read about how to optimize pictures for the web. As a matter of example, a GIF image can be sized in kilobytes, whereas a PNG will count in megabytes. On a slow connection, it is far from being negligible. Google “picture optimization”. There are many free online services that enable reducing the size of pictures with little visible loss.

As for the crisp images, they have nothing to do with ordinary, and everything to do with what the best photographers money can buy, plus the best creation studios available can come up with. That is the privilege of the most profitable computer company ever.

I have a lousy internet connection…

Also, if the web server that send the data to you (everyone) send them fast, they will come as fas as your lousy internet connection allows it.

Of course, if the web server is slowser than your internet connection… data will appears slow as hell on your end.

This apply to a fast internet connection too.

Apple almost certainly caches their website via a content delivery network (Akamai for example) all over the world. So the reason you are getting nice images fast is that they are not coming from Cupertino, CA but likely from a server not far from you.

A quick nslookup shows
images.apple.com.edgesuite.net.globalredir.akadns.net canonical name = a199.dscgi3.akamai.net

akamai is a content delivery network with data caching servers all over the world. If you have images that you want delivered fast, use akamai. Rackspace CDN uses akamai.

http://www.rackspace.com/cloud/cdn-content-delivery-network

Chris, if you did not make 7.7 billion dollars profit in June, maybe the Akamai solution is a bit oversized for your needs.

You may want to read this thread : https://forum.xojo.com/11860-speed-up-image-loading

And this :
http://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips

And you may want to play with this :
http://www.imageoptimizer.net/Pages/Home.aspx

As a comparison, here are the sizes for the very same ShuttleLaunch image taken from the Xojo examples :
Original jpg 111 KB
gif 119 KB
PNG 412 KB

Moral is :

  • Use pictures by their URL, not dragging them into the project
  • Display them in WebImageView rather than draw them in WebCanvas
  • Unless it is absolutely necessary, don’t use PNG. JPG or GIF is a gain in speed of 4 times, just by the simple size of the file. It is like the speed of optic fiber against DSL.

You should give a try to cloudflare, they has a free plan, I have sites (with low demand) on it, sometimes has down but the GTmetrix gave me high performance.

Before using the JPG file format, one have to read JPEG and be prepared for its use (most notably trouble is quality vs size. If it is only for displaying purposes, read the wikipedia article and do accordingly

If the image file will be printed or later modified, just avoid any compression shema (do not use JPG) ! But this is (certainly) out of your question point of view.

Keep in mind that Apple’s website is mostly white, and large areas of solid color compresses very well. They also reuse images and use CSS better than just about anyone else on the web. Combine that with a CDN and you almost can’t lose.

Just FYI. The Rackspace CDN is very inexpensive. It’s something like 10 cents per gigabyte of data.