Blog» Concrete and simple examples for responsive HTML images

Concrete and simple examples for responsive HTML images

By Philipp Kamps  | November 22, 2018  |  User experience, Web solutions

In HTML you can implement responsive images. That means that you specify multiple image variations (lower and higher resolution images) and let the browser pick the best fitting image for the given screen size. For a responsive website you want to render large images (higher resolution) on bigger screens like a desktop PC screen, and smaller images (lower resolution) on mobile phones.

Higher resolution images on larger screens will present an image in a good quality. Lower resolution images load faster and in most cases are sufficient when rendered on smaller mobile screens.

The HTML specification solves that problem with the HTML picture tag and the HTML img attribute srcset. The spec is fairly complex and allows a wide range of configurations. The following video presents a few concrete and simple examples to help get you started with responsive images. The video covers following aspects:

  • Showing 2 different approaches for responsive images with an <img> tag by itself and then with a <picture> tag and <source> tags
  • Specifying multiple image paths and widths in the "srcset" attribute
  • Images by breakpoint, where order matters
  • The "sizes" attribute of the <img> tag and a simple example of how it works
  • Higher resolution images for retina / high pixel density displays: "2x rules"
  • Using the lazysizes library for lazy loading images
  • Using a placeholder image source before the actual image is loaded
  • Automatically determining the available room for the image as the screen size changes

Join our mailing list for news, events, tips, and tools

Related Blog Posts

Image optimizations in eZ Platform and Symfony: JPEG quality and stripping image metadata

Your eZ site might be serving megabytes of unnecessary image data on every page load. Do your users and your SEO rankings a favour: strip image metadata...

Read more »

How to make the Facebook Page Plugin fully responsive

Adding the Facebook Page Plugin to your website is a great way to feature your community's activity on the world's largest social network. In most cases,...

Read more »

Image aliases and filters in eZ Publish 5.4+

As of eZ Publish 5.4 / 2014.11, there is a new way to define custom image filters and image aliases. This is because image alias generation is now using...

Read more »

Exact image resizing in eZ Publish with custom image filters

eZ Publish comes with a useful set of image settings, and has a powerful framework within which you can define custom filters to be executed by the image...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2018 Mugo Web. All rights reserved.