Table of Contents

• What are CSS Media Queries?
• Steps to follow
• The Syntax
• Practice Projects
• Conclusion

Topics to discuss at a glance:

You can watch this tutorial on YouTube as well if you like:

What are CSS Media Queries?

CSS Media Queries allow you to create responsive websites across all screen sizes, ranging from desktop to mobile. So you can see why it's important to learn this topic.

Here's a demo of the magic of Media Queries 👇

We'll build this in project 2 below. This layout is called the Card Layout. You can see more Layout Examples here!

How to Set Up the Project

For this project, you need to know little bit of HTML, CSS, and how to work with VS code. Follow along with me ->

1. Create a folder named "Project-1"
2. Open VS Code
3. Create index.html, style.scss, and main.js files
4. Install Live Server and SASS Compiler
5. Run Live Server and SASS Compiler

HTML

In HTML, write this code inside the body tag 👇

 <div class = "container"></div>

We also need to see the exact size of our window. Here's a demo of what I mean:

So, write this line inside the html file:

  <div id="size"></div>

What is SCSS?

We'll Use SCSS, not CSS. But..... what is SCSS?

SCSS is a pre-processor of CSS which is more powerful than regular CSS. Using SCSS we can ->

1. Nest our selectors like a branch of a tree and better manage our code.
2. Store various values into variables
3. Use Mixins to stop code repetition and save time

And much more!

In our SCSS, we'll remove our default browser settings, and we'll change box-sizing, font-size, and font-family like this: 👇

*{
  margin : 0px;
  padding : 0px;
  box-sizing : border-box; 

  body{
    font-size : 35px;
    font-family : sans-serif;
  }
}

Don't forget to set the height of the .container class. Otherwise we'll fail to achieve our desired results:

.container{
  height : 100vh;
}

Remember the additional id we wrote in HTML? We'll style it and position it in our browser here:

#size {
  position: absolute;

// positioning screen size below our main text
  top : 60%;
  left: 50%;

  transform: translateX(-50%);

  color : red;
  font-size : 35px;
}

JavaScript

We need to update our screen size inside our id every time we resize our window. So, write this code in your main.js file:

// 'screen' is name 👇 of a function
window.onresize = screen;
window.onload = screen;

// Function named 'screen' 👇

function screen() {
  Width = window.innerWidth;
  document.getElementById("size").innerHTML 
   = "Width : " + Width + " px" 
}

Download the images for the project

Responsive website also means Responsive Images. So we're also going to make our images responsive in this project. The images are on my GitHub repository. Here's how to get them:

1. Visit and copy the link above ☝️
2. Go to downgit and paste the link you copied
3. Follow the steps in this video 👇

And.... we're all set! Let's start coding. 😊

CSS Media Query Syntax

Here's the syntax of a Media Query:

@media screen and (max-width: 768px){
  .container{
   //Your code's here
  }
}

And here's an illustrated explanation ->

Let's divide the syntax into four sections:

1. Media Query Declaration
2. The Media Type
3. min-width & max-width Functions
4. The Code itself

To understand all 4 section of the syntax, let's start our First Project:

We'll build this. ☝️ It's a small project where the background-color changes on resizing the window by taking one small step at a time. Let's start!

The HTML

Place the following code inside your HTML, like this:

<div class = "container">

   <div class = "text">
      Hello Screen !
   </div>

</div>

The SCSS

Now, we'll store four color codes inside variables like this:👇

$color-1 : #cdb4db ; // Mobile
$color-2 : #fff1e6 ; // Tablet
$color-3 : #52b788 ; // Laptop
$color-4 : #bee1e6 ; // Desktop

You can find more colors at coolors.co if you want to choose your own.

Now, at the bottom, target the .container and .text classes. We'll also center our text like this👇

.container{
//To place text at center

  display : grid;
  place-items : center;

  background-color : $color-1;
  height : 100vh;
}

.text{
 // keep it blank for now
}

So far so good!

1. How to declare media queries

Media Queries start with the @media declaration. The main purpose of writing this is to tell the browser that we have specified a media query. In your CSS, write it like this:👇

@media

2. How to Set the Media Type

This is used to specify the nature of the device we're working with. The four values are:

• all
• print
• screen
• speech

Here's the purpose of each of the values at a glance 👇

We declare the media type after the @media declaration, like this:

@media screen

Why do we write the "and" operator?

Let's say we're placing an order at a restaurant, "A burger and a pizza". Notice that the two orders are separated by [and].

Likewise, the media type, min-width, and max-width functions are basically conditions we are giving to the browser. We don't write the "and" operator if we have one condition. Like this ->

@media screen {
  .container{
     // Your code here 
  }
}

We write the and operator if we have two conditions, like this:

@media screen and (max-width : 768px) {
  .container{
     // Your code here 
  }
}

You can also skip the media type and work with just min-width & max-width, like this:

//Targeting screen sizes between 480px & 768px 

@media (min-width : 480px) and (max-width : 768px) {
  .container{
     // Your code here 
  }
}

If you have three conditions or more, you can use a comma, like this:

//Targeting screen sizes between 480px & 768px 

@media screen, (min-width : 480px) and (max-width : 768px) {
  .container{
     // Your code here 
  }
}

3. How to Use the min-width & max-width Functions

Let's discuss the Most important component of a media query, screen breakpoints.

To be honest, there's no such thing as a standard screen break-point guide because there are so many screen sizes on the market. But, for our project, we'll follow The Official Bootstrap 5 screen break-point values. Here they are:

Here's a list of every device screen resolution on CSS-Tricks.

The max-width function:

Using this function, we are creating a boundary. This will work as long as we are inside the boundary. Here's a sample 👇

Our Boundary is 500px:

Notice how the light purple color gets Disabled when we hit above 500px.

To recreate this, write this code in SCSS:

.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}

At the bottom, insert the media query like this 👇

@media screen and (max-width : 500px){
  .container{
    background-color: $color-1;
  }
}

The min-width function:

We are also creating a boundary here. But this will work if we go outside the boundary. Here's a sample: 👇

Our boundary is 500px:

Notice how the light purple color gets enabled after we hit above 500px width.

To recreate this, write this code in SCSS:

.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}

At the bottom, insert the media query like this: 👇

@media screen and (min-width : 500px){
  .container{
    background-color: $color-1;
  }
}

To sum it up, remember that:

• max-width sets styles inside the set boundary

• min-width sets styles outside the set boundary

The code itself

Let's put our first project together!

We will have four screen breakpoints:

• Mobile -> 576px
• Tablet -> 768px
• Laptop -> 992px
• Desktop -> 1200px

Yes, we are following the official bootstrap 5 screen breakpoints. And each breakpoint will get these colors:

For four device types, we will have four Media Queries. Before touching the media queries, first let's store the breakpoint values in variables, like this:

Note: Don't forget to add the $ sign:

$mobile  : 576px;
$tablet  : 768px;
$laptop  : 992px; 
$desktop : 1200px;

And our .container class should look like this:

.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}

We're all 50% done! Now let's setup the four media queries.

But Wait...

You need to follow the proper order while writing the media queries. Start writing from the largest display to the smallest display.

First breakpoint for desktop – 1200px

For the desktop screen, write this code in SCSS:👇

// using variable here which is  👇 1200px
@media screen and (max-width: $desktop){
  .container{
    background-color: $color-4;
  }
}

And here's the result:

Second breakpoint for laptop – 992px

For laptop screens, write this code in SCSS: 👇

// using variable here which is  👇 992px
@media screen and (max-width: $laptop){
  .container{
    background-color: $color-3;
  }
}

And here's the result:

Third breakpoint for tablet – 768px

For tablets screens, write this code in SCSS: 👇

// using variable here which is  👇 768px
@media screen and (max-width: $tablet){
  .container{
    background-color: $color-2;
  }
}

And here's the result:

Fourth breakpoint for mobile – 576px

For mobile screens, write this code in SCSS: 👇

// using variable here which is  👇 576px
@media screen and (max-width : $mobile){
  .container{
    background-color: $color-1;
  }
}

And here's the result:

Take a Break

Congratulations on completing project 1! Now take a break. You deserve it.

Let's build some projects using CSS Media Queries

How to Build a Responsive Portfolio

We'll build a small responsive Website for our second project.

Here's what the desktop view will look like:

And here's the mobile view:

Okay then, let's start coding! First, let's work with the desktop view by taking small baby steps.

Before we start

Create a folder named 'images' inside our Project-1 Folder. Place all the images you downloaded from my GitHub Repository inside the images folder.

The HTML

Step 1 – Create the sections

We'll create three sections for our website. Write this code in your HTML:

<div class="container"> 

    <div class="header"></div>

    <div class="main"></div>

    <div class="footer"></div>

</div>

Step 2 – Logo and menu items

We'll place the logo and menu items inside the .header div, like this:

<div class="header">

      <div class="header__logo">Miya Ruma</div>

      <div class="header__menu">
          <div class="header__menu-1"> Home </div>
          <div class="header__menu-2"> Portfolio </div>
          <div class="header__menu-3"> Contacts </div>
      </div>

  </div>

Step 3 – Image and text

We'll place the image and text inside the .main div, like this:

<div class="main">

     <div class="main__image"></div>

     <div class="main__text">

       <div class="main__text-1">Hello 👋</div>

       <div class="main__text-2">I'm <span>Miya Ruma</span></div>

       <div class="main__text-3">A Designer From</div>

       <div class="main__text-4">Tokyo, Japan</div>

     </div>

</div>

Step 4 – Social media icons

We'll place the social media icons inside the .footer div, like this:

<div class="footer">

   <div class="footer__instagram">
      <img src="./images/instagram.png" alt="">
   </div>

   <div class="footer__twitter">
      <img src="./images/twitter-sign.png" alt="">
   </div>

    <div class="footer__dribbble">
       <img src="./images/dribbble-logo.png" alt="">
    </div>

    <div class="footer__behance">
       <img src="./images/behance.png" alt="">
    </div>

</div>

The SCSS

Step 1 – Update the SCSS

Delete everything inside our SCSS and write this code instead:

* {
  // placing Margin to left & right
  margin: 0px 5px;

  padding: 0px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
  }
}

This is what we have so far:

Step 2 – Select all classes in HTML

Select all the classes we created in HTML on our stylesheet.

.container{}

.header{}

.main{}

.footer{}

Step 3 – Select all children

Now select all the children of the parent classes.

.header{

  &__logo{}

  &__menu{}
}

.main{

  &__image{}

  &__text{}
}

.footer{

  [class ^="footer__"]{}

}

Note that &__logo nested inside .header is a shortcut of .header__logo.

Step 4 – Define the .container

Define the .container for the desktop layout, like this:

.container{

// Defining height
  height: 100vh;

  display: flex;

  flex-direction: column;
}

Apply display: flex; to .header and to the menu items so that it behaves like a row, not a column:

.header{
  display: flex;
  flex-direction: row;

  &__logo{}

  &__menu{
    display: flex;
    flex-direction: row;
  }
}

Divide each section and create borders to see what we are doing:

.header{
  display: flex;

// The border & height
  border: 2px solid red;
  height: 10%;

// Other selectors are here

}

.main{

//The border & height
  border: 2px solid black;
  height: 80%;

// Other selectors are here

}

.footer{

// Border & height
  border: 2px solid green;
  height: 10%;

// Other selectors are here
}

And here's the result:

Step 5 – Complete .header styling

Let's complete the styling of our .header section using flex-box properties and the appropriate font-size:

.header {
// height
  height: 10%;

  display: flex;
// Aligning logo & menu at center
  align-items: center;

// space between logo & menu
  justify-content: space-between;

  &__logo {
    font-size: 4vw;
  }

  &__menu {
    display: flex;
    font-size: 2.5vw;

// to put gap between menu items
    gap: 15px;
  }
}

And here's the result:

Step 6 – Add the image

Let's add the image inside .main section and create a partition for image and text.

.main {
  // image & text will act like a row
  display: flex;
  flex-direction: row;

  //The border & height
  border: 2px solid black;
  height: 80%;

  &__image {
    //Adding the image
    background-image: url("./images/Portrait.png");
    // will cover half of screen width
    width: 50%;
  }

  &__text {
    // will cover half of screen width
    width: 50%;
  }
}

The result is a bit ugly at the moment, but don't lose hope~

Step7 – Make the image responsive

Style the image to be responsive like this:

.main{
  &__image{
  //make image fluid
    background-size: contain;

  // stop image repetition
    background-repeat: no-repeat;

  // position the image
    background-position: left center;
  }
}

And here's what we have so far:

The image is responsive all the way from 4k to your smart watch screen. Don't believe me? Open chrome developer tools and test it yourself and see.

You can learn more about Background Properties here if you want to make responsive images for responsive websites.

Step 8 – Style the text

Let's style our text now. First, we'll bring it to the exact center with this code:

.main{

  &__text {
    // will cover half of screen width
    width: 50%;
    display: flex;
    flex-direction: column;

// To bring it at the center 
    justify-content: center;
    align-items: center;
  }

// To color The name 
  span{
    color: red;
  }

}

Now, let's set font sizes for the text:

.main{


  &__text{

// To add gaps between texts vertically
    gap: 15px;

// font size for "hello"
    &-1{
      font-size: 10vw;
    }

// font size for other texts
    &-2,&-3,&-4{
      font-size: 5vw;

    }

  }
}

The result looks like this:

At this point, you can remove all the borders we placed inside our header, main, and footer classes.

Step 9 – The footer section

First, resize the images like this:

.footer{
  [class^="footer__"] {
    img {
      width: 5.3vw;
    }
  }
}

Then, position the images to our desired place, with a small gap between the icons, like this:

.footer{
  display: flex;
  flex-direction: row;

// To align icons along x-axis
  align-items: center;
// placing image to the right side
  justify-content: flex-end;
// Gap between icons
  gap: 20px;

// margin to right side of icons 
  margin-right: 10%;
}

And here's the result, without the guides:

Step 10 – The mobile layout

We're almost there...

Create a media query at the 650px mark and style the .header class like this:

@media (max-width: 650px) {

  .header {

// To place logo at center
    justify-content: center;

    &__logo {
      font-size: 40px;
    }
//hiding the menu on mobile device
    &__menu {
      display: none;
    }
  }
}

Step 11 – Center .main

Now, place the .main section at the exact center with this code:

@media (max-width: 650px){
// styles of header section of step-10...

// main section here 
  .main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Step 12 – Style the image and text for mobile

Style the image and text for mobile layout like this:

@media (max-width: 650px){

 .main {
   &__image {
// Image size 
      height: 200px;
      width: 200px;
      background-size: 100%;

// To have rounded image 
      border-radius: 100%;
      background-position: center;
    }

// Styles for the text ->
    &__text {
      width: 100%;

      &-1 {
        display: none;
      }
      &-2, &-3, &-4 {
        font-size: 30px;
      }
    }
}

Step 13 – Style the footer for mobile

The last step is to style the footer section for the mobile layout:

@media (max-width: 650px){
  .footer {
// placing icons along the X-axis
    justify-content: center;
    margin: 0px;

    [class^="footer__"] {

// Resizing images for mobile layout
      img {
        width: 45px;
        height: 45px;
      }
    }
  }
}

And here's our result:

Take a break

Good job so far! Take a break before moving on to the next project. 😊

Project 3 – How to Build a Card Layout

In project 3, we'll build this:

So let's start.

The SCSS

On your stylesheet, delete everything except the styles of #size. And then add this code there:

* {
  margin: 0px;
  padding: 0px 10px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
    font-size: 55px;
  }
}

#size{
  position: absolute;
// Positioning the text
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
// color & size of text
  color: red;
  font-size: 40px;
}

The HTML

Your HTML should look like this inside the body tags: 👇

<div class="container"> 
   // We'll place code here
</div>

// This will show our window width Live 
<div id="size"></div>

Now, create three classes with class names .row-* like this 👇 inside .container:

<div class="container"> 

   <div class="row-1">
   </div>

   <div class="row-2">
   </div>

   <div class="row-3">
   </div>
</div>

Each row will have three boxes with class names .box-* like this. 👇 And yes, you'll insert letters inside the boxes:

<div class="container"> 

   <div class="row-1">
       <div class="box-1">A</div>
       <div class="box-2">B</div>
       <div class="box-3">C</div>
   </div>

   <div class="row-2">
       <div class="box-4">D</div>
       <div class="box-5">E</div>
       <div class="box-6">F</div>
   </div>

   <div class="row-3">
       <div class="box-7">G</div>
       <div class="box-8">H</div>
       <div class="box-9">I</div>
   </div>
</div>

We're done with the HTML part, and the result should look like this: 👇

The SCSS

Follow these small baby steps one by one to style the project.

Step 1 – Add some SCSS code

To select and style all the boxes and rows together, this is what we write in our CSS: 👇

.container{
  // styles here 
}

[class ^="row-"]{
  // Styles applied on all rows
}

[class ^="box-"]{
  // Styles applied on all boxes
}

Step 2 – Make boxes behave like rows

Boxes should behave like a row. This code will make that happen:

[class ^="row-"]{
  display: flex;
  flex-direction: row;
}

And here's the result: 👇

Step 3 – Define the boxes

Expand the boxes across the width and height and place the letters at the center.

[class ^="box-"]{

  background-color: #c4c4c4;
  border: 2px solid black;

// Defining the size of the boxes 
  width : (100%)/3;
  height: (100vh)/3;

// Place letter at the center
  display: grid;
  place-items: center;
}

Here's the result:

Step 4 – Create gaps between rows

Next we'll create a gap between the rows, like this:

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;

// Creating gap between rows 
  gap: 30px;
}

Now let's create a gap between the boxes:

[class ^="row-"]{
  display: flex;
  flex-direction: row;

// Creating gap between boxes
  gap : 30px;
}

And here's what it looks like:

Step 5 – Set up the mobile layout

Create the media query which will be applied at the 650px mark:

@media (max-width: 650px){
  // We'll write code here
}

Change the orientation of the boxes on the mobile screen from row to column, and stretch the boxes to 100% of the width with this code:

@media (max-width: 650px){

//Change orientation
  [class ^="row-"]{
    flex-direction: column;
  }

// Change width of boxes
  [class ^="box-"]{
    width: 100%;
  }
}

And here's the final mobile result:

By the way, project 2 is a part of this article of mine. If you're interested to learn more and practice both your Flexbox and media query skills, then go for it!

Conclusion

Here's your medal for reading all the way until the end ❤️

Suggestions and criticisms are highly appreciated ❤️

YouTube / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Credits

• CSS Tricks
• Portrait used for the example project
• Images from Vecteesy
• Panda, Ice-cream & Cute Cat
• Unicorn Pack & Kitty Avatar
• instagram,Twitter,Behance and Dribbble icons
• Bubble tea

The majority of today’s websites are responsive. And if you need to center and align image on those site, you need to learn how to make images fluid or responsive with CSS.

I posted a tutorial video that explains how to make a responsive website step by step a couple of weeks ago. In the video we made an image responsive. But in this post, I would like to give a bit more detail about how to make images responsive.

You will also learn some of the general problems that can occur when you're trying to make images responsive – and I will try to explain how to solve them.

How to Make Images Responsive with CSS

Should I Use Relative or Absolute Units?

Making an image fluid, or responsive, is actually pretty simple. When you upload an image to your website, it has a default width and height. You can change them both with CSS.

To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically.

The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.

img {
  width: 500px;
}

For example, if you define a fixed width of 500px, your image won’t be responsive – because the unit is absolute.

img {
  width: 50%;
}

That’s why you should instead assign a relative unit like 50%. This approach will make your images fluid and they will be able to resize themselves regardless of the screen size.

Should I Use Media Queries?

One of the questions I get asked the most is whether you should use media queries or not.

A media query is another important feature of CSS that helps make a website responsive. I won’t go into further details here but you can read my other post later to learn how to use media queries in more detail.

The answer to that question is: “it depends”. If you want your image to have different sizes from one device to another, then you will need to use media queries. Otherwise, you won’t.

Now for this example, your image has a 50% width for any kind of screen. But when you want to make it full-size for mobile devices you need to get help from media queries:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

So based on the media query rule, any device smaller than 480px will take the full size of the width of the screen.

You can also watch the video version of this post below:

Why is the max-width property not great?

Another way that developers can make responsive images is the max-width property. However, this is not always the best method to use, because it may not work for every kind of screen size or device.

The first thing to understand before we move on with an example is what exactly the max-width property does.

The max-width property sets a maximum width for an element, which does not allow the width of that element to be larger than its max-width value (but it can be smaller).

For example, if the image has a default width of 500px, and if your screen size has only 360px, then you won’t be able to see the complete image, because there is not enough space:

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}

Therefore, you can define a max-width property for the image and set it to 100%, which shrinks the image of 500px to the space of 360px. So you will be able to see the complete image on a smaller size screen.

The good thing is that, since you are using a relative unit, the image will be fluid in any device smaller than 500px.

Unfortunately, the screen size will get somewhat larger than 500px, but the image won’t because it has a default 500px of width. This approach will break the responsiveness of the image.

To fix this, you need to use the width property again, which makes the max-width property useless.

What about Heights?

Another common problem you may run across has to do with the height property. Normally, the height of an image automatically resizes itself, so you don’t need to assign a height property to your images (because it kinda breaks the image).

But in some cases, you might have to work with images that must have a fixed-height. So when you assign a fixed height to the image, it will still be responsive but it won’t look good.

img {
  width: 100%;
  height: 300px;
}

Fortunately, there is another property that CSS offers to fix this problem…

Solution: The Object-Fit Property

To have more control over your images, CSS provides another property called object-fit. Let’s use the object-fit property and assign a value, which will make your image look better:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

If needed, you can also use the object-position property (in addition to object-fit) to focus on a specific part of the image. Many people are not aware of the object-fit property, but it can be helpful to fix these kinds of problems.

I hope this post has helped you understand and solve your problems with responsive images. If you want to learn more about web development, feel free to check out my Youtube channel.

Thank you for reading!

Millions of people have already shifted from traditional tv to online content, and from traditional malls to online stores. Because of this, e-commerce and marketing teams need to deploy and maintain strong online presences for their businesses.

This usually means running the brand's own online store and having a presence in different marketplaces that cover different regions and population segments. The never-ending list of possible marketplaces in which to showcase, promote, and sell products just gets longer and longer.

To make matters worse, different marketplaces have different requirements and restrictions on images, which can add a burden for the devops and marketing teams. It's also a source of inconsistency in the public image of a brand.

Here, we'll review the main aspects to consider when setting up a clean pipeline for the seamless production of omnichannel images.

A single master image through a single pipeline

To simplify workflows and keep them sustainable, a good practice is to apply the principles of omnichannel to images. This basically means to set a single, easy to configure pipeline for the creation of variants, from the same master or pristine images. Under this approach, we can use the same product image for every channel.

Our pipeline should receive master images and produce the derivatives needed to feed the marketplaces. At a minimum, it should cope with a workflow like this.

Of course, a front-end and cloud storage are not necessary. The pipeline may just work by watching a hot folder and creating the variants as master images land there. We'll also take a look at this.

Image transformation and optimization

Each web channel has its own web design and layout. As for images, this means different and specific aspect ratios. Besides, each marketplace usually has an image policy in place, which limits the resolution and the weight of the image and sets the admissible image format. Usually, it also specifies other style guidelines.

Let's look at the main operations we'll want to accomplish with our pipeline.

Resizing, cropping, padding

To change the aspect ratio of an image we may crop it or pad it. To get a squared image from a vertical one we may cut out the upper and bottom parts or we may fill in the left and right sides with white stripes.

There are open source tools – like ImageMagick – that allow you to perform these operations effectively. Resizing an image with ImageMagick to limit its maximum dimensions to 800 px is as simple as this:

convert input.jpg -resize 800x800 resized.jpg

This instruction respects the aspect ratio. If the original image is not squared, then the resized image has one dimension lower than 800 px. Let's say the image is vertical and we want it for Tmall, which requires a squared image of 800x800 px. Then we may pad it like this:

convert resized.jpg  -gravity center -extent 800x800 padded.jpg

Also, we may simply crop it to fit the dimensions:

convert input.jpg -gravity Center  -crop 800x800+0+0 +repage crop.jpg

While some marketplaces like Tmall encourage padding images with white stripes and branding them with logos to use them in category pages, others like Amazon or Lamoda forbid this practice.

Cropping (left), Resizing (center), Resizing and padding (right)

When we pad an image to match the aspect ratio, we don’t risk cropping out important parts. In fact, padding is a trick to keep the aspect ratio unchanged. However, the risk is real when we crop the image.

So, it is a good practice to ensure in the studio that we comply with some composition requirements set by each channel. We should produce master images with a view of the product compatible with the different aspect ratios that we'll deliver.

Smart cropping

There are algorithms inspired by human attention and aesthetic perception that provide an enhanced protection against bad automatic crops. In the next example, with smart image cropping (white line) we avoid cutting the face unlike a simple center cropping (red line) would do.

Example of smart cropping with a cloud service vs center cropping

This option is available in some cloud services. If we're going to use it, we should verify that it works properly for us because many solutions only use an attention map and do not consider aesthetic aspects. Usually, choosing a number of representative images, making some tests with them, and finally verifying the results is enough to get a good grasp.

Overlaying logos and text

We may also need to add our brand logo or to add a message to the image by overlaying a vector graphic or a text. Moreover, in many cases we need some content localization strategy in place – like tailoring discounts and language to a market region. Sticking to our example, with ImageMagick we can overlay text on a padded image.

convert -fill black -pointsize 70 -gravity center -draw "rotate -90 text 0,-330 'MyBrandHere'" padded.jpg padded-with-brand.jpg

Once we configure it for one image, we may apply it to any other with the same dimensions.

Examples of batch image branding using Abraia's cloud service

Otherwise, handling typographies and different settings may end being tricky in workflows with certain complexity. In this regard, a cloud service usually provides a front-end to make the configuration intuitive and fast, and more convenient to handle. It also deals with other stuff like typographies or quality preservation in image recompression.

The workflows

There are many ways to deploy an image processing pipeline. Depending on the flow rate of images, we may need to support different types of workflows.

Batch processing

In the most simple case – when the flow rate is low – a batch image processing solution may be enough. With ImageMagick, we can use mogrify (instead of convert) to process all the images inside a folder.

In certain cases, like image versions with a text in different languages, we may need to code a script, but that's not a big deal either. To make it even easier, we may use a cloud batch processing tool in which we drop images and it gives us back all the variants we need, like in the video at the beginning of the post.

Hot folders

For in-house deployments where we need something more than simple batch image processing, the use of hot folders may be a good option. In this case, we should set a worker that watches a folder. Any time an image lands the folder the watcher triggers the process that creates all the variants we need.

In this regard, Gulp comes very handy to implement a folder watching pipeline. This GitHub repository brings a ready-to-use implementation of hot folder based on Gulp. It allows us to transform images using Abraia's cloud service or optimize them using Imagemin (an open source solution). Once installed, the watcher is easily started with just one command in the terminal.

$ gulp

This video shows the process at work.

Full cloud

Cloud services usually bring the most flexible and fast-to-deploy solution. Still, there are different ways to go full cloud. In the most simple approach from a user perspective, an image management and optimization service takes charge of the transformation. It also manages the delivery to end users (through a CDN) or other web channels like marketplaces and social networks. The user only needs to upload the master images and to configure the transformations, usually with an intuitive graphic interface.

In medium to large companies that manage their own cloud, services from different providers are usually combined. In this case, we are likely to have to manage private and public buckets. We can have a service accessing a bucket, creating the variants, and delivering the resources or just returning them to a different bucket.

Also, a cloud pipeline may be partially implemented in-house. In this case we have endless possibilities. However, such development effort only makes sense when no service complies with the requirements and there is a justified need for a tailored solution.

Summary

Studio shooting and photography retouching are time-consuming and costly operations. Being able to use the same master material everywhere is very important to keep times and cost under control.

We have reviewed the main aspects of a complete pipeline in charge of creating image variants. On one hand, we looked at the transformations you need to perform from resizing, cropping, or padding, to the overlay of texts and graphics. On the other, we looked at the workflows to implement from batch processing to hot folders or full cloud solutions. We have reviewed some important open source resources (like ImageMagick or Gulp) that make it possible to implement a pipeline you develop yourself.

In the end, there are two main factors to consider when deciding whether to use an in-house or a cloud service. First, you must evaluate your willingness to take on the development effort. Second, you need to decide what features you require, from an easy to use interface for the configuration of variants to advanced features like smart cropping.

Let’s face it, image optimization is hard. We want to make it effortless.

When we set out to build our React Component there were a few problems we wanted to solve:

• Automatically decide image width for any device based on the parent container.

• Use the best possible image format the user’s browser supports.

• Automatic image lazy loading.

• Automatic low-quality image placeholders (LQIP).

Oh, and it had to be effortless for React Developers to use.

This is what we came up with:

<Img src={ tueriImageId } alt='Alt Text' />

Easy right? Let’s dive in.

Calculating the image size:

Create a <figure /> element, detect the width and build an image URL:

class Img extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            width: 0
        }
        this.imgRef = React.createRef()
    }

    componentDidMount() {
        const width = this.imgRef.current.clientWidth
        this.setState({
            width
        })
    }

    render() {

        // Destructure props and state
        const { src, alt, options = {}, ext = 'jpg' } = this.props
        const { width } = this.state

        // Create an empty query string
        let queryString = ''        

        // If width is specified, otherwise use auto-detected width
        options['w'] = options['w'] || width

        // Loop through option object and build queryString
        Object.keys(options).map((option, i) => {
            return queryString +=  `${i < 1 ? '?' : '&'}${option}=${options[option]}`
        })

        return(
            <figure ref={this.imgRef}>
                { 
                    // If the container width has been set, display the image else null
                    width > 0 ? (
                        <img
                            src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ queryString }`}
                            alt={ alt }
                        />
                    ) : null 
                }
            </figure>
        )

    }
}

export default Img

This returns the following HTML:

<figure>
    <img 
        src="https://cdn.tueri.io/tueriImageId/alt-text.jpg?w=autoCalculatedWidth" 
        alt="Alt Text" 
    />
</figure>

Use the best possible image format:

Next, we needed to add support for detecting WebP images and having the Tueri service return the image in the WebP format:

class Img extends React.Component {

    constructor(props) {
        // ...
        this.window = typeof window !== 'undefined' && window
        this.isWebpSupported = this.isWebpSupported.bind(this)
    }

    // ...

    isWebpSupported() {
        if (!this.window.createImageBitmap) {
            return false;
        }
        return true;
    }

    render() {

        // ...

        // If a format has not been specified, detect webp support
        // Set the fm (format) option in the image URL
        if (!options['fm'] && this.isWebpSupported) {
            options['fm'] = 'webp'
        }

        // ...

        return (
            // ...
        )

    }
}

// ...

This returns the following HTML:

<figure>
    <img 
        src="https://cdn.tueri.io/tueriImageId/alt-text.jpg?w=autoCalculatedWidth&fm=webp" 
        alt="Alt Text" 
    />
</figure>

Automatic image lazy loading:

Now, we need to find out if the <figure /> element is in the viewport, plus we add a little buffer area so the images load just before being scrolled into view.

   class Img extends React.Component {

   constructor(props) {
       // ...
       this.state = {
           // ...
           isInViewport: false
           lqipLoaded: false
       }
       // ...
       this.handleViewport = this.handleViewport.bind(this)
   }

   componentDidMount() {
       // ...
       this.handleViewport()
       this.window.addEventListener('scroll', this.handleViewport)
   }

   handleViewport() {
       // Only run if the image has not already been loaded
       if (this.imgRef.current && !this.state.lqipLoaded) {
           // Get the viewport height
           const windowHeight = this.window.innerHeight
           // Get the top position of the <figure /> element
           const imageTopPosition = this.imgRef.current.getBoundingClientRect().top
           // Multiply the viewport * buffer (default buffer: 1.5)
           const buffer = typeof this.props.buffer === 'number' && this.props.buffer > 1 && this.props.buffer < 10 ? this.props.buffer : 1.5
           // If <figure /> is in viewport
           if (windowHeight * buffer > imageTopPosition) {
               this.setState({
                   isInViewport: true
               })
           }
       }
   }

   // ...

   componentWillUnmount() {
       this.window.removeEventListener('scroll', this.handleViewport)
   }

   render() {

       // Destructure props and state
       // ...
       const { isInViewport, width } = this.state

       // ...

       return (
           <figure ref={this.imgRef}>
               { 
                   // If the container width has been set, display the image else null
                   isInViewport && width > 0 ? (
                       <img 
                           onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                           // ...
                       />
                   ) : null 
               }
           </figure>
       )

   }
}

export default Img

Automatic low-quality image placeholders (LQIP):

Finally, when an image is in the viewport, we want to load a 1/10 size blurred image, then fade out the placeholder image when the full-size image is loaded:

class Img extends React.Component {

    constructor(props) {
        // ...
        this.state = {
            // ...
            fullsizeLoaded: false
        }

        // ...

    }

    // ...

    render() {

        // Destructure props and state
        // ...
        const { isInViewport, width, fullsizeLoaded } = this.state

        // ...

        // Modify the queryString for the LQIP image: replace the width param with a value 1/10 the fullsize
        const lqipQueryString = queryString.replace(`w=${ width }`, `w=${ Math.round(width * 0.1) }`)

        // Set the default styles. The full size image should be absolutely positioned within the <figure /> element
        const styles = {
            figure: {
                position: 'relative',
                margin: 0
            },
            lqip: {
                width: '100%',
                filter: 'blur(5px)',
                opacity: 1,
                transition: 'all 0.5s ease-in'
            },
            fullsize: {
                position: 'absolute',
                top: '0px',
                left: '0px',
                transition: 'all 0.5s ease-in'
            }
        }

        // When the fullsize image is loaded, fade out the LQIP
        if (fullsizeLoaded) {
            styles.lqip.opacity = 0
        }

        return(
            <figure
                style={ styles.figure }
                // ...
            >
                {
                    isInViewport && width > 0 ? (
                        <React.Fragment>

                            {/* Load fullsize image in background */}
                            <img 
                                onLoad={ () => { this.setState({ fullsizeLoaded: true }) } }
                                style={ styles.fullsize }
                                src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ queryString }`}
                                alt={ alt }
                            />

                            {/* Load LQIP in foreground */}
                            <img 
                                onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                                style={ styles.lqip }
                                src={`https://cdn.tueri.io/${ src }/${ kebabCase(alt) }.${ ext }${ lqipQueryString }`} 
                                alt={ alt } 
                            />
                        </React.Fragment>
                    ) : null
                }            
            </figure>
        )

    }
}

// ...

Putting it all together:

Image optimization made effortless. Just swap out your regular <img /> elements for the Tueri <Img /> and never worry about optimization again.

import React from 'react'
import PropTypes from 'prop-types'
import { TueriContext } from './Provider'
import kebabCase from 'lodash.kebabcase'

class Img extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isInViewport: false,
            width: 0,
            height: 0,
            lqipLoaded: false,
            fullsizeLoaded: false
        }

        this.imgRef = React.createRef()
        this.window = typeof window !== 'undefined' && window 
        this.handleViewport = this.handleViewport.bind(this)       
        this.isWebpSupported = this.isWebpSupported.bind(this)

    }

    componentDidMount() {

        const width = this.imgRef.current.clientWidth

        this.setState({
            width
        })

        this.handleViewport()

        this.window.addEventListener('scroll', this.handleViewport)

    }

    handleViewport() {
        if (this.imgRef.current && !this.state.lqipLoaded) {
            const windowHeight = this.window.innerHeight
            const imageTopPosition = this.imgRef.current.getBoundingClientRect().top
            const buffer = typeof this.props.buffer === 'number' && this.props.buffer > 1 && this.props.buffer < 10 ? this.props.buffer : 1.5
            if (windowHeight * buffer > imageTopPosition) {
                this.setState({
                    isInViewport: true
                })
            }

        }
    }

    isWebpSupported() {
        if (!this.window.createImageBitmap) {
            return false;
        }
        return true;
    }

    componentWillUnmount() {
        this.window.removeEventListener('scroll', this.handleViewport)
    }

    render() {

        // Destructure props and state
        const { src, alt, options = {}, ext = 'jpg' } = this.props
        const { isInViewport, width, fullsizeLoaded } = this.state

        // Create an empty query string
        let queryString = ''

        // If width is specified, otherwise use auto-detected width
        options['w'] = options['w'] || width

        // If a format has not been specified, detect webp support
        if (!options['fm'] && this.isWebpSupported) {
            options['fm'] = 'webp'
        }

        // Loop through option prop and build queryString
        Object.keys(options).map((option, i) => {
            return queryString +=  `${i < 1 ? '?' : '&'}${option}=${options[option]}`
        })

        // Modify the queryString for the LQIP image: replace the width param with a value 1/10 the fullsize
        const lqipQueryString = queryString.replace(`w=${ width }`, `w=${ Math.round(width * 0.1) }`)

        const styles = {
            figure: {
                position: 'relative',
                margin: 0
            },
            lqip: {
                width: '100%',
                filter: 'blur(5px)',
                opacity: 1,
                transition: 'all 0.5s ease-in'
            },
            fullsize: {
                position: 'absolute',
                top: '0px',
                left: '0px',
                transition: 'all 0.5s ease-in'
            }
        }

        // When the fullsize image is loaded, fade out the LQIP
        if (fullsizeLoaded) {
            styles.lqip.opacity = 0
        }

        const missingALt = 'ALT TEXT IS REQUIRED'

        return(
            // Return the CDN domain from the TueriProvider
            <TueriContext.Consumer>
                {({ domain }) => (
                    <figure
                        style={ styles.figure }
                        ref={this.imgRef}
                    >
                        {
                            // 
                            isInViewport && width > 0 ? (
                                <React.Fragment>

                                    {/* Load fullsize image in background */}
                                    <img 
                                        onLoad={ () => { this.setState({ fullsizeLoaded: true }) } }
                                        style={ styles.fullsize }
                                        src={`${ domain }/${ src }/${ kebabCase(alt || missingALt) }.${ ext }${ queryString }`}
                                        alt={ alt || missingALt }
                                    />

                                    {/* Load LQIP in foreground */}
                                    <img 
                                        onLoad={ () => { this.setState({ lqipLoaded: true }) } }
                                        style={ styles.lqip }
                                        src={`${ domain }/${ src }/${ kebabCase(alt || missingALt) }.${ ext }${ lqipQueryString }`} 
                                        alt={ alt || missingALt } 
                                    />
                                </React.Fragment>
                            ) : null
                        }            
                    </figure>
                )}

            </TueriContext.Consumer>
        )

    }
}

Img.propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
    options: PropTypes.object,
    ext: PropTypes.string,
    buffer: PropTypes.number
}

export default Img

See it in action:

Try out a live demo on CodeSandbox:

_Originally published at Tueri.io_