Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

460 LESSON 16: Using Responsive Web Design


Output ▼


Making Images and Videos Responsive


Images and videos can be difficult to make responsive because they can end up being
huge and thus slow to download. Plus, most HTML instructions say that you should
always define the height and width of your images and never let the browser resize them
for you. Thus, making a responsive design means making a few choices; no matter what
you choose, there will be someone who loses out. There are three ways you can deal with
images in a responsive web design:
n Use the images as you normally would, defining the width and height and creating
images that are the right size for your standard design.
n Set the image width to something flexible, and save the image in a large file size so
that it can flex to fit large and small screens.
n Change the images that display depending upon the device that is viewing it.

With the first method, the losers are typically small screen devices because web design-
ers usually build their pages to look good on desktop machines. So, the images are either

FIGURE 16.6
The layout on the
iPhone has one
column again.
Free download pdf