I’m turning a static site into a mobile site via media queries but I realize I need to replace some images so that they’re more mobile friendly. Now this isn’t an issue with background images but full blown images in the HTML I’m not sure what the best approach is. I’ve thought about it and my options are to either load it in the initial page load and just display it none until it hits my media query or option 2 is to load it via JS and insert it into the page once the screen hits a certain width. Are there other options? Is there one preferred over the other?
Hi,
It depends on what your criteria are for the mobile image?
If you are just rescaling the image to a smaller size then you can use the same image and adjust its dimensions through css and media queries. Of course that assumes that you don’t mind serving the higher file-size image to mobile. If on the other hand you are looking for a lighter weight image in the page for mobile then setting the image to display:none will not work as most devices will load all images in the html whether they are display:none or not and you get two hits instead of one. (There are some tricks such as setting the parent to display:none instead of the image but is not consistent between devices.)
If you are talking about images for retina devices then read this article.
More on responsive images here:
http://dev.opera.com/articles/responsive-images-problem/
http://css-tricks.com/which-responsive-images-solution-should-you-use/
At the moment I prefer to use the same image optimised as low as possible and use for all devices.
Same here. If you make the image really large, but save at a very low quality, the file size is small but the image still looks good when you resize it to fit on the page—as discussed in Paul’s first link.
There are new elements/attributes coming out that handle this situation, but browser support for them isn’t wide yet, and I’m still not convinced that they are very useful.