Let’s Talk About Responsive Images and Performance

Images have a starring role on the web. Photos and graphic elements often account for 75% of page weight. People abandon websites that have long loading times, so image strategy absolutely needs to be a part of an overall content strategy.

As a designer, you need to know how to set standards for how images are used on your company’s website. Jenn Lukas will help you do that. Her expertise comes from working in front-end development for over a decade. She’s watched the shift from spacer gifs to full-bleed hero images. Jenn has some innovative ways to get around common problems with images and overall site performance.

Make image strategy a part of your content strategy

• Identify areas to use browser text and CSS effects for enhancing your site and avoid extra server calls and page weight
• Determine when to use which image format

Create a performance budget to help shape your site experience

• Set your budget based on your customer needs
• Base your performance budget on standards such as the speed index, load time, and the 20%-rule

Load different images depending on your customer’s screen size

• Employ techniques, such as the picture attribute, that will help you avoid loading multiple sizes of images on a device
• Decide when it’s beneficial to use retina images and when you should sacrifice quality for speed

Examine creative solutions to reduce image load implementation on the web

• Consider using CSS and animation or SVG instead of traditional graphics
• Use logo enhancements to preserve the quality of your logo without adding to your page weight

This seminar is appropriate for beginners all the way through expert-level designers. Watch this seminar to learn how to implement responsive images, overcome the challenges around their performance, and effectively implement them in your image strategy.