stern is a leading Inbound Marketing Agency Located in Aurora Colorado.
One of the biggest problems with mobile compatible responsive website design is image sizes.
Gone are the days when we could just slap an 800 by 350 pixel banner image at the top of our website page and expect it to be mobile compatible.
Using CSS Media Queries it is possible to load an entirely different image based on the current screen width of the browser. NOTE: THAT is really what responsive website design is. A smartphone has a small width, a tablet has a bit larger, and desktop computers can reach HD quality and beyond.
The secret is not NOT load the image using a standard HTML img src tag, but to use CSS to load the image as a background for an area DIV.
Now, applying media queries can change the rules for screen width to load different images.