[ad_1]
When it comes to responsive design on the web, images have historically presented a major problem: how do you create an image-driven website that quickly scales to the size of a viewer’s screen, without slowing down the site’s loading time and risk losing visitors? Keep in mind that your images will not only need to fit each large screen, but will also need to work effectively on each smaller screen. The first step to solving this problem is image optimization. The next step, however, begins with understanding how browsers interact with those images. Optimizing images for responsive design requires that those images quickly scale to fit desktop, tablet, and phone screen sizes. There are a couple of solutions that have been commonly implemented by the industry and, while neither is perfect, they do allow web developers to effectively follow responsive design principles.
The Old Way: Scaling Images in Code
The most popular method for preparing images for a responsive website is to scale those images in code. Setting the “max-width” property to 100%, for example, will scale the image with the screen size, but prevents it from becoming larger than it’s biggest dimension and forces it to remain within its container. You can see an example of this code below:
img {
max-width:100%;
height: auto;
}
We do not, however, recommend the less flexible method of scaling an image in code: setting the image dimensions statically with the “height” and “width” attributes. While the “max-width” property solution is widely used, it does comes with a few drawbacks. The browser is still required to download an image larger than it may need, slowing down your site and using up bandwidth and extra CPU resources. In addition, simply scaling an image up and down in size can be a problem when the image becomes too small to be seen as intended – for example, a detailed image or photograph may lose its impact or purpose when shrunk down for a phone screen. However, if this method is chosen then SVG formats (vector graphics that can scale without losing quality) are preferred over JPG or PNG (raster graphics that lost quality when scaled).
The New Way: New HTML Markup Saves The Day
In an effort to solve the inherent problems with scaling images in code, a community of developers, including the Responsive Images Community Group, helped to create new HTML markup meant for images on responsive websites. One element of the new markup, the “picture” element, allows developers to declare multiple sources for an image, thereby giving them control over when and if those images are presented to the user. This prevents the browser from downloading images larger than it needs, because it is instructed as to which image to download. It also allows the designer to crop images for smaller screen sizes or deliver a completely different image if necessary to prevent detailed images losing their purpose at smaller sizes (known as art direction).
Other parts of the newly created markup, like the “srcset” and “sizes” attributes, add to the “picture” element’s power. These attributes extend the already existing “img” and “source” elements to provide a list of available image sources and their sizes, allowing the browser to pick the best image source and download only what it needs. You can see an example of this code below:
<img src="https://www.liquidweb.com/blog/optimizing-images-for-responsive-design/small.jpg"
srcset="https://www.liquidweb.com/large.jpg 1024w, https://www.liquidweb.com/medium.jpg 640w, https://www.liquidweb.com/small.jpg 320w"
sizes="(min-width: 36em) 33.3vw, 100vw"
alt="A properly sized image">
The main drawback of this new HTML markup is that it’s not yet supported across all browsers, so visitors using older or less popular browsers may not see the correct image. For example, the “srcset” attribute is fully supported by the following browsers:
- Firefox, versions 38 and later
- Chrome, versions 39 and later
- Opera, versions 29 and later
- Android Browser, version 40
- Chrome for Android, version 42
You can use the “Picture polyfill”, a small Javascript library, to add support for the new responsive image syntax to older browsers that don’t support it. If you want to see which browsers support the new markup, the website CanIUse.com provides up-to-date information on what desktop and mobile web browsers support specific parts of HTML, CSS, and code elements of other front-end web technologies.
Neither is Perfect – Pick What’s Best For You
Because neither solution is ideal and both come with potential drawbacks, making the choice between these two methods depends entirely on personal preference, what audience you’re delivering to, the context of your site or application, and what browsers you need to support. A project that doesn’t need to support all browser versions might have no trouble utilizing the new markup, or a combination of the methods might even be ideal. Utilizing these techniques will ensure that your server is delivering the best and most relevant image to your site, as efficiently as possible. Of course, don’t forget to properly optimize your images for the web prior to using them! If you have any questions, our Heroic Support® is available 24/7/365.
[ad_2]
Source link
