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.
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.
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.
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
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.
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