Although many questions similar to mine have been asked before, I believe my situation is slightly different. I have recently created a mobile app using JQM + Cordova/PhoneGap.
In the beginning, I utilized large images aimed at retina display devices and employed responsive css to adjust image size as necessary. However, this method caused older devices to download oversized images, resulting in unnecessary processing overhead due to their lower capabilities compared to newer retina devices.
Aiming for faster loading times, I made a switch to using css background images instead of HTML tags, based on recommendations that background images load quicker as everything is loaded within the css first. I then implemented css3 media queries as follows:
@media
(-webkit-min-device-pixel-ratio: 1),
(max-resolution: 163dpi) {
.pic #point1 {background-image: url(../img/baby/nonretina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 326dpi) {
.pic #point1 {background-image: url(../img/baby/retina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}
However, I now find myself facing a new issue with the abundance of images present in my app (hundreds in total). As a result, my css file is growing significantly in size. With the necessity of loading the css file on the initial page/view (index.html), I am concerned about potential delays in app load time. Should I continue with this current method or consider reverting back to the original approach?
I am starting to question whether having a bulky css file filled with numerous media queries is truly the optimal solution for optimizing images across both retina and non-retina devices within my app...