Search code examples
webimage-sizeweb-testing

How can l boost up my website that contain too much png images?

I have too many png images in my website. How can I load my website fast? I have minified html css and js files, but it still doesn't work. :(

Solution
    1. Convert to jpeg, if it is feasible. Jpeg is not lossless, so the quality will worsen, but on pictures having many transitions and only a few sharp edges (i.e. photos) it is practically invisible.
    2. Optimize the pngs. There are many png optimizing software on the market.
    3. Finetune the cache headers on the server side. It is possible that your web server doesn't sends valid caching headers and thus forces the browser to reload the images again and again.
    4. Finetune your html and css. It helps a lot, if the browser knows the size of the png (from the css) before it would be even loaded.
    5. Analyze your traffic. Where is the weak point? Does it need to load too many traffic (so your page is too big), or the browsers need to many cpu cycles to render them? Check with some tools (there are also a lot of on the market), what is your browser doing while loading your page. You could even see this in a windows task manager. Does it use 99% cpu, or much fewer?