Question

I’m fiddling with the iOS startup image.

Both tutorials I found

http://mathiasbynens.be/notes/touch-icons
https://gist.github.com/472519

are using .png images for the splash screen. I have tried to reduce my png files size, but for the large splashscreens, I’m well over 500k, which is too much for me. So I tried using jpg, which also seems to work, but I’m not sure I’m doing the right thing when switching from PNG to JPG.

Here is my code for inserting the splash screen (lost the link to the original author… 🙁
It’s inserted as script, because iOS is said to load every specified image although only one image is needed. The script ensures only a single splash screen is inserted into the DOM and thus avoids unnecessary http requests.

<script>
   (function(){var a;if(navigator.platform==="iPad") {
       a=window.orientation===90||window.orientation===-90 ? 
          "landscape.jpg" : "portrait.jpg" 
       } else { 
         a=window.devicePixelRatio === 2 ? "retina.jpg" : "startup.jpg"
       }
    document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')})()   
</script>

My questions:
1. Should I use JPG over PNG to cut down on file size?
2. How can I reduce my PNG file size? (I used optipng, but 20% of 800k is still 640k)

Thanks for hints!

Answer 1

I use JPG files on my site and they work just fine. Just make sure you optimize for web when you save, and make sure the image dimensions are exactly correct. See here (the page mainly talks about splash images for an actual native app, but the information also applies to web apps): http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html