Cache only the necessary images in webapps
===

I have this in the head section of `index.php`:

    <link rel="apple-touch-startup-image" href="images/screenLD.png" media="(device-width:320px)" /><!--iPod/iPhone Portrait LD 320x460-->
    <link rel="apple-touch-startup-image" href="images/screenHD.png" media="(device-width:320px)and(-webkit-device-pixel-ratio:2)" /><!--iPod/iPhone Portrait HD 640x920-->
    <link rel="apple-touch-startup-image" href="images/screenPortraitLD.png" media="(device-width:768px)and(orientation:portrait)" /><!--iPad Portrait LD 768x1004-->
    <link rel="apple-touch-startup-image" href="images/screenLandscapeLD.png" media="(device-width:768px)and(orientation:landscape)" /><!--iPad Landscape LD 748x1024-->
    <link rel="apple-touch-startup-image" href="images/screenPortraitHD.png" media="(device-width:1536px)and(orientation:portrait)and(-webkit-device-pixel-ratio:2)" /><!--iPad Portrait HD 1536x2008-->
    <link rel="apple-touch-startup-image" href="images/screenLandscapeHD.png" media="(device-width:1536px)and(orientation:landscape)and(-webkit-device-pixel-ratio:2)" /><!--iPad Landscape HD 1496x2048-->

And this in `cache.manifest`:

    CACHE MANIFEST
    
    index.php
    
    images/screenLD.png
    images/screenHD.png
    images/screenPortraitLD.png
    images/screenLandscapeLD.png
    images/screenPortraitHD.png
    images/screenLandscapeHD.png

But we can easily understand that an iPhone user will need to cache 5 other useless big images.

How can I do so that he only caches the images he will need?

---
<sup>BTW, for those who want splash screen code that work on every apple device, mine is perfect.</sup>