Answered: Whats the most optimal way to load images with ST2
Answered: Whats the most optimal way to load images with ST2
Hi
I Wanted to know the fastest way to load an image, shoud I keep them all in one folder and upload them with my file ? or have them stored some where else like flicker and called the through http//.
On the O'Reilly example the images for the speaker are set as a background image is this better?
Definitely use bg image whenever applicable. It can also yield savings in DOM size (very important in the mobile world)
Mobile browsers have stricter limits regarding number of connections and pipelining. This means, the fewer files to download, the better. That's why it can prove beneficial to store bas64 encoded images in css, given they are icons and not huge photos.
Further optimization is using image sprites (many small images in one, then use background position to select the appropriate image). This goes along with what I mentioned above as you can combine multiple images into one (less files, fewer connections).
Another improvement you can make is to keep images (css/js, too) on a cookie-less domain. Some use domain sharding, in other words having multiple subdomains for images, to increase the connection limit, but it's up to you to find a good fit for the project.
On the side note, connections are expensive. Mobile safari will open six connections for the first six requests, then take advantage of pipelining by filling up each of the connections to the max. Not sure if you can keep it under six, but that would be kind of awesome Of course, connections are limited per domain, not per page.
Using a background image helps mostly with scaling the image to fit the container's height and width. Whenever I tried using an 'image' object the image wouldn't scale, it would only crop.
And it depends if you want the user to rely on wi-fi or 3/4G to retrieve the images or simply retrieve them from the app itself. If these images are just icons 32x32 or similar sizes, adding them all in one folder shouldn't slow today's devices down so much.
Definitely use bg image whenever applicable. It can also yield savings in DOM size (very important in the mobile world)
Mobile browsers have stricter limits regarding number of connections and pipelining. This means, the fewer files to download, the better. That's why it can prove beneficial to store bas64 encoded images in css, given they are icons and not huge photos.
Further optimization is using image sprites (many small images in one, then use background position to select the appropriate image). This goes along with what I mentioned above as you can combine multiple images into one (less files, fewer connections).
Another improvement you can make is to keep images (css/js, too) on a cookie-less domain. Some use domain sharding, in other words having multiple subdomains for images, to increase the connection limit, but it's up to you to find a good fit for the project.
On the side note, connections are expensive. Mobile safari will open six connections for the first six requests, then take advantage of pipelining by filling up each of the connections to the max. Not sure if you can keep it under six, but that would be kind of awesome Of course, connections are limited per domain, not per page.
Answered: Whats the most optimal way to load images with ST2
Of course, connections are limited per domain, not per page.
Grgur Grisogono
Reply With Quote
