Reduce loading time of heavy images in html5

Question

I am trying to upload heavy ong images on a website. I tried using the photoshop -> posterize method to reduce the file size of large png, and then some online tools to reduce the size of the png file without seriously compromising the file size. I tried preloading the images, but still they take a considerable amount of time to load.

Can anyone suggest me a way to reduce the loading time of png images on a website so that they load quickly?

Thank you very much in advance!

Answer 1

Even if you follow all / some of the previous tips, a good addon to your workflow transfers all your PNGs through PNGoptimizer .

This is a simple drag and drop program that removes unnecessary information from your PNGs. Depending on the type of image, the storage size depends on 5-10% and more than 70%.

Answer 2

Try preloading using XHR and some server tricks. Or use the webp format.

Answer 3

Your problem should be elsewhere.

At best, 79kb x 5 is less than 1/2 a MB. This will be a slow load on a slow connection.

I suggest you install YSlow ( http://developer.yahoo.com/yslow/ ). It analyzes web pages and offers ways to improve their performance based on a set of rules for high-performance web pages.

Answer 4

There is a good JS script to facilitate image preloading: https://github.com/jussi-kalliokoski/html5Preloader.js

Also remember that proper caching is a MUST for heavy sites. Google has a good introduction for this purpose: https://developers.google.com/speed/docs/best-practices/caching

To avoid blinking images on your site, upload low resolution images with fast download times, stretch them to full size and replace them when uploading high resolution images. To improve optics, you can also place the grid in a low-resolution image.

This is a pretty pleasant look for the visitor and reduces waiting time.

Answer 5

Depending on which server you have, I use a common image for all my .net sites.

http://our.umbraco.org/projects/website-utilities/imagegen

<img src="/ImageGen.ashx?image=/images/an-image.png&amp;width=50&amp;height=50" width="50" height="56" alt=""> 

Answer 6

Photoshop Posterize will not help you; PNG does not use the palette (unless you select PNG-8). You can use File-> Export for Web to export a smaller PNG (or gif). If your image contains alpha information, it will be lost if you export to the Internet. PNG-8 and PNG-24 have index transparency.

Answer 7

@ShrutiJakhete you can use lazy jQuery loading with your HTML5. Images outside the viewport will not be visible until you scroll down the page. Thus, it will reduce load time. Check it out http://www.appelsiini.net/projects/lazyload