Working with the < PICTURE > element

Pictures, graphics, and logos - this type of content is important for setting the website’s visual character. Yet, they can take up a significant part of the page load time, slowing down viewing speeds. This is especially true for slower (mobile) connections.

According to smallbiztrends.com, mobile and tablet viewers account for 60% of all of web traffic, and that number continues to rise steadily. It is vital that a web design considers these viewers. How? By optimizing images (for mobile) and using the < Picture > element to serve up the perfect version for every single viewer, every time.

So what is the picture element?

Most website images are formatted for desktop viewers with a high resolution to make them look sharp and crisp. However, these images are typically too large for mobile phones and tablet users. If the file size is enormous, you’ll end up punishing mobile viewers by making them eat up precious bandwidth to download it to their device. No Bueno!

Another common occurrence happens when big pictures with lots of details are sized down on a smaller screen. All of the intricacies of the image are lost due it becoming too squished in dimensions. Yea, you could try squinting real hard or zooming-in with your fingers, but that’s an effort most viewers are not willing to take and goes against the principles of responsive design. Using cropped, optimized versions of the image to suit various layout changes would be the ideal way to go.

Using the picture element helps to resolve these kinds of design issues. Supported by most modern and mobile browsers, the viewer’s browser selects the appropriate version of the image from your resources (say a ginormous overview picture for desktop and a cropped image with smaller file size for mobile) delivering the friendliest version suited for each viewer and their available screen size. A cute, interactive example borrowed from our friends at Google is displayed below. Resize your browser to see the cat adapt to the viewport.

a cute kitten

The picture element is not supported by all browser vendors (yet). However, RSD creates universal support using a polyfill. This means that as long Javascript is enabled, the picture element will work as explained above, even if the browser does not natively support it. For the very few that use the web without Javascript and use a non-supporting browser, the default image will be displayed.

 

Picture Compression

It’s true guys size does matter...when it comes to image file size that is. It’s good practice to design for performance and use images that are light weight. This is especially true when your site uses many images as you want the load time to be as speedy as possible. RSD will warn you anytime you add a resource that is larger than 1MB (and that’s too big really), reminding you to optimize that file.

Several factors can be considered to determine the optimal settings for your images. The most important are the file format (GIF, PNG, JPEG), image quality, and pixel dimensions.

Resizing the image to the appropriate dimensions will cut down the file size a lot. This along with choosing the best-suited file format for your needs. For example, JPEGs which are the most common file format for pictures are ideal for creating a good balance between file size and image quality. The PNG format is used when transparency is needed, usually for vector drawings such as logos. While GIFs are the format of choice when making animations.

Do you have images with text encoded on them? Reconsider your choice and see if you can recreate a similar look using the CSS controls with cool typography. This not only eliminates the need to download heavy pics but is more user-friendly making the text selectable, searchable and accessible to screen readers.

There are lots of compression tools out on the web that can help you bring the kb’s down on your images making them more light-weight for your guests. One of our favorites is Pixelmator as it allows you to resize the image, choose the right file type and when you export for the web it provides a cool slider to adjust the image quality. For all you Windows peeps, FileOptimizer is a great choice.

An important note before we get started...

The CoffeeCup responsive suite makes working with the Picture element a painless process. In the following example, we will be using the Picture element within the Responsive Site Designer using a mobile-first approach. If you are building with Foundation Framer or Bootstrap Builder, both frameworks come with their respective default breakpoints. For this tutorial we will be working with Bootstrap 4, but don’t worry, if you’re using Foundation the process is about the same.

Keep in mind that with the mobile-first approach, you will begin designing for the smallest screens first. Bootstrap’s default mobile breakpoint in our opinion is kinda large therefore we decided to add a custom (white) breakpoint that precedes the first default. The one we will add is at about 400px. Click the + arrow on the top left to add a breakpoint.

If you would like to learn more about breakpoints, we talk about them in great length here and here.

Using the Picture element in RSD

First make sure that you start with your slider located before the first breakpoint. This will setup the default layout and styles that you can then adjust throughout the different breakpoints.

Begin by adding two rows from the Layout pane. On the second row, click on Divide Column. This will split the row into two columns. Next, double-click the first column and on the Layout pane set the span (width) to 12 spans. Now it takes up the whole row. Do the same for the other column.

From the Elements pane, click and drag Heading 1 into the top row, a Paragraph into the second, and a Picture element into the third. This will will display the content as stacked for mobile viewers. Double click on the Picture element to launch the design controls on the right. Under Dimensions, select None from the Max-width dropdown. This un-restrains the image size allowing it to stretch, but only to the full width of the column.

To change the placeholder with your image, use the drop down box next to Picture to choose a Local or an Online Image. Use Local Image to add a photo directly from your computer or when choosing an image you’ve already added to your Resources. To add images to your project resources, just click Add Image/Folders from the pop-up window to browse for images on your computer.

Adding Image
Adding Image

If your pictures are already on a server, you can plug in the direct URL using the Online Image option. Enter the full address for the image. Wanna try it? Paste this link in to see the image appear: http://cup.cm/1V7RbzO

Responsify It

The real magic happens at the breakpoints. Breakpoints, represented by the little dots above the slider, are used when design adjustments are needed to to accommodate for different display widths. Using the viewport slider at the top, you see how the image resizes to fit the display widths when you slide to the right. The device gages at the top left indicates an estimate of the corresponding device type for that size screen. Considering the huge overlap in device sizes this is merely a reference point while you tweak your design.

As you use the slider and the page gets wider you’ll notice the image starts to become pretty large. At about 575px (or the first default Bootstrap breakpoint) the image increases to the point of too big. We don't want it to be taking up that much space in the page, so let’s make this layout appear a little nicer by placing the image inline with the paragraph. Begin adjusting by moving the slider to the right of the 575px breakpoint. This activates the breakpoint and is indicated by a black dot. This tells the browser that anytime the viewer’s screen is of this size to display these layout and style properties.

To make the paragraph and image lay next to each other, adjust the span settings of their respective columns. To do this, select the paragraph column and go to the Layout pane. Set the Span width (of the parent column) to 6. Then do the same for the picture (column). Now they are both side by side.

Swap 'Em

With the image occupying half of the row space, it makes sense to use a cropped version of the image, eliminating the unimportant part of the graphic while resizing it for better fit. To swap out the original image for the cropped version, we’ll first add a new photo to our resources, one that is smaller in size. In our example, the cropped photo removes the empty space on the right, pulling the focus of our attention, the cat, into the main view. Try it out with this cropped image URL: http://cup.cm/1JBzb8N

Change image at breakpoint
Swap

Now let’s get hands on and try it out. Use the slider to move between the breakpoints to see the images automatically swap between the original and the cut version.

Size 'Em

Neat, right? Let's do another breakpoint, the next one is for large tablet and desktop viewers. At around 770px (or the second default) the layout of the screen becomes wide enough that changing the picture’s dimensions seems like a more efficient option (Remember, we had cropped it before). You know the drill: Place the slider after the breakpoint, select the photo, go to the Design pane and adjust the photo selection under Picture with this URL: http://cup.cm/1V7RhaG

The header is also too small for its current resolution, and would look better with a bigger font (we changed ours in the example to 40px).

Adjusting Image Size
Inline

Focal Point Tool

Unique to RSD is the ability to set a focal point on an image. You see, images that have a lot of graphical detail, or a lot of open space, can be hard to see when viewed at smaller viewports. In our example, we used a cropped version of the photo at the first breakpoint. However, as an alternative, we could have adjusted the focal point settings.

Design pane. Under Image Settings > Focal Point check the Enable box. Use the focal point slider bar to zoom-in on the photo and the various directional arrows to reposition the image.

Adjusting focal point
Focal Point

Use this control to zoom-in on a specific section, which is great for smaller displays. You can see another example of this in action » with the photos of the Gatekeeper. You’ll notice as you make the browser skinnier, the image will bring into focus his hat, thus cutting out the less important part (background) of the image. Keep in mind though, that cropping and reducing image size is a bit better practice...

Time to see all these settings in action. Hit the Preview button at the top and slide-on!

 

The Picture Element vs Background Images

This is one of the most common questions we get with regards to pictures. Yup, we often see people attempt to use the picture element and make it stretch as a backdrop. However, this image does not use the picture element. Instead, the image would be configured on the background of the row thus allowing content elements (headers, paragraphs, other pictures, etc.) to be placed on top of it.

Select the row and from Design pane > Background you can add the image. Then check the both Auto boxes under the Dimensions set the Width to Auto, Max-Width to None, Max-height to none and then set the Min-height to the desired dimensions. For more details on this action check out our tutorial regarding fixed backgrounds.

Congrats! You’re now a master of the Picture element!

I’d love to hear any feedback you have on this article or if you have any requests for other write-ups. Just hit me up on twitter or leave a note in the vibrant CoffeeCup forums or at the CoffeeCup Facebook page. Want to share this article? Please go wild with any of the buttons at the top of the page, Twitter, Facebook, Pinterest or Google+ are all good to me!

Hold up one more thing...

Now that you are a master at this cool element, you’ll probably want to start making awesome sites with is using our tools. So I’m hooking you up! Save big on the whole Responsive Design Pack!

Own all the apps to master responsive design. This value bundle has everything you’ll need to visually design stellar sites, photo displays, forms, and newsletters that are a pleasure to view and use at any size. Plus it includes tons of sweet, customizable themes.

Get the whole enchilada
available for mac and windows