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!
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
Related
I'm making an app using Swift in Xcode. I have a few buttons and images on one of my View Controllers. I am using high resolution images, but I noticed that they pixelate to the point where it is visible to the naked eye. There are some questions that I have found pertaining to the resizing of images, but none regarding immediate pixelization. I was hoping someone could help. Below are two images. The first is an image (a screenshot) from my app and the second is an image (also a screenshot) from another app that is not mine. The icon on the other app is smaller, but despite this is less pixelated.
have you tried using svg instead of jpg (lossy) or png(lossless)? It would seem that this would be the way to go, since you can expand to perfect definition on all resizing screens. svg uses code instead of an image format that can be lossy and given the examples you have posted would solve your issue.
you can use paint code for more easy worked , with paint code you can export svg
I figured it out. I just had to increase the dpi
In one of my project I need to reduce the app size. So I was thinking of removing all of PNG images from the source and replace them with SVG or UIBezierPath icons ( created by PaintCode ).
So I was wondering does it help to reduce the app size ?
And also will it also help to improve app performance by any chances ?
Meanwhile, please don't recommend to compress my images, cuz all of them are already compressed to the maximum. I'm just thinking of some other option rather than using png icons.
I have some images which are huge in size and my bundle size currently is 70 MB. I think Xcode already runs the assets through png crush.
Do not use any text images with useless effects, use UILabels instead.
Draw simple shapes and effects using CAShapeLayers instead of using
images.
Use JPEGs instead of PNGs where you don't need transparency.
(Actually file size depends on the image content here)
Use Save for Web option in PhotoShop or other tools to optimize PNG
images.
Use sprites combined together instead of separate images.
Make sure you delete all unused resources.
Do not localize common parts of the images, localize only the
different parts. (think of a background image with a small flag at
the bottom for each locale. use one single bg image and separate flag
images. localize flag images only, not the entire bg images with the
flags.)
Use the same splash images for iOS7 and previous iOS versions. (You
need to manually edit the JSON file in .xcassets)
Try using a CDN to download assets on the first launch.
In addition to images keep those in mind too:
Try replacing custom fonts with default system fonts if you don't
need them really.
Use MP3 audio files instead of WAV files. (or other
compressed formats)
Make sure you delete all unused 3rd party frameworks.
You can try converting the images to jpg (if they don't have any transparent regions).
Also try using http://imageoptim.com/
It seems very unlikely that you actually need huge images. After all, the screen is not huge. Thus, the most likely form of size reduction is to reduce the physical dimensions of the images to the size you are actually going to be displaying.
This saves bandwidth when the user downloads the image, reduces the size of the app on the user's hard disk (the device), and also saves memory at the time an image is loaded. It is a vast waste of RAM to load an image that is larger than the size at which it will be displayed; after all, remember, the memory involved rises exponentially with the square of the difference.
One option is to host the images on a CDN like OpenText and fetch them as part of app initialization, or whenever they are first needed. Obviously this is more coding, but projects like SDWebImage make it pretty easy:
https://github.com/rs/SDWebImage/tree/master/SDWebImage
It also gives you the flexibility to swap out those images later if you use caching headers.
I am going to work on client application, in which he need to have whole app locally resources loading, and I have almost 70mb images files for iPad. I am going to start development soon but before that I need healthy suggestion and guidelines to reduce my app size with these images use locally. I don't want to make this heavy size like any 3d game? So I am looking for suggestion what should I do? Thanks in advance.
There are few ways:
zip all the image resources in the bundle. On first launch, extract that zip folder into documents directory and refer the image from there only. You will have to do it on first launch only.
create jpeg version of your images with some reduced quality. Apart from icon and splash, you can use jpeg version of images.
If possible, use 1 pixel width/height images for repetitive gradients.
Last time I saw someone asks why Safari on iPad doesn't show some 1920x1440 jpeg with real size & I solved that puzzle. You have to use a progressive-encoded jpeg. However, I find another different problem.
Say, demo.jpg is a progressive-encoded jpeg with 2000x3000 & I upload it to my website. I then access it via url ...demo.jpg, Safari will show it with 2000x3000 size, perfect.
Now I make a most-simple html file named mypic.html. This html has only img tag with src=demo.jpg or src=demo.jpg width=2000 height=3000 inside body. Now I access it via url ...mypic.html. This time Safari show a very small icon of a question mark?
Does anybody know why the latter case fail?
The problem is about the memory available to Safari. The total amount of RAM is just 256MB, and Safari stops showing the image of much smaller size. You need to scale them down.