Responsive Images

Responsive design is all about the ever growing number of mobile devices that individuals can view a website on. Creating a fluid grid system to adapt to these different screen resolutions and widths is a major undertaking. CSS3 and modern browsers have made it easier to migrate away from image heavy websites; however, photos speak a thousand words and clients will want larger header images or photographs. Obviously an image can ruin your responsive design, without this quick CSS hack.One of my main projects has been building a responsive and modular WordPress theme framework. The CSS is simple and works with the img tag having proper width and height attributes set.


.responsive-image {
  max-width:100%;
  height: auto;
}

That's it. Apply this to large images you need to scale and keep proper formatting despite browser size. My grid has a maximum width of 1180px. I then utilize images that are 1200px wide and allow them to respond to their parent elements width, which is affected by my responsive CSS. Extra thought: More often than not these images are probably JPEG, and they might be a little large. Always check the download time when using Photoshop's "Save for Web" option. Also make sure to choose Progressive versus Baseline. There's a whole slew of what is better but in my honest opinion progressive is better. The JPEG downloads in layers versus all at once allowing the user to see an image more quickly, even if the quality is not 100%.

Want more? Sign up for my weekly newsletter