FLUID IMAGES Being friendly to computers and mobiles, don’t discriminate.

SIZING! When putting a picture in you want to specify it not by exact pixel sizes (unless you have good reason to) instead you should try to put it by % size. EX:

Images with that scale will adjust to the size of the window, it will always attempt to show its native size but only if there is enough space in the html container

THERE ARE LIMITATIONS A large image (over ~ 420 pixels wide) will increasingly dominate the document as the viewport shrinks down, as its native size is greater than the width of most smartphones. Scaling means that the image won’t be cut off, but it may be large relative to text at small viewport sizes. The initial layout and setup of the document is affected: because you are not setting the image’s height and width explicitly in the CSS, the browser cannot reserve any space for the image in the page. This will often cause the layout to “pop” when the user visits the page for the first time, as fluid images are loaded and forced to fit into their newly determined size. Unless the image is already the full width of its container, this approach does not work well for HiDPI/Retina images: the image’s “actual size” will be shown as twice the width that you want it to be.

A BETTER BUT MORE COMPLICATED SOLUTION You can also calculate the native size with the browser window size. Say you have a 1200 pixel wide window, and your native size is 500 x 300 you simply do 500 / 1200 * 100 = 41.66% This way the image will remain in scale with the text.

IMPROVING BROWSER PERFORMANCE To maximize the browser’s performance you should also state the height in the same line, as seen on the past examples with the: ;height:auto Right there