Responsive Images for Responsive Designs

Today we are going to talk about Responsive Images. Responsive Images is a very useful technique to make your designs look good regardless the user’s resolution screen.

Nowadays when we create our online projects we want it to look good on every device. Desktop, Mobile Phones, Tablets, you name it.

Responsive Images

With HTML you can use two different approaches to accomplish this and I will teach you how do implement it and how can you make it cross-browser and make it work with older browsers.

Why Responsive Images?

With responsive images you can delivery the image with the best fit for your user’s screen. Why delivery a 5mb image when you can delivery a 3kb image for your user that is accessing your website on his phone? Your user will see your content faster, will navigate through your content faster and will use a lot less bandwidth which will save you a few bucks.

  • Faster navigation.
  • Bandwidth savings.
  • Most of us don’t live in a world where we don’t have to care about 4G data consumption.

The <picture> element

The syntax like this:

See the Pen Responsive Images for Responsive Designs #1 by Igor Escobar (@igorescobar) on CodePen.

Notice in this example I’ve used ImageBoss to crop the smart crop the original image for desktop, tables and mobile phones. I’ve used it because I not only want to delivery images with proper sizes but they are also compressed and delivered with Progressive Scans.

Notice that you open the code pen above and resize your window the image will change it accordingly to your window size.

The <img> element with srcset and sizes attribute

If you don’t like the approach above you can also use the <img> tag with the srcset and sizes attribute.

See the Pen Responsive Images for Responsive Designs #2 by Igor Escobar (@igorescobar) on CodePen.

Browser Support

Notice that both the <picture> and <img> approach are only implemented on modern browsers as you can see on the image bellow:

More Info: https://caniuse.com/#feat=picture

Cross-browser Responsive Images

If you are concerned on how this is going to work on old browser you can use a very cool project called Picturefill. It will basically wraps the W3C specifications for img and picture with javascript to make it work.

How to generate multiple images with for multiple screen sizes?

In this very post I’ve used ImageBoss to generate the images for all the devices I wanted. I didn’t need to generate all of them by myself and also didn’t need to code nothing specific for it. All I needed was to have my image stored some where and it did the heavy lifting.

Hope it helped!

Posts Relacionados:

On-demand Image Resizing API

Hello guys. Today I’m going to share with you a very cool project I’m working on. Its main mission it is to apply all Web Development Best Practices applied for images and combine it into one simple but powerful API.

It’s called ImageBoss. And my objective today with this post it’s to help you to understand why ImageBoss and how simple it is to do image resizing or image cropping with any kind of image.

First of all, if you have an website (or an app) with posts, news, galeries or dealing with user generated content in general it can be a huge waste of time if all you want to do is to focus on your business.

Usually, you have to create a new machine and optimize this web service to handle huge payloads, optimize its storage to fast access, increase timeouts to be able to fetch all the information, handle security, conversion, compression and then you have to code a routine to generate thumbnails and resize your images in all kind of different formats you need (or may need) to be able to beautifully display those images on your app or website. After doing all that, you still need to sign up for a CDN so you can put your assets closer to your end-users to reduce latency and download speed.

It should be the dream, right? but we have to be honest… not all of us have the time, resources and the patience to go this further and do it all over again for each product or client you have.

That is why ImageBoss is here. It does it all for you. Image Resizing, image cropping, image filters, image conversion and then caching it to one of the most popular CDNs in the world, CloudFlare.

Image Resizing

First of all to be able to keep up you need to go to the ImageBoss website and setup your account: https://imageboss.me/. (~30secs)

After login in, on your dashboard, you will be able to see this screen:

All you need to do is to add all the sources/hosts that identifies your traffic. (You can add as many sites as you want).

On this example I will use this image:

Its url is: https://storage.googleapis.com/imagens-clubedocodigo/institucional/head-exibition.jpg

Imagine that you want to generate a custom version of that image to be able to show it on a mobile device with 745×200.

In that case I will use an ImageBoss operation called “cover” with all the default settings. You can read further by following this link:
https://imageboss.me/docs/operations/cover

Basically, all you need to do is add a prefix to the original URL:

https://img.imageboss.me/cover/745x200/

And the final URL should be:

https://img.imageboss.me/cover/745x200/https://storage.googleapis.com/imagens-clubedocodigo/institucional/head-exibition.jpg

The generated image would be:

Notice that ImageBoss has Smart Cropping by default.

Use cover when you want an image with an exact width and height. By default we’ll run our Smart Cropping algorithm to identify the main subject of the image, so in case we need to remove part of the image to deliver on the requested size, we will always try our best to keep the most important element in the frame.

In addition to all that it auto rotate my image if necessary and it also convert my image to have progressive scans (progressive JPEG). Now my image is auto rotated, compressed, cached, progressive scans, and globally available to all my users.

I guess that our boring days generating thumbnails manually for every single project is over, right?

Let me know what you guys think!

Posts Relacionados: