Background

Stencil is basically a compiler, not necessarily a UI library. A compiler that transforms TSX (TypeScript + JSX) into self-contained custom components.

Before you start learning about the tool, it’s important to note that Stencil is not another heavy JavaScript framework you need to learn. If you have worked with Angular or React, or understand web components, then Stencil is worth a look.

Stencil enables you to write some TSX and SCSS, which it compiles down into shippable components. It was built by the Ionic team to help them write smaller, reusable components without having to carry along the weight of Angular. However, this led to solving a more general problem. We can write platform-independent component with our favorite tools (TS, JSX, etc) and compile to standard custom components which can then be used with any framework and supporting browsers. All features of Stencil boil down to optimization and performance, which is the motivation behind Stencil.

Stencil also provides a lot of progressive features out of the box, including easy server-side rendering and service worker installation. Now let’s take a look at a practical approach to using Stencil and some of its interesting features.

Installing Stencil

Even Stencil’s installation is simple. You can clone a starter template from GitHub and install the npm dependencies. No major configuration, just clone, install and run.

Clone the repository from GitHub to your machine:

# Clone starter
git clone https://github.com/ionic-team/stencil-starter.git todo

Install the dependencies:

# Enter the cloned project
cd todo

# Install dependencies
npm install

You can start the app at port 3333 using the following command:

npm start

All our component code will be written in src/components. You can ignore the my-name starter component, since we will remove it from the face of the project.

Creating Components

Each component is saved in a containing folder, such as a TSX file. The containing folder also can contain an SCSS file for the component's styles.

Let's start with a container component that will serve as the app's shell. Create a folder named site in the components folder, then add site.tsx and site.scss files in the folder. You just created an empty Stencil component.

Throughout the article, we will skip the SCSS contents for brevity. You can grab them from the GitHub repo provided. With that in mind, let's add some component content:

// components/site/site.tsx
import { Component } from '@stencil/core';

@Component({
  tag: 'todo-site',
  styleUrl: 'site.scss'
})
export class Site {

  render() {
    return (
      <div class="wrapper">
        <nav>
          <div class="container">
            <h2>To - Do</h2>
          </div>
        </nav>
        <div class="container">
          <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm 12">
                {/* Todo App goes here */}

            </div>
          </div>
        </div>
      </div>
    );
  }
}

• The Component decorator - which is imported from @stencil/core - defines a class as a component.
• The Site class, which is decorated with the Component decorator, gets extended by the decorator to posses component features.
• One of these features is having a tag, a style and a template. The tag and style is defined using an object and passing the object as argument to the decorator. The render method returns JSX, which serves as the template for the component. This template is what gets rendered to the browser when the component is mounted.

The tag is used to mount the component. In this case, replace my-name tag in index.html with the following:

<todo-site></todo-site>

Then run the app using npm start. You should get the following:

Composing Hierarchical Components

Just like every other scenario in which you used components, Stencil components can be composed with each other. This is the beauty of web components. A component can have multiple children and grandchildren, as well as siblings. This enables you to write small, self-contained components that can work with other smaller components and carry out a single task.

As an example, let's create another component called TodoList and compose with the Site component. The former will be a child component to the latter.

// components/todo-list/todo-list.tsx
import { Component } from '@stencil/core';

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss'
})
export class TodoList {

  render() {
    return (
      <div class="todo-list">
        <ul>
          <li>Write some code</li>
        </ul>
      </div>
    );
  }
}

Same syntax with the Site component, with different names and visuals. Let's now add the component to the parent Site component:

export class Site {
  render() {
    return (
      <div class="wrapper">
        <nav>
          ...
        </nav>
        <div class="container">
          <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm 12">
              {/* Child component, TodoList */}
              <todo-list></todo-list>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

We don't have to import the component child class to the parent class. We only need to include the todo-list tag and then Stencil looks up the component in the components folder and loads it accordingly.

States and Props

So far, we have just been dealing with static contents and markup. Most components you will write in Stencil will be useless if they do not handle dynamic contents and markup. States and Props decorators are used to bring life to Stencil components.

States

A state is a mutable chunk of data defined in a component. After initialization, it can be overwritten, deleted and updated to fit the needs of a component. A state is basically a class property decorated with the State decorator:

import { Component, State } from '@stencil/core';

@Component({
  tag: 'todo-site',
  styleUrl: 'site.scss'
})
export class Site {

  // todos as a state
  @State() todos: Todo[] = [
    {task: 'Cook', completed: false},
    {task: 'Dance', completed: true},
    {task: 'Eat', completed: false}
  ];

  render() {
    return (
      <div class="wrapper">
        ...
        <div class="container">
          <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm 12">
              <todo-list todos={this.todos}></todo-list>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

interface Todo {
  task: string;
  completed: boolean;
}

The todos property is defined as a state and initialized with an array with three Todo objects. The object is typed as a Todo interface and has task (string) and completed (boolean) properties.

A state, unlike props, can be updated at runtime, which makes them mutable. In our case, for example, we can add or remove tasks.

The todos state is used in the component by passing it down to the todo-list component using props.

Props

Take another look on how we passed the array of todos to the todo-list component:

<todo-list todos={this.todos}></todo-list>

The todos property, which is passed the array of todo items is what is referred to as props.

Before the todo-list component can receive values via todos props, it needs to be aware of the incoming values. In that case, we need to create a todos property on the component class and decorate the class using Props:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss'
})
export class TodoList {

  @Prop() todos: Todo[];

  completedClass(todo: Todo) : string {
    return todo.completed ? 'completed' : '';
  }

  render() {
    return (
      <div class="todo-list">
        <ul>
          {this.todos.map(todo => <li class={this.completedClass(todo)} >{todo.task}</li>)}
        </ul>
      </div>
    );
  }
}

interface Todo {
  task: string;
  completed: boolean;
}

The property is defined as an array and typed with the Todo interface, as well. When the component receives this value, we iterate over each of the items in the array using map and display them in a li tag. There is a also a completedClass method, which returns completed or empty string if the completed property of the each todo is true or false respectively.

There is a major difference between states and props. States are mutable and can be changed at runtime, while props will always retain the value it received throughout runtime. Props also are received as attributes via the component's tag.

Events and Listeners

Now we got the problem of dynamic content of the table, we need to worry about interaction. How do we create new tasks? What happens when each todo item is clicked? Let's answer those questions now.

An event is raised when a user interacts with your component. We can create and emit custom events for such interactions. Events are raised with Event Emitters and are decorated with the Event decorator.

Let's see some event logic by clicking on each item in the todo list:

import { Component, Event, EventEmitter, Prop } from '@stencil/core';
export class TodoList {

  @Prop() todos: Todo[];
  @Event() toggleTodo: EventEmitter;

  ...

  // Event handler. Triggered by onClick
  // DOM event on the template in render()
  handleToggleTodo(todo) {
    this.toggleTodo.emit(todo)
  }

  render() {
    return (
      <div class="todo-list">
        <ul>
          {this.todos.map(todo => <li class={this.completedClass(todo)} onClick={this.handleToggleTodo.bind(this, todo)}>{todo.task}</li>)}
        </ul>
      </div>
    );
  }
}

In the render method, you can see we have an onClick attribute attached to each li method in the map iteration. This attribute attaches a DOM event; a click event to be precise.

When this button is clicked, the handleToggleTodo method is called with the right context while passing the actual todo item that was clicked.

The handleToggleTodo method then emits a custom event. This custom event (toggleTodo) is decorated as Event and defined as EventEmitter type. Calling emit on the custom event triggers a global event that we can listen to from anywhere in the app.

We can head to the parent component (Site) and create a listener for the event:

import { Component, State, Listen } from '@stencil/core';
...
export class Site {
  ...
  @Listen('toggleTodo')
  toggleTodo(e): void {
    // Retrieve event payload
    // from e.detail
    const todo = e.detail;
    this.todos = this.todos.map(x => {
      if (x.task === todo.task) {
        const updated = {
          task: x.task,
          completed: !x.completed
        };
        return updated;
      }
      return x;
    })
  }
  ...
}

The event listener is of course a decorated method. The method must be decorated with Listener and the decorator is passed the actual name of the emitter; in our case toggleTodo.

The name of the method handling the event doesn't have to be the same as the event emitted. What is important is that the method is decorated and that the decorator is passed the name of the emitted event.

Creating New Todos

You have learned so much about Stencil and Stencil components. Before we conclude, let's add another component that we can use to add more todo items to the todo list:

// components/todo-form/todo-form.tsx
import { Component, Event, EventEmitter, State } from '@stencil/core';

@Component({
  tag: 'todo-form',
  styleUrl: 'todo-form.scss'
})
export class TodoForm {

  @Event() newTodo: EventEmitter;
  @State() todo: string;


  handleChange(e) {
    this.todo = (e.target as HTMLTextAreaElement).value;
  }

  handleNewTodo() {
    this.newTodo.emit(this.todo);
    this.todo = '';
  }

  render() {
    return (
      <div class="todo-form">
        <input type="text" class="form-control" placeholder="New Task" value={this.todo} onChange={this.handleChange.bind(this)} />
        <button onClick={this.handleNewTodo.bind(this)}>Add</button>
      </div>
    );
  }
}

Not so much a big difference from what we have dealt with in previous sections. Here are the obvious additions:

• We have an internal state property (todo) that tracks the text being entered in the input field. When the value changes, we set the value of the state property to the new value of the input field.
• There is a button that submits the current value of todo anytime the button is clicked. It does so by triggering a handleNewTodo method which in turn emits a newTodo custom event

Back to the parent component, we can add a listener to update the list of todo items:

import { Component, State, Listen } from '@stencil/core';

export class Site {
  @State() todos: Todo[] = [
    {task: 'Cook', completed: false},
    {task: 'Dance', completed: true},
    {task: 'Eat', completed: false}
  ];

  @Listen('newTodo')
  newTodo(e) {
    const newTodo = {
      task: e.detail,
      completed: false
    };
    this.todos = [...this.todos, newTodo];
  }
 ...
 render() {
    return (
      <div class="wrapper">
        ...
        <div class="container">
          <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm 12">
              <todo-form></todo-form>
              <todo-list todos={this.todos}></todo-list>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
...

• The newTodo method, which handles the custom event, updates the list of todos with the new task we added.
• We also added the form component in the render method: <todo-form></todo-form>.

Conclusion

While we covered a lot of interesting Stencil concepts, there are many other features, such as routing, offline-first, SSR and more, to explore. As a matter of fact, to start building an offline experience, just run npm build to generate app builds with a service worker.

You can head right to the Stencil website to learn more about these advanced features. Stencil has an engaging Slack community which you can be apart of to get help faster. You can also follow the Stencil team on Twitter to get updates on the tool. You also can get the demo from the Github repo and play with the examples you saw in this article.

Cloudinary enables you to manage (store, transform and deliver) media contents from the cloud. You can get started with the free plan that supports 300,000 images and videos and offload media assets management in your app to Cloudinary.

In the next post we will discuss how to Make a Video Web Component, the Stencil Way with Cloudinary!

In Android, working with images (bitmaps) is really difficult because the application runs out of memory (OOM) very frequently. OOM is the biggest nightmare for Android developers.

There are some well known open source libraries that can help us deal with such problems like Picasa, Glide, and Fresco.

Fresco (by Facebook) is my favorite. Fresco is written in C/C++. It uses ashmem heap instead of VM heap. Intermediate byte buffers are also stored in the native heap. This leaves a lot more memory available for applications to use and reduces the risk of OOMs. It also reduces the amount of garbage collection required, leading to better performance and a smoother experience in our app. Another cool thing is that Fresco supports multiple images (multi-URI), requesting different image qualities per-situation, which help us further improve the user experience in cases of poor connectivity for example.

Multiple Image (Multi-URI) Requests

Suppose you want to show your users a high-resolution, relatively slow-to-download image. Rather than let them stare at a placeholder or a loading spinner for a while, you might want to quickly download a smaller thumbnail first. With Fresco this can be done by setting two image URIs, one for the low-resolution image, and one for the high-resolution one:

Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setLowResImageRequest(ImageRequest.fromUri(lowResUri))
                .setImageRequest(ImageRequest.fromUri(highResUri))
                .setOldController(mSimpleDraweeView.getController()).build();
mSimpleDraweeView.setController(controller);

But How I Can Generate Two Image Quality URIs?

Cloudinary’s fetch functionality enables on-the-fly manipulation of remote images and optimized delivery via a super fast CDN. It allows us to easily and dynamically generate different image quality versions, regardless of the location of image.

Let’s say this is my original image, stored in my AWS S3 bucket:

You can see that this image’s size is almost 1MB. Loading many such images can sometimes harm your user’s experience while they are waiting for the image to fully load.

With Cloudinary, it’s super easy to fetch that image and generate both low and high-res image versions.

Fetching Remote Images With Cloudinary

Here’s the basic URL template for fetching any remote image with Cloudinary:

https://res.cloudinary.com/<cloud>/image/fetch/<transformations>/<remote_image_url>

Add Dynamic Transformations For Low Resolution

And here’s what the URL looks like when you add parameters that adjust the quality:

http://res.cloudinary.com/demo/image/fetch/f_webp,q_auto:low,w_400/https://s3.amazonaws.com/myappmedia/donut.png

This transformation converts the image (“donut”) to WebP, scales it down to a 400-pixel width, sets the quality to auto:low (an algorithm automatically does a quality vs. size trade-off where relatively low quality is considered acceptable). These transformations reduce the image size from nearly a megabyte to 2.37 KB (!)

cl_image_tag("https://s3.amazonaws.com/myappmedia/donut.png", :quality=>"auto:low", :width=>400, :fetch_format=>:auto, :crop=>"scale", :type=>"fetch")

cl_image_tag("https://s3.amazonaws.com/myappmedia/donut.png", array("quality"=>"auto:low", "width"=>400, "fetch_format"=>"auto", "crop"=>"scale", "type"=>"fetch"))

CloudinaryImage("https://s3.amazonaws.com/myappmedia/donut.png").image(quality="auto:low", width=400, fetch_format="auto", crop="scale", type="fetch")

cloudinary.image("https://s3.amazonaws.com/myappmedia/donut.png", {quality: "auto:low", width: 400, fetch_format: "auto", crop: "scale", type: "fetch"})

cloudinary.url().transformation(new Transformation().quality("auto:low").width(400).fetchFormat("auto").crop("scale")).type("fetch").imageTag("https://s3.amazonaws.com/myappmedia/donut.png")

cl.imageTag('https://s3.amazonaws.com/myappmedia/donut.png', {quality: "auto:low", width: 400, fetch_format: "auto", crop: "scale", type: "fetch"}).toHtml();

$.cloudinary.image("https://s3.amazonaws.com/myappmedia/donut.png", {quality: "auto:low", width: 400, fetch_format: "auto", crop: "scale", type: "fetch"})

<Image publicId="https://s3.amazonaws.com/myappmedia/donut.png" type="fetch">
  <Transformation quality="auto:low" width="400" fetch_format="auto" crop="scale" />
</Image>

<cl-image public-id="https://s3.amazonaws.com/myappmedia/donut.png" type="fetch">
  <cl-transformation quality="auto:low" width="400" fetch_format="auto" crop="scale">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto:low").Width(400).FetchFormat("auto").Crop("scale")).Type("fetch").BuildImageTag("https://s3.amazonaws.com/myappmedia/donut.png")

MediaManager.get().url().transformation(new Transformation().quality("auto:low").width(400).fetchFormat("auto").crop("scale")).type("fetch").generate("https://s3.amazonaws.com/myappmedia/donut.png")

Note that in order to work with WebP, the only thing you need to do is add the webpsupport library to your dependencies, like described here.

Add Dynamic Transformations For High Resolution

It’s important to note that you can also dynamically optimize your high quality 1MB image in order to make it more ideal for Android device screen sizes. So for your high-resolution version you can just change the quality parameter to “auto:best” and leave the width as it was for the low resolution. This transformation would generate a nice looking, small sized image of 6.88 KB.

http://res.cloudinary.com/demo/image/fetch/f_webp,q_auto:best,w_400/https://s3.amazonaws.com/myappmedia/donut.png

cl_image_tag("https://s3.amazonaws.com/myappmedia/donut.png", :quality=>"auto:best", :width=>400, :crop=>"scale", :format=>"webp", :type=>"fetch")

cl_image_tag("https://s3.amazonaws.com/myappmedia/donut.png", array("quality"=>"auto:best", "width"=>400, "crop"=>"scale", "format"=>"webp", "type"=>"fetch"))

CloudinaryImage("https://s3.amazonaws.com/myappmedia/donut.png").image(quality="auto:best", width=400, crop="scale", format="webp", type="fetch")

cloudinary.image("https://s3.amazonaws.com/myappmedia/donut.png", {quality: "auto:best", width: 400, crop: "scale", format: "webp", type: "fetch"})

cloudinary.url().transformation(new Transformation().quality("auto:best").width(400).crop("scale")).format("webp").type("fetch").imageTag("https://s3.amazonaws.com/myappmedia/donut.png")

cl.imageTag('https://s3.amazonaws.com/myappmedia/donut.png', {quality: "auto:best", width: 400, crop: "scale", format: "webp", type: "fetch"}).toHtml();

$.cloudinary.image("https://s3.amazonaws.com/myappmedia/donut.png", {quality: "auto:best", width: 400, crop: "scale", format: "webp", type: "fetch"})

<Image publicId="https://s3.amazonaws.com/myappmedia/donut.png" format="webp" type="fetch">
  <Transformation quality="auto:best" width="400" crop="scale" />
</Image>

<cl-image public-id="https://s3.amazonaws.com/myappmedia/donut.png" format="webp" type="fetch">
  <cl-transformation quality="auto:best" width="400" crop="scale">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto:best").Width(400).Crop("scale")).Format("webp").Type("fetch").BuildImageTag("https://s3.amazonaws.com/myappmedia/donut.png")

MediaManager.get().url().transformation(new Transformation().quality("auto:best").width(400).crop("scale")).format("webp").type("fetch").generate("https://s3.amazonaws.com/myappmedia/donut.png")

To complete the example using Fresco, you just need to set those URLs for the low and high versions:

String originalImageURL = "https://s3.amazonaws.com/myappmedia/donut.png";
String lowResUri = "http://res.cloudinary.com/demo/image/fetch/f_webp,q_auto:low,w_400/e_blur:90/" + originalImageURL;
String highResUri = "http://res.cloudinary.com/demo/image/fetch/f_webp,q_auto:best,w_400/" + originalImageURL;
DraweeController controller = Fresco.newDraweeControllerBuilder() .setLowResImageRequest(ImageRequest.fromUri(Uri.parse(low_res_url))) .setImageRequest(ImageRequest.fromUri(Uri.parse(high_res_url))) .setOldController(mSimpleDraweeView.getController()).build();
mSimpleDraweeView.setController(controller);

Pretty easy, right?

Images and videos are the core component of any mobile app. Using both Cloudinary and Fresco can dramatically improve your Android users’ experience with a small effort from your side as developers.

Feel free to comment below if you have any questions about this post or any other media optimization related issues. In our next post we are going to talk about how to’ optimize video in your Android application, stay tuned!

To keep your product revelant in the market, you should be building Progressive Web Apps (PWA). Consider these testimonies on conversion rates, provided by leading companies, such as Twitter, Forbes, AliExpress, Booking.com and others. This article doesn't go into background, history or principles surrounding PWA. Instead we want to show a practical approach to building a progressive web app using the Vue.js library.

Here is a breakdown of the project we will be tackling:

• A masonry grid of images, shown as collections. The collector, and a description, is attributed to each image. This is what a masonry grid looks like:
  
• An offline app showing the grid of images. The app will be built with Vue, a fast JavaScript framework for small- and large-scale apps.
• Because PWA images need to be effectively optimized to enhance smooth user experience, we will store and deliver them via Cloudinary, an end-to-end media management service.
• Native app-like behavior when launched on supported mobile browsers.

Let's get right to it!

Setting up Vue with PWA Features

A service worker is a background worker that runs independently in the browser. It doesn't make use of the main thread during execution. In fact, it's unaware of the DOM. Just JavaScript.

Utilizing the service worker simplifies the process of making an app run offline. Even though setting it up is simple, things can go really bad when it’s not done right. For this reason, a lot of community-driven utility tools exist to help scaffold a service worker with all the recommended configurations. Vue is not an exception.

Vue CLI has a community template that comes configured with a service worker. To create a new Vue app with this template, make sure you have the Vue CLI installed:

npm install -g vue-cli

Then run the following to initialize an app:

vue init pwa offline-gallery

The major difference is in the build/webpack.prod.conf.js file. Here is what one of the plugins configuration looks like:

// service worker caching
new SWPrecacheWebpackPlugin({
  cacheId: 'my-vue-app',
  filename: 'service-worker.js',
  staticFileGlobs: ['dist/**/*.{js,html,css}'],
  minify: true,
  stripPrefix: 'dist/'
})

The plugin generates a service worker file when we run the build command. The generated service worker caches all the files that match the glob expression in staticFileGlobs.

As you can see, it is matching all the files in the dist folder. This folder is also generated after running the build command. We will see it in action after building the example app.

Masonry Card Component

Each of the cards will have an image, the image collector and the image description. Create a src/components/Card.vue file with the following template:

<template>
 <div class="card">
   <div class="card-content">
     <img :src="collection.imageUrl" :alt="collection.collector">
     <h4>{{collection.collector}}</h4>
     <p>{{collection.description}}</p>
   </div>
 </div>
</template>

The card expects a collection property from whatever parent it will have in the near future. To indicate that, add a Vue object with the props property:

<template>
...
</template>
<script>
export default {
  props: ['collection'],
  name: 'card'
}
</script>

Then add a basic style to make the card pretty, with some hover animations:

<template>
 ...
</template>

<script>
...
</script>

<style>
  .card {
    background: #F5F5F5;
    padding: 10px;
    margin: 0 0 1em;
    width: 100%;
    cursor: pointer;
    transition: all 100ms ease-in-out;
  }
  .card:hover {
    transform: translateY(-0.5em);
    background: #EBEBEB;
  }
  img {
    display: block;
    width: 100%;
  }
</style>

Rendering Cards with Images Stored in Cloudinary

Cloudinary is a web service that provides an end-to-end solution for managing media. Storage, delivery, transformation, optimization and more are all provided as one service by Cloudinary.

Cloudinary provides an upload API and widget. But I already have some cool images stored on my Cloudinary server, so we can focus on delivering, transforming and optimizing them.

Create an array of JSON data in src/db.json with the content found here. This is a truncated version of the file:

[
  {
    "imageId": "jorge-vasconez-364878_me6ao9",
    "collector": "John Brian",
    "description": "Yikes invaluably thorough hello more some that neglectfully on badger crud inside mallard thus crud wildebeest pending much because therefore hippopotamus disbanded much."
  },
  {
    "imageId": "wynand-van-poortvliet-364366_gsvyby",
    "collector": "Nnaemeka Ogbonnaya",
    "description": "Inimically kookaburra furrowed impala jeering porcupine flaunting across following raccoon that woolly less gosh weirdly more fiendishly ahead magnificent calmly manta wow racy brought rabbit otter quiet wretched less brusquely wow inflexible abandoned jeepers."
  },
  {
    "imageId": "josef-reckziegel-361544_qwxzuw",
    "collector": "Ola Oluwa",
    "description": "A together cowered the spacious much darn sorely punctiliously hence much less belched goodness however poutingly wow darn fed thought stretched this affectingly more outside waved mad ostrich erect however cuckoo thought."
  },
  ...
]

The imageId field is the public_id of the image as assigned by the Cloudinary server, while collector and description are some random name and text respectively.

Next, import this data and consume it in your src/App.vue file:

import data from './db.json';

export default {
  name: 'app',
  data() {
    return {
      collections: []
    }
  },
  created() {
    this.collections = data.map(this.transform);
  }
}

We added a property collections and we set it's value to the JSON data. We are calling a transform method on each of the items in the array using the map method.

Delivering and Transforming with Cloudinary

You can't display an image using it's Cloudinary ID. We need to give Cloudinary the ID so it can generate a valid URL for us. First, install Cloudinary:

npm install --save cloudinary-core

Import the SDK and configure it with your cloud name (as seen on Cloudinary dashboard):

import data from './db.json';

export default {
  name: 'app',
  data() {
    return {
      cloudinary: null,
      collections: []
    }
  },
  created() {
    this.cloudinary = cloudinary.Cloudinary.new({
      cloud_name: 'christekh'
    })
    this.collections = data.map(this.transform);
  }
}

The new method creates a Cloudinary instance that you can use to deliver and transform images. The url and image method takes the image public ID and returns a URL to the image or the URL in an image tag respectively:

import cloudinary from 'cloudinary-core';
import data from './db.json';

import Card from './components/Card';

export default {
  name: 'app',
  data() {
    return {
      cloudinary: null,
      collections: []
    }
  },
  created() {
    this.cloudinary = cloudinary.Cloudinary.new({
      cloud_name: 'christekh'
    })
    this.collections = data.map(this.transform);
  },
  methods: {
    transform(collection) {
      const imageUrl =
        this.cloudinary.url(collection.imageId});
      return Object.assign(collection, { imageUrl });
    }
  }
}

The transform method adds an imageUrl property to each of the image collections. The property is set to the URL received from the url method.

The images will be returned as is. No reduction in dimension or size. We need to use the Cloudinary transformation feature to customize the image:

methods: {
  transform(collection) {
    const imageUrl =
      this.cloudinary.url(collection.imageId, { width: 300, crop: "fit" });
    return Object.assign(collection, { imageUrl });
  }
},

The url and image method takes a second argument, as seen above. This argument is an object and it is where you can customize your image properties and looks.

To display the cards in the browser, import the card component, declare it as a component in the Vue object, then add it to the template:

<template>
  <div id="app">
    <header>
      <span>Offline Masonary Gallery</span>
    </header>
    <main>
      <div class="wrapper">
        <div class="cards">
          <card v-for="collection in collections" :key="collection.imageId" :collection="collection"></card>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
...
import Card from './components/Card';

export default {
  name: 'app',
  data() {
    ...
  },
  created() {
    ...
  },
  methods: {
   ...
  },
  components: {
    Card
  }
}
</script>

We iterate over each card and list all the cards in the .cards element.

Right now we just have a boring single column grid. Let's write some simple masonry styles.

Masonry Grid

To achieve the masonry grid, you need to add styles to both cards (parent) and card (child).

Adding column-count and column-gap properties to the parent kicks things up:

.cards {
  column-count: 1;
  column-gap: 1em; 
}

We are close. Notice how the top cards seem cut off. Just adding inline-block to the display property of the child element fixes this:

card {
  display: inline-block
}

If you consider adding animations to the cards, be careful as you will experience flickers while using the transform property. Assuming you have this simple transition on .cards:

.card {
    transition: all 100ms ease-in-out;
  }
  .card:hover {
    transform: translateY(-0.5em);
    background: #EBEBEB;
  }

Setting perspective and backface-visibilty to the element fixes that:

.card {
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden; 
    transition: all 100ms ease-in-out;
  }

You also can account for screen sizes and make the grids responsive:

@media only screen and (min-width: 500px) {
  .cards {
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .cards {
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .cards {
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .cards {
    column-count: 5;
  }
}

Optimizing Images

Cloudinary is already doing a great job by optimizing the size of the images after scaling them. You can optimize these images further, without losing quality while making your app much faster.

Set the quality property to auto while transforming the images. Cloudinary will find a perfect balance of size and quality for your app:

transform(collection) {
const imageUrl =
   // Optimize
   this.cloudinary.url(collection.imageId, { width: 300, crop: "fit", quality: 'auto' });
 return Object.assign(collection, { imageUrl });
}

This is a picture showing the impact:

The first image was optimized from 31kb to 8kb, the second from 16kb to 6kb, and so on. Almost 1/4 of the initial size; about 75 percent. That's a huge gain.

Another screenshot of the app shows no loss in the quality of the images:

Making the App Work Offline

This is the most interesting aspect of this tutorial. Right now if we were to deploy, then go offline, we would get an error message. If you're using Chrome, you will see the popular dinosaur game.

Remember we already have service worker configured. Now all we need to do is to generate the service worker file when we run the build command. To do so, run the following in your terminal:

npm run build

Next, serve the generated build file (found in the the dist folder). There are lots of options for serving files on localhost, but my favorite still remains serve:

# install serve
npm install -g serve

# serve
serve dist

This will launch the app on localhost at port 5000. You would still see the page running as before. Open the developer tool, click the Application tab and select Service Workers. You should see a registered service worker:

The huge red box highlights the status of the registered service worker. As you can see, the status shows it's active. Now let's attempt going offline by clicking the check box in small red box. Reload the page and you should see our app runs offline:

The app runs, but the images are gone. Don't panic, there is a reasonable explanation for that. Take another look at the service worker config:

new SWPrecacheWebpackPlugin({
   cacheId: 'my-vue-app',
   filename: 'service-worker.js',
   staticFileGlobs: ['dist/**/*.{js,html,css}'],
   minify: true,
   stripPrefix: 'dist/'
 })

staticFileGlobs property is an array of local files we need to cache and we didn't tell the service worker to cache remote images from Cloudinary.

To cache remotely stored assets and resources, you need to make use of a different property called runtimeCaching. It's an array and takes an object that contains the URL pattern to be cached, as well as the caching strategy:

new SWPrecacheWebpackPlugin({
  cacheId: 'my-vue-app',
  filename: 'service-worker.js',
  staticFileGlobs: ['dist/**/*.{js,html,css}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/res\.cloudinary\.com\//,
      handler: 'cacheFirst'
    }
  ],
  minify: true,
  stripPrefix: 'dist/'
})

Notice the URL pattern, we are using https rather than http. Service workers, for security reasons, only work with HTTPS, with localhost as exception. Therefore, make sure all your assets and resources are served over HTTPS. Cloudinary by default serves images over HTTP, so we need to update our transformation so it serves over HTTPS:

const imageUrl =
        this.cloudinary.url(collection.imageId, { width: 300, crop: "fit", quality: 'auto', secure: true });

Setting the secure property to true does the trick. Now we can rebuild the app again, then try serving offline:

# Build
npm run build

# Serve
serve dist

Unregister the service worker from the developer tool, go offline, the reload. Now you have an offline app:

You can launch the app on your phone, activate airplane mode, reload the page and see the app running offline.

Conclusion

When your app is optimized and caters for users experiencing poor connectivity or no internet access, there is a high tendency of retaining users because you're keeping them engaged at all times. This is what PWA does for you. Keep in mind that a PWS must be characterized with optimized contents. Cloudinary takes care of that for you, as we saw in the article. You can create a free account to get started.

This post originally appeared on VueJS Developers

Christian Nwamba (CodeBeast), is a JavaScript Preacher, Community Builder and Developer Evangelist. In his next life, Chris hopes to remain a computer programmer.

Introduction

At Novactive, we are always excited to use new technologies and/or to improve our favorite technologies with other ones when it makes sense for us, for our clients and for the community.

Our business is web technologies, and the most professional content management system (CMS) for us is eZ Platform (previously eZ Publish). That's why we love creating connectors to this CMS. Our most recent eZ project is an image management plugin using Cloudinary.

If you are a web developer, whether or not you already use eZ Platform, Symfony, or Cloudinary, your website probably has some images, so take a look at what this cool connection can offer.

eZ Platform Quick Notes

If you aren't familiar with this CMS, you should have a look, but before we dive into the details about our Cloudinary integration, I just want to share in a few words the main reasons why I think eZ Platform is the best PHP CMS:

• Fully based on the Symfony PHP framework: eZ Platform is a Symfony application, as opposed to just using some Symfony components as others do. If you are a Symfony developer, you'll feel right at home.
• Decoupled CMS: eZ Platform separates the content creation process from the delivery process.
• Headless CMS: Thanks to the REST API, the presentation does not have to be handled by the CMS (but it can be)
• Mature: It's been around for more than 10 years.
• Supported: by eZ Systems

A Bit about Cloudinary

Cloudinary is a cloud-based, end-to-end media management solution that automates and streamlines your entire media asset workflow. It removes all the hassles you would normally need to handle for your site’s images and videos, including responsiveness, compression, manipulations, hosting, caching, delivery and more!

The benefits of Cloudinary go way beyond this plugin and we can't possibly cover them all here. In this post, we are going to focus specifically on the eZ plugin offering, where our main goal was to let eZ Platform developers enjoy Cloudinary's powerful image optimization capabilities and provide easy access to all of Cloudinary's manipulation features, including:

• Advanced resizing
• Smart detection-based cropping
• Face detection
• Instagram-like effects
• Sprite and CSS generation
• Transformation chaining

For example, check out just some of what you can do just by specifying a few resizing and face-detection parameters:

For more examples of the available manipulations, take a look at Cloudinary's image manipulation gallery, or the full list of all available options in the Cloudinary transformation reference.

By taking advantage of the Cloudinary plugin, you decouple your application a bit more, you get amazing manipulation features instantly, and automatic optimizations that will give a significant boost to your page load performance!

Motivation

“Content is king” in a web or a mobile project. You always need images or videos with your content.

Then you need to optimize them, store them in different adapted versions (known as variations), host them all, cache them and deliver them.

But you don’t want to reinvent the wheel. Plus image management is not likely your domain of expertise, so it's probably not the area where want to invest your time and resources. That's why we decided to create a plugin that can add Cloudinary on top of an existing eZ website smoothly, with almost no development required.

Our requirements for this Minimum Viable Plugin were:

• Using Cloudinary with no change on the architecture
• No changes in the source code
• Original images stay on the eZ Platform local environment (in case you want to stop using Cloudinary in the future)
• The plugin should work on existing projects and provide Cloudinary’s manipulations and delivery features

So the requirements are simple in this MVP, and you still get to host the original image locally.

eZ Platform Default Image Handling

By default, eZ provides a concept of “variation” (previously known as “aliases”). This is a cool feature that many CMS still lack. It enables developers to make sure images are rendered in an optimized way in the various places they need to appear, for example: on a homepage at a certain size and on a detailed article page at a different size. This already helps prevents editors from loading super-heavy images directly into pages. But it's far from optimum and, as we will see, Cloudinary can do much better.

By default, these image variations are generated with LiipImagineBundle, using the underlying Imagine. It supports GD, Imagick or Gmagick PHP extensions, and allows you to define a flexible filter to convert your original images into multiple “variations.”

eZ also abstracts the file system. By default, variations are stored on the file system, but you can configure it to store those images in an AWS S3 bucket if you wish. Obviously, they are generated only once and cleared on demand (e.g. content removal).

Here is an example of a variation definition:

            simple:
                reference: ~
                filters:
                    - { name: auto_rotate }
                    - { name: geometry/scaledownonly, params: [128,128] }
                    - { name: strip }

A more complex one:

           complex:
                reference: ~
                filters:
                    - { name: auto_rotate }
                    - { name: geometry/scaledownonly, params: [326,280] }
                    - { name: geometry/crop, params: [326, 280, 0, 0] }
                    - { name: background, params: { size: [230, 144], color: '#FFFFFF' } }
                    - { name: strip }

This is a great start, but it's not enough, as your servers still need to manage the conversion, storage, delivery and caching. You are also limited to the PHP extension capabilities and the delivery capabilities of your servers/tools. And of-course you are lacking all the sophisticated manipulation features that a service like Cloudinary can provide.

Benefits of the MVP

The plugin will give you the ability to create variations based on Cloudinary features. In other words, every manipulation feature available in Cloudinary will be yours as soon as you finish the plugin installation.

There is no code to change, just the variations to define, and if you don’t define them, the plugin will fallback to the standard handling.

Example of a Cloudinary variation:

            case:
                ezreference_variation: ~
                filters:
                    width: 710
                    width: 428
                    crop: 'fit'
                    fetch_format: 'auto'
                    effect: "brightness:200"
                    radius: 'max'

And the "filters" key enables you to use the hundreds of possibilities and combinations provided by Cloudinary.

Plus:

• Images are automatically served through Cloudinary’s servers, and every image is optimized to deliver the best possible quality at the smallest possible file size based on the content of the image and the specific browser that each customer uses to view your content.
• No computation is done on your servers to convert images.

How to Install the Plugin

The package is open source and available on our Github here: https://github.com/Novactive/NovaeZCloudinaryBundle.

1) The installation is quite standard, using composer.

$ composer require novactive/ezcloudinarybundle

2) Register the bundle in your Kernel.

 public function registerBundles()
{
   ...
   $bundles = array(
       new FrameworkBundle(),
       ...
       new Novactive\Bundle\eZCloudinaryBundle\NovaeZCloudinaryBundle(),
   );
   ...
}

3) Set up your credentials. If you have not already done so, create a Cloudinary account. You can find your account credentials in the Cloudinary management console.

 nova_ezcloudinary:
    authentification:
        cloud_name: "xxx"
        api_key: "xxxxx"
        api_secret: "xxxx"

4) Set up variation templates:

 system:
    default:
        cloudinary_variations:
            simpletest1:
                ezreference_variation: 'Native eZ Variation Name, ~ means original'
                filters: 
                # See Cloudinary documentation for available transformations:
                    width: 200
                    height: 200
                    gravity: 'face'
                    radius: 'max'
                    effect: 'sepia'

5) Usage

NOTHING! That is another part of the beauty of eZ Platform. Your current template code should look like this:

     {{ ez_render_field( content, "image",{
        "parameters": {"alias": 'simpletest1'},
        "attr" : { "class" : "img-responsive" }
    }
    ) }}

At this point, the plugin automatically takes over and the function nova_ezcloudinary_alias will be used instead of ez_image_alias. The bundle falls back on the native variation system if the alias name does not exist in cloudinary_variations.

So basically there is no change in your code, just a yaml configuration for your variations.

How Does it Work?

The MVP uses the Cloudinary fetch feature:

The nova_ezcloudinary_alias will change the source of the image (at rendering) and generate a URL such as:

Note: Cloudinary also offers a personalized CNAME URL adapted to your own domain option (High tier plans).

The first time the image is requested, Cloudinary automatically fetches the original image from your eZ storage, stores it in a relative path in your Cloudinary account, and then performs the requested manipulations so that all the variations are then hosted by Cloudinary and served via CDN.

Dynamic Responsive Images

Once you have Cloudinary at your service, you can use its capabilities to more easily deliver responsive images. There are three ways to do this:

1. Dynamic image manipulation - Use Cloudinary to generate transformed versions of images. Then use the HTML srcset attribute, enabling the browser to choose which image versions to display based on the device hosting the browser.

2. Automating responsive images with JavaScript (client side) - Programmatically set the <img> src URL.

3. Automating responsive images with Client Hints (server side) - Deliver the optimal image based on the available width reported in the Client Hints request header. But this is not available on all browsers.

We usually go with the src and srcset attribute of the <img> HTML tag as it does not require Javascript.

Simply speaking, srcset provides to the browser a set of URLs (variations) to use depending on the viewport size. The browser takes the information, combines them with the window width and screen density it already knows and does its job!

To exploit this feature with eZ, you just have to override the ezimage template to make it even more dynamic, using the following two steps:

1. Create variations for each size:
   • myvariationname
   • myvariationname_1x
   • myvariationname_2x
   • myvariationname_3x
2. Change the template that renders images, and adapt.

Here's the code:

{% block ezimage_field %}
    {% spaceless %}
        {% if not ez_is_field_empty( content, field ) %}
            {% set aliasName = parameters.alias|default( 'original' ) %}
            {% set imageAlias = nova_ezcloudinary_alias( field, versionInfo, aliasName ) %}
            {% set src = imageAlias ? asset( imageAlias.uri ) : "//:0" %}
            {% set width = parameters.width is defined ? parameters.width : imageAlias.width %}
            {% set height = parameters.height is defined ? parameters.height : imageAlias.height %}

            {% if aliasName == 'original' %}
                {% set densities = [] %}
                {% set densitiesSizes = [] %}
            {% else %}
                {% set densities = ['1x', '2x', '3x'] %}
                {% set densitiesSizes = ['640w', '1040w', '1560w'] %}
            {% endif %}

            <img {{ block( 'field_attributes' ) }}
                    src="{{ src }}"{% if width %}
                    width="{{ width }}"{% endif %}{% if height %}
                    height="{{ height }}"{% endif %}
                    alt="{{ field.value.alternativeText }}"{% if parameters.class is defined and parameters.class is not empty %}
                    class="{{ parameters.class }}"{% endif %}
                    {% if densities|length > 0 %}
                        srcset="{% for density in densities %}{{ ez_image_alias( field, versionInfo, parameters.alias~'_'~density ).uri }} {{ densitiesSizes[loop.index0] }}{% if not loop.last %},{% endif %}{% endfor %}"
                    {% endif %}
            />
        {% endif %}
    {% endspaceless %}
{% endblock %}

With the above, you will end up with a generated HTML something like this:

         <img class="ezimage-field"
                src="https://cloudinaryURL_for_myvariationname”
               srcset="
https://cloudinaryURL_for_myvariationname_1px 640w,
https://cloudinaryURL_for_myvariationname_2px 1040w,
https://cloudinaryURL_for_myvariationname_3px 1560w"
/>

That's it! If you want to know more about srcset and sizes, check out this great ycombinator responsive images article.

What's Next?

What's Next? Well, that's for you to determine. We invite you to create a free Cloudinary account, install the plugin, and start to play with the images on your eZ site. We have a lot of big ideas for the next versions of this initial eZ-Cloudinary MVP, but first and foremost, we want to hear your ideas and see where you take it.

You are all welcome to contribute!

About Novactive

Novactive (Nextedia Group) is a web agency that develops digital platforms. Founded in 1996, Novactive is the brainchild of several web aficionados, whose combined vision of integrity and purpose drives every business decision. In 2016, Novactive joined the Nextedia Group. Today Novactive with Nextedia is comprised of a highly experienced multidisciplinary team with more than 200 digital experts based in Paris, Toulon and San Francisco.

Sébastien Morel is the CTO of Novactive, head of U.S. operations and technology, and runs the California office. Sébastien has been with the group for over 14 years. “I love to take different web technologies and mix them together to get the best of them for our clients, but also to improve the developer and user experience. Open sourcing MVPs and packages is part of our core values. Sharing best practices and implementations, and allowing others to participate is THE way to build quality.”

Novactive are part of Cloudinary's partnership network. We at Cloudinary value our partners. If you are interested to become a Cloudinary partner check out our partnership program.

The announcement of the iPhone 8, 8 plus and the iPhone X at the iPhone 10th anniversary Apple event on 12th September 2017, came with a massive buzz.

The iPhone X (pronounced "iPhone 10") has a 5.8-inch super retina screen, which stands out amongst other Apples, giving the machine the tagline “it is all screen”. A resolution of 2436 x 1125 is also featured, making it the highest resolution iPhone to date.

Since the announcement, designers and prototypers have obviously been working in full gear to carve out products and designs to match the upcoming iPhone X.

That Notch

This is arguably one of the fascinating features of the iPhone X! (and the wonderful portrait above too). The Notch up top. Bold, elegant, has the flows around it and still fascinating, even though the guy in the portrait below doesn’t seem so thrilled.

We have to find a way to make him happy, how to make the notch really beautiful and useful for our images. Let’s do this with Cloudinary image transformation tools.

The iPhone X screen is unique in that the dark space (notch) that houses the camera and other sensors are actually part of the hard glass screen and content displayed flows around this notch. This is a very important aspect to consider in the UI/UX design of products to fit the all screen iPhone. In this article, we will discuss a way to fix your images, testing how it would look on the iPhone X.

How do you work with that screen?

Image management and manipulation can be done on-the-fly with Cloudinary. And when I say on-the-fly, that means that images are manipulated using dynamic delivery of their URLs!

Cloudinary also offers mobile-first image optimization for mobile design and the best part, it’s easy to use. These images are cached on the CDN and are immediately available upon request.

Cloudinary’s image management and manipulation service will be used in this article to simulate how images fit on the iPhone X screen. With this, you can test your images and products to see how well they fit on this new type of screenX.

Before we begin, let’s have a look at the sample image we will be manipulating.

Manipulate the image

To perform this test, you need the notch image.

Next, upload the image to be manipulated. In our case, we uploaded the overhead swimming pool image displayed above.

Now we need to apply the manipulation. Images in Cloudinary take the form of:

https://res.cloudinary.com/<cloud_name>/image/upload/<transformation_parameters>/<public_ID>.<image_format_file_extension>

So to adjust the swimming pool image, we use the URL below, and work on the <transformation parameters> portion: https://cloudinary-res.cloudinary.com/image/upload/ <transformation-parameters> /Spencer_Watson.jpg

Cloudinary offers lots of image URL manipulation parameters and they can be found here. For this test, we are going to be using quite a few parameters. The URL might look a bit scary at first, but scroll down a bit and we will walk you through the whole thing.:

cl_image_tag("spencer-watson-36.jpg", :transformation=>[
  {:if=>"ar_gt_1"},
  {:height=>562, :width=>1218, :crop=>"fill"},
  {:overlay=>"iphone_x_notch", :width=>325, :crop=>"scale"},
  {:angle=>90},
  {:angle=>"hflip"},
  {:flags=>"layer_apply", :gravity=>"west"},
  {:if=>"else"},
  {:height=>1218, :width=>562, :crop=>"fill"},
  {:gravity=>"north", :overlay=>"iphone_x_notch", :width=>325, :crop=>"scale"},
  {:if=>"end"},
  {:background=>"#000000", :radius=>54}
  ])

cl_image_tag("spencer-watson-36.jpg", array("transformation"=>array(
  array("if"=>"ar_gt_1"),
  array("height"=>562, "width"=>1218, "crop"=>"fill"),
  array("overlay"=>"iphone_x_notch", "width"=>325, "crop"=>"scale"),
  array("angle"=>90),
  array("angle"=>"hflip"),
  array("flags"=>"layer_apply", "gravity"=>"west"),
  array("if"=>"else"),
  array("height"=>1218, "width"=>562, "crop"=>"fill"),
  array("gravity"=>"north", "overlay"=>"iphone_x_notch", "width"=>325, "crop"=>"scale"),
  array("if"=>"end"),
  array("background"=>"#000000", "radius"=>54)
  )))

CloudinaryImage("spencer-watson-36.jpg").image(transformation=[
  {"if": "ar_gt_1"},
  {"height": 562, "width": 1218, "crop": "fill"},
  {"overlay": "iphone_x_notch", "width": 325, "crop": "scale"},
  {"angle": 90},
  {"angle": "hflip"},
  {"flags": "layer_apply", "gravity": "west"},
  {"if": "else"},
  {"height": 1218, "width": 562, "crop": "fill"},
  {"gravity": "north", "overlay": "iphone_x_notch", "width": 325, "crop": "scale"},
  {"if": "end"},
  {"background": "#000000", "radius": 54}
  ])

cloudinary.image("spencer-watson-36.jpg", {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]})

cloudinary.url().transformation(new Transformation()
  .if("ar_gt_1").chain()
  .height(562).width(1218).crop("fill").chain()
  .overlay("iphone_x_notch").width(325).crop("scale").chain()
  .angle(90).chain()
  .angle("hflip").chain()
  .flags("layer_apply").gravity("west").chain()
  .if("else").chain()
  .height(1218).width(562).crop("fill").chain()
  .gravity("north").overlay("iphone_x_notch").width(325).crop("scale").chain()
  .if("end").chain()
  .background("#000000").radius(54)).imageTag("spencer-watson-36.jpg")

cl.imageTag('spencer-watson-36.jpg', {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]}).toHtml();

$.cloudinary.image("spencer-watson-36.jpg", {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]})

<Image publicId="spencer-watson-36.jpg" >
  <Transformation if="ar_gt_1" />
  <Transformation height="562" width="1218" crop="fill" />
  <Transformation overlay="iphone_x_notch" width="325" crop="scale" />
  <Transformation angle="90" />
  <Transformation angle="hflip" />
  <Transformation flags="layer_apply" gravity="west" />
  <Transformation if="else" />
  <Transformation height="1218" width="562" crop="fill" />
  <Transformation gravity="north" overlay="iphone_x_notch" width="325" crop="scale" />
  <Transformation if="end" />
  <Transformation background="#000000" radius="54" />
</Image>

<cl-image public-id="spencer-watson-36.jpg" >
  <cl-transformation if="ar_gt_1">
  </cl-transformation>
  <cl-transformation height="562" width="1218" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="iphone_x_notch" width="325" crop="scale">
  </cl-transformation>
  <cl-transformation angle="90">
  </cl-transformation>
  <cl-transformation angle="hflip">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation height="1218" width="562" crop="fill">
  </cl-transformation>
  <cl-transformation gravity="north" overlay="iphone_x_notch" width="325" crop="scale">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation background="#000000" radius="54">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("ar_gt_1").Chain()
  .Height(562).Width(1218).Crop("fill").Chain()
  .Overlay("iphone_x_notch").Width(325).Crop("scale").Chain()
  .Angle(90).Chain()
  .Angle("hflip").Chain()
  .Flags("layer_apply").Gravity("west").Chain()
  .If("else").Chain()
  .Height(1218).Width(562).Crop("fill").Chain()
  .Gravity("north").Overlay("iphone_x_notch").Width(325).Crop("scale").Chain()
  .If("end").Chain()
  .Background("#000000").Radius(54)).BuildImageTag("spencer-watson-36.jpg")

MediaManager.get().url().transformation(new Transformation()
  .if("ar_gt_1").chain()
  .height(562).width(1218).crop("fill").chain()
  .overlay("iphone_x_notch").width(325).crop("scale").chain()
  .angle(90).chain()
  .angle("hflip").chain()
  .flags("layer_apply").gravity("west").chain()
  .if("else").chain()
  .height(1218).width(562).crop("fill").chain()
  .gravity("north").overlay("iphone_x_notch").width(325).crop("scale").chain()
  .if("end").chain()
  .background("#000000").radius(54)).generate("spencer-watson-36.jpg")

Looking at the URL, you can see what it means:

• if_ar_gt_1: If the aspect ratio of the image is greater than 1 (landscape):, c_fill,h_562,w_1218: resize the image to a height of 562 and a width of 1218 maintaining aspect ratio c_scale,l_iphone_x_notch,w_325: add the iphone_x_notch image as an overlay resized to a width of 325 (regardless of its aspect ratio) a_90/a_hflip: rotate the iphone_x_notch overlay by 90 degrees and do a horizontal mirror flip on it, g_west,fl_layer_apply: ensure the f the notch overlay is located on the far left of the parent image. End transformations to this layer.

• if_else: But if the aspect ratio of the image is not greater than 1 (portrait): c_fill,h_1218,w_562: resize the image to a height of 1218 and a width of 562, maintaining aspect ratio c_scale,g_north,l_iphone_x_notch,w_325: add a layer of the iphonexnotch image resized to a width of 325 regardless of its aspect ratio and place it at the center-north of the parent image.

• if_end: End the If statement.

• b_rgb:000000,r_54: Apply a black background to the image and round the corners to a border radius of 54.

Let's take a look at this same transformation on another image, this time a landscape image. All you have to do is use the same conditional transformation URL with a different public ID:

cl_image_tag("country_sunset.jpg", :transformation=>[
  {:if=>"ar_gt_1"},
  {:height=>562, :width=>1218, :crop=>"fill"},
  {:overlay=>"iphone_x_notch", :width=>325, :crop=>"scale"},
  {:angle=>90},
  {:angle=>"hflip"},
  {:flags=>"layer_apply", :gravity=>"west"},
  {:if=>"else"},
  {:height=>1218, :width=>562, :crop=>"fill"},
  {:gravity=>"north", :overlay=>"iphone_x_notch", :width=>325},
  {:if=>"end"},
  {:background=>"#000000", :radius=>54}
  ])

cl_image_tag("country_sunset.jpg", array("transformation"=>array(
  array("if"=>"ar_gt_1"),
  array("height"=>562, "width"=>1218, "crop"=>"fill"),
  array("overlay"=>"iphone_x_notch", "width"=>325, "crop"=>"scale"),
  array("angle"=>90),
  array("angle"=>"hflip"),
  array("flags"=>"layer_apply", "gravity"=>"west"),
  array("if"=>"else"),
  array("height"=>1218, "width"=>562, "crop"=>"fill"),
  array("gravity"=>"north", "overlay"=>"iphone_x_notch", "width"=>325),
  array("if"=>"end"),
  array("background"=>"#000000", "radius"=>54)
  )))

CloudinaryImage("country_sunset.jpg").image(transformation=[
  {"if": "ar_gt_1"},
  {"height": 562, "width": 1218, "crop": "fill"},
  {"overlay": "iphone_x_notch", "width": 325, "crop": "scale"},
  {"angle": 90},
  {"angle": "hflip"},
  {"flags": "layer_apply", "gravity": "west"},
  {"if": "else"},
  {"height": 1218, "width": 562, "crop": "fill"},
  {"gravity": "north", "overlay": "iphone_x_notch", "width": 325},
  {"if": "end"},
  {"background": "#000000", "radius": 54}
  ])

cloudinary.image("country_sunset.jpg", {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]})

cloudinary.url().transformation(new Transformation()
  .if("ar_gt_1").chain()
  .height(562).width(1218).crop("fill").chain()
  .overlay("iphone_x_notch").width(325).crop("scale").chain()
  .angle(90).chain()
  .angle("hflip").chain()
  .flags("layer_apply").gravity("west").chain()
  .if("else").chain()
  .height(1218).width(562).crop("fill").chain()
  .gravity("north").overlay("iphone_x_notch").width(325).chain()
  .if("end").chain()
  .background("#000000").radius(54)).imageTag("country_sunset.jpg")

cl.imageTag('country_sunset.jpg', {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]}).toHtml();

$.cloudinary.image("country_sunset.jpg", {transformation: [
  {if: "ar_gt_1"},
  {height: 562, width: 1218, crop: "fill"},
  {overlay: "iphone_x_notch", width: 325, crop: "scale"},
  {angle: 90},
  {angle: "hflip"},
  {flags: "layer_apply", gravity: "west"},
  {if: "else"},
  {height: 1218, width: 562, crop: "fill"},
  {gravity: "north", overlay: "iphone_x_notch", width: 325},
  {if: "end"},
  {background: "#000000", radius: 54}
  ]})

<Image publicId="country_sunset.jpg" >
  <Transformation if="ar_gt_1" />
  <Transformation height="562" width="1218" crop="fill" />
  <Transformation overlay="iphone_x_notch" width="325" crop="scale" />
  <Transformation angle="90" />
  <Transformation angle="hflip" />
  <Transformation flags="layer_apply" gravity="west" />
  <Transformation if="else" />
  <Transformation height="1218" width="562" crop="fill" />
  <Transformation gravity="north" overlay="iphone_x_notch" width="325" />
  <Transformation if="end" />
  <Transformation background="#000000" radius="54" />
</Image>

<cl-image public-id="country_sunset.jpg" >
  <cl-transformation if="ar_gt_1">
  </cl-transformation>
  <cl-transformation height="562" width="1218" crop="fill">
  </cl-transformation>
  <cl-transformation overlay="iphone_x_notch" width="325" crop="scale">
  </cl-transformation>
  <cl-transformation angle="90">
  </cl-transformation>
  <cl-transformation angle="hflip">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation height="1218" width="562" crop="fill">
  </cl-transformation>
  <cl-transformation gravity="north" overlay="iphone_x_notch" width="325">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation background="#000000" radius="54">
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .If("ar_gt_1").Chain()
  .Height(562).Width(1218).Crop("fill").Chain()
  .Overlay("iphone_x_notch").Width(325).Crop("scale").Chain()
  .Angle(90).Chain()
  .Angle("hflip").Chain()
  .Flags("layer_apply").Gravity("west").Chain()
  .If("else").Chain()
  .Height(1218).Width(562).Crop("fill").Chain()
  .Gravity("north").Overlay("iphone_x_notch").Width(325).Chain()
  .If("end").Chain()
  .Background("#000000").Radius(54)).BuildImageTag("country_sunset.jpg")

MediaManager.get().url().transformation(new Transformation()
  .if("ar_gt_1").chain()
  .height(562).width(1218).crop("fill").chain()
  .overlay("iphone_x_notch").width(325).crop("scale").chain()
  .angle(90).chain()
  .angle("hflip").chain()
  .flags("layer_apply").gravity("west").chain()
  .if("else").chain()
  .height(1218).width(562).crop("fill").chain()
  .gravity("north").overlay("iphone_x_notch").width(325).chain()
  .if("end").chain()
  .background("#000000").radius(54)).generate("country_sunset.jpg")

Bundle Transformations with Named Transformation

Let’s do one more cool thing, it feels weird to have to write all those transformation parameters for every image to be transformed. Cloudinary offers the named transformation feature which is used to bundle transformation parameter into one single re-usable parameter.

In the transformation panel of the Cloudinary dashboard, a list of all transformations currently delivered by Cloudinary on the current user account can be found. Click the edit link at the bottom of each transformation and use “Save as” to save the transformation with whichever name you choose. I choose “iphonex”. Once saved, on the list of transformations you can find the named transformation listed as iphonex. This “transformation pack” is now available to all images stored and can be applied to our test image with:

cl_image_tag("spencer-watson.jpg", :transformation=>["iphonex"])

cl_image_tag("spencer-watson.jpg", array("transformation"=>array("iphonex")))

CloudinaryImage("spencer-watson.jpg").image(transformation=["iphonex"])

cloudinary.image("spencer-watson.jpg", {transformation: ["iphonex"]})

cloudinary.url().transformation(new Transformation().named("iphonex")).imageTag("spencer-watson.jpg")

cl.imageTag('spencer-watson.jpg', {transformation: ["iphonex"]}).toHtml();

$.cloudinary.image("spencer-watson.jpg", {transformation: ["iphonex"]})

<Image publicId="spencer-watson.jpg" >
  <Transformation transformation={["iphonex"]} />
</Image>

<cl-image public-id="spencer-watson.jpg" >
  <cl-transformation transformation={{["iphonex"]}}>
  </cl-transformation>
</cl-image>

cloudinary.Api.UrlImgUp.Transform(new Transformation().Named("iphonex")).BuildImageTag("spencer-watson.jpg")

MediaManager.get().url().transformation(new Transformation().named("iphonex")).generate("spencer-watson.jpg")

Read more on named transformations here and how to implement them here.

Conclusion

Now you have seen how you can manipulate your images to test how they look on the iPhone X screen. You can try this out with several other images and if you are building a product be sure to test it to see how it looks on the iPhone X. This is just one of an unlimited number of cool things you can do with the Cloudinary image manipulation parameters. Check out the demo here

Unoptimized images can be incredible bottlenecks that turn an otherwise well-built web page into a slow loading, bloated one. With the ever-increasing percentage of users on mobile devices, properly sizing and optimizing images to provide a good mobile experience is even more important.

When working with content creators:

• Train the content creator on what type of image files to use in different situations. For example, PNG files should not be used for still photos (JPGs are the better choice), but they should be used for web graphics with transparency. PNG-8 can be used for graphics like logos with simple colors, resulting in a smaller file size than PNG-24 (see this table in Lara Hogan's "Designing for Performance" book).

• If using Photoshop, make sure to crop the image where possible, then use the "Save for Web" feature for saving all images that will be used on the site. Within the "Save for Web" options, make sure to specify an appropriate image size and choose the desired image quality (60% is generally a good bet).

• Provide guidelines for the content creator on maximum file size and dimensions for images that will be uploaded to the site.

• Run the image through an optimizer like ImageOptim (OSX and Linux, free) or Caesium Image Compressor (Windows, free), or TinyPNG (online).

• When possible, use SVG instead of PNGs for web graphics because the file size tends to be much smaller and they look crisp on all sizes of screens and devices.

• Animated GIFs, if used, should be optimized as well (see this article).

Tips for developers:

• Build in an image optimization tool. For a CMS, this can be done with an add-on that optimizes all newly added images, such as the EWWW Image Optimizer for WordPress. For a static site, this can be built into the build tooling for the site, for example: gulp-imageoptim.

• Programmatically set maximum file size and dimensions for images that can be uploaded to the site if possible. This is built into CMS systems like WordPress and Drupal.

• Use responsive images. The most straightforward way is to add the image 'srcset' and 'sizes' attributes to all images. Responsive image functionality is already built into some CMS systems, for example, WordPress uses Picturefill to ensure support of older browsers. Another approach is to use the <picture> element, for cases where you want to do art direction on a photo, with full control over what part of the image is shown at various screen sizes. Third-party tools like Cloudinary are another solution.

• Audit the site regularly to make sure image best practices are being followed.

With proper training for content creators and the proper planning and implementation techniques completed up front by developers, images can be an asset and point of differentiation for a website or web app, instead of a frustrating bottleneck.

Sheelah Brennan, Web developer and owner of, Sheelahb.com

I optimize images as a part of my Magento speed optimization service. E-commerce sites powered by Magento are the complex catalogs with thousands of images. It is impossible to manually optimize every JPEGs or PNGs so I utilize a couple of automatic size reducing techniques.

I use gifsicle for GIFs, jpegtran for JPEGs and optipng for PNGs - these are command line utilities used as prebuilt packages for your OS. I use the following bash script to find every image and optimize it on the fly:

#!/bin/bash

find ./media -iname '*.gif' -exec sh -c 'gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out" "{}"' \;

find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;

find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \;

This script could be added to cron daemon to optimize the new images as they come in (see this post for more details).

The second technique I use is called the Google PageSpeed Module, a server extension which you can install either for Nginx or Apache. This tool optimizes images and caches them on the server. The configuration is simple:

ModPagespeedRewriteLevel CoreFilters

The CoreFiters filter includes image optimization as well as many other useful speed optimization tools (see https://modpagespeed.com/doc/configuration).

The third method I sometimes use to polish images that are already optimized by the first two techniques is to run the page through Google PageSpeed Insights, and then download the optimized image pack (you can find the download link at the bottom of your pagespeed report, see https://developers.google.com/speed/docs/insights/OptimizeImages). But even with the PageSpeed module installed, Google Insights can still squeeze a few kilobytes here and there. The third method requires a lot of manual work and patience, but it will pay off.

Contributed by Konstantin Gerasimov, CEO, Goivvy

Amongst the many file formats out there, we're going to these three popular formats. It's might not be critical for a common user to know the exact difference between them, but it is more crucial when it comes to image optimization.

Here is our take on so-called optimized and progressive types of image files.

Optimized JPEG or optimized PNG (also called non-interlaced PNG) creates improved image files with smaller sizes. The browsers loads such files top-to-bottom while, and the image data arrives gradually. This provides the best compression for image files under 10K, which is usually preferable.

Progressive JPEG or progressive PNG (also called interlaced PNG) allows to display the low quality images before all the graphic info is loaded. The more information is loaded, the better the image quality. This format usually provides better compression for files over 10K.

After we have come to an understanding of which image format is better for different types of images on your e-commerce site, we'd like to touch on the way to compress all images on the site to reduce their size.

However, even if you choose the most appropriate format for your images, they still might be huge in size. The better quality an image has, the more it weighs. When you have thousands of pictures in your online store, even 10% image compression will substantially improve the page load speed.

Quoted from: http://promokit.eu/prestahop-blog/image-optimization-to-speed-up-your-site/ (edited)

Contributed by Kate Green, Promokit

Images are very important for web articles. For a great article, you need well optimized articles with proper keywords and attractive images. However, for a better user experience, images should be optimized. For example, if a visitor views your article and it's taking time to load the image, they might leave your site. Furthermore, search engines might rank you lower in search results.

You need to optimize your images. The thumb rule I follow is to use images that are less than 50kb in size, while maintaining the quality. Sometimes, I may go up to 60-70kb, but no more than that.

The tools which I like to use for image optimization are free and provide good results. After finding an image and editing it, I always compress it using compressor.io and then compress further using tinypng.com. I also use the Advanced Lazy Load WordPress plugin, which reduces the page load time and provides a great user experience.

For more details, see: Websites to Find Creative Commons Zero Images.

Contributed by Pawan Bahuguna, Owner, Tech2Blog

Image optimization may appear to be a bit complex, but with a few tricks, you'll master it in no time. When it comes to anything on the Internet, content may be king, but a picture is worth a thousand words. This is the reason why it is key that you optimize any images that you use on your website.

• Image Quality: It's only logical that any image you choose to place on a website will be of the highest quality imaginable. But you'd be surprised at the amount of poor quality images you'll run across, on some of the most popular websites out there. The best way to approach this is to take an in-depth look at the image and check for clarity. After that you can check resolution vs. size to make sure the image quality is consistent for resizing.

• Image Size: There are plenty of new plugins and tools that help automate image resizing. Where these tools are not employed, you can use Photoshop, Pixlr editor, or even basic paint to resize images. Be sure to always check constrain proportions so that your image quality stays intact.

• Image Alignment: This is one of the most commonly overlooked of all image optimization elements. There are usually 3 main options to align images online: left, center, and right. You can align images this way and have them text-wrapped (left and right alignment is ideal for text wrapping). Center is typically used only to feature an image and have the text positioned above or below the image.

• Image Title, Meta, and SEO: Recently, it has become mandatory for all images to be appropriately optimized for search engine ranking purposes. First, the title of your image should coincide with the page name, keyword, or post name that you are targeting. Additionally, you can caption the image with keywords or explain the picture in detail to the audience. It is a good idea to also incorporate subject and keyword phrases or terms in the alternate text option.

Search engines pick up images and rank them in their listings for those specific terms. This assists you in not only enhancing your content ranking in the serps, but it also boosts your ranking and traffic through those looking for particular images via keywords.

Contributed by Matt Hall, Owner, Scepter

One of the main reasons for increased page load times is images on the page!

How to do it right:

• Progressive Image Loading: Your web page is not available for use until all the images (<img> tags) are loaded with an image from their src. So, first replace all your img tags with placeholders. The placeholders will be a blank area on your web page which will be replaced by the high-resolution images. Doing so will allow your web page to continue execution without hindering the loading of page. For any image that you need to show you must have two versions of it, one is of high resolution and other is of low resolution (max 1kb in size).

• Host Images on a CDN: When the images are hosted on a CDN, it takes the load off our application. Also, when we make multiple requests, we get a cached copy, which is much faster.

• Choose a Proper File Format: If the images are composed of simple geometric shapes, they are great candidates for the vector (SVG) format. Images with complex shapes, colors, and details ought to be saved in one of the raster formats (GIF, PNG or JPEG).

• Use CSS Sprites: If there are many icon images on the page, combine them into one image and display them with plain CSS. This will eliminate the multiple requests for different icons as we are loading one single combined image.

How is it done wrong?

Most of the time, we need to use high resolution images to provide a good user experience. This results in slow page load on slow networks, which not only reduces user's interest but also affects the pagerank/crawling done by the search engines. We can reduce the quality of the images, but that doesn't solve it.

Here are some tips and tricks:

• Most developers use a basic low-resolution placeholder, such as a loading icon, until the image gets loaded. This makes the UI dull and the user feels the site is slow.

• Also, don't use only one master low-resolution image. Showing the same low-resolution image in 10 places until the page gets loaded makes for a bad user experience.

• Create two separate versions (low and high resolution) of images and use a unique low-resolution version for each image.

• Start the loading of the images after the page is fully loaded. This is relevant for blogging sites where user care more about content rather than the media attached to it.

• Create multiple high-resolution versions of the image, such as one each for desktop, mobile, tablets, and render high-resolution images based on device.

• Prefer vector formats: vector images are resolution and scale-independent, which makes them a perfect fit for the multi-device and high-resolution world.

Contributed by Ankur and his team at BoTree Technologies

Image optimization means making your images effective enough to be understood easily by search engines as well as users. Here, I'm not only talking about creating an attractive image that catches immediate user attention. Image optimization is more than that.

Let's say that you make an image compelling enough to catch a user's eye and understandable enough to deliver your message. But what about search engines? They are not humans like you and me. They are bots that won't see your image or its colors.

For example, I want to create an image of the sea under a blue sky during daytime. To make it readable for search engines, I'll use an Alt Tag with the name "Sea Under Blue Sky During Day Time":

<img src="/seaunderbluesky.jpg" alt="Sea Under Blue Sky during Day Time" />

Next, I'll give it a proper description to make it more recognizable:

<meta name="description" content="This photo is about blue sky, surface, horizon."/>

Plus, I'll take care of its uniqueness by adding the ".jpg" extension: seaunderbrightbluesky.jpg.

This is just a brief of how you can optimize your images to make them easily understandable by both search engines as well as users.

Contributed by Jimit Bagadiya, SocialPilot

When printing images in a book, there are a few specific requirements to consider for optimal results. First, while a minimum resolution of 150 ppi will most likely be satisfactory, 300 ppi is optimal. Images should also be saved in JPEG format with maximum quality settings. If you're able to apply a color-space, we recommend sRGB, as it most closely resembles the eventual print device.

Also, keep in mind that printed images usually print darker than they appear on a computer screen. For this reason, we recommend that you lighten each image and apply sharpening as a last step, prior to placing it into a book design. Following the information above will likely give you great print results, but if you need more information or are interested in soft-proofing your images, a good print provider will also have a color-management page on their website. Check out Blurb's color management resource center for more information.

Contributed by Estee Shechter, Blurb

An image is worth a thousand words, but it's also worth a boost in conversions. There is nothing worse than stretched, improperly sized, or inconsistent images. It's a dead giveaway to visitors that your site isn't professional and therefore not trustworthy.

When you visit a quality e-commerce site, their images and thumbnails always seem to line up in a nice grid, right? The trick is to maintain a consistent aspect ratio. That's the ratio of the width to the height of an image or screen. Maybe you're not up on your geometry, so I'll make it simple for you: you just need to make all of your product images square.

Maintaining the correct aspect ratio in Photoshop is surprisingly easy, just hold down the shift key down while cropping or making a selection to maintain an aspect ratio. The crop tool can also be set to to a square. Remember to keep your photo centered.

When saving images for the web, we need to strike a balance between file size and quality. For most images, the above settings when used in Adobe Photoshop CS5 will yield excellent quality within minimal file sizes. If you select "optimized" you may get a slightly smaller file size. Resist the temptation. We know that progressive JPEGs (while bigger) will appear to load faster to the user.

Kurt Elster, MBA and owner of, Ethercycle

Our company deals a lot with video files. Our video converter tool is capable of converting any resolution videos and preparing them for website integration. Some corporate website owners prefer to host videos on their own servers instead of uploading them to YouTube or other video platform. So they must have a fast CDN to provide sufficient video buffering speed and cross-platform accessibility. I think a good cloud-based system like Cloudinary can help optimize your 'cost-quality' ratio.

As for technologies, I'm after HTML5. It's a new standard of web markup which has been already adopted by major content providers. Our stats show that since 2016, the conversion to HTML5 outperforms the conversion to Flash formats, which means that users also opt for this new progressive technology.

Contributed by Emily Cooper, Marketing VP, Freemake

When developing web stores, image enhancement is key. According to HTTP Archive, the average page size today is 2.9MB, while images are taking up over half of this size. Image enhancement is a must-have to adhere for reducing page size as well as page load time. This also influences Google rankings while increasing customer loyalty.

One of the key approaches for enhancement is proper use of formats. For example, when saving images in JPG format, you increase its original size. Moreover, you complicate things for the user, because JPG implies image artifacts that are noticeable in the text. Therefore, the format should be chosen according to content:

• SVG is considered to be ideal for vector graphic, diagrams and graphs.

• PNG is useful for various clipart and images with open areas.

• JPG is a perfect solution for photos.

• GIF is suitable for animated images.

Nowadays there are so many ways to perform image enhancement including online tools, extensions for your website, and applications. In most programs and tools, proprietary algorithms as well as add-in programs are used, for example, pngcrush, optipng, jpegtran, jpegoptim, or gifsicle. Besides, you should remember that operations are executed without deteriorating image quality.

Denis Guryanov, Frontend Developer at, BelVG

Image optimization is a deceptively complicated area. Where is the sweet spot between a fast site but one that runs with images of a high enough quality to capture visitors' imagination? Here are a few of my favorite techniques that can reduce your image size without negatively impacting your visitor experience:

• Resize them: I've seen so many sites loading massive images just to resize them on the page.  Bloated 3000+ pixel image codes to appear as 250px wide, eating up bandwidth and slowing down the site. Figure out what the size of the image will display as on the page, and resize your images accordingly. This is by far the simplest and highest value of all image optimization to-dos.

• Optimize Them: We're talking about optimizing the actual images to appear the same but be smaller in size. You can either use a tool such as TinyPNG, which strips out some of the image metadata and uses lossy compression to reduce the number of colors in the image. Nine times out of ten the resulting product looks exactly the same on a monitor or close enough. However, I tend to shy away from these tools as the one time in ten (more for some tools) is unacceptable and not worth the trade-off.

• Use a Content Delivery Network (CDN): Your web server works hard for you every day processing all your pages, sending out emails (some anyway), hosting your cPanel and a ton more. Add serving all your images to the mix, and you'll be slowing down the entire system. A CDN hosts the images on servers dedicated to the single task of presenting them to the world. Most CDN providers also have multiple datacenters and serve the images from the one that is closest to your visitor.

• SCRSET: A typical page would call an image with code similar to the following:

<img src="desktop-image.jpg" alt="Hopefully you have one.">

The problem with this is that the same image is being served for mobile devices and desktop. Basically, mobile devices are pulling in images that are generally larger than they need to be, thus slowing down the page load for the already slower device. A simple switch in the code to something like the following might help:

<img src="mobile-image.jpg" srcset="tablet-image.jpg 500w, desktop-image.jpg 1200w" alt="If you're using SRCSET this is probably done.">

In this case, the browser will make the calculations as to which image to use based on the resolution the device needs. Even if you had only two images, one for mobile and one for desktop, you'll be doing a great favor to your visitors.

Contributed by Dave Davies, CEO, Beanstalk Internet Marketing

To make GIF files smaller in size, there are two optimization methods:

• Lossy compression: This removes some of the data from the original file. The result is a reduced file size, and reduced quality. The result image can become fuzzy and pixelated over time.

• Lossless compression: This reserves all of the data from the original file. While the file size remains larger than than lossy compression, the image's quality does not degrade over time.

If those two methods aren't sufficient, GIF images can be converted to other file formats.

The easiest alternative for static GIF images is to convert them to PNGs. While the two formats are very similar in terms of choices for displaying simple graphics, PNG has the advantage for being able to compress to up to 25 percent smaller than an equivalent GIF file.

PNGs can be a great alternative for static GIFs while HTML5/MP4 that are considered more modern techniques, are more suited for alternatives to animated GIFs. Simple graphics such as lines or shapes can also be made using SVG or pure CSS. These are more robust and smaller in size.

Quoted from: https://www.eyerys.com/articles/how-optimize-gif-format-performance-and-knowing-alternatives

Contributed by Hafiz Rahman S., Eyerys

Image optimization is a crucial part of enhancing your web page's overall performance, but unfortunately, it is neglected by most web page owners. However difficult it may seem to a non-technical person, image optimization is quite easy to perform. Here are a few easy hacks to optimize the performance and quality of images on your website.

• Image size and quality are two important factors in image optimization. Arriving at a point where you get the best image quality at the lowest possible file size is the key to image optimization. Images obtained from the web, or any other source, are often large in size and need to be compressed before uploading, to ensure the faster performance of your web page. It is important to choose the right file format and image compression tool to achieve this goal. The JPEG file format is the best for image compression as it uses both lossy and lossless optimization. GIFs are good for animated images. Everyday tools such as Adobe Photoshop or other freely available image editing tools can be used to compress the images.

• Naming the image properly is a quick trick to optimize the performance of your image. Did you know that inserting a few keywords (separated by hyphens) into the image's file name can increase its visibility manifolds? However, refrain from adding too many keywords---three to five keywords in the image file name are adequate. Many people make the mistake of using abbreviations in the image name. Avoid this at all costs.

• Make the alt text descriptive. It is a good idea to describe your image in the best possible manner (use 10 to 15 words), because Google considers alt text as a ranking factor. Also, alt text is identified by readers.

• Image Captions cannot be ignored. Studies show that most people read the image captions first, and then decide whether they should read the rest of the content or not.

Contributed by Venkatesh C.R., CEO and Managing Director at Dot Com Infoway

One of Webflow's core values involves immersing the artist in the medium is an essential part of the design. With regard to responsive images, this means previewing the effects of srcset/sizes and intrinsic size in the designer, as you move nodes around and change styles. Intrinsic size can affect a layout in unexpected ways, so getting that feedback as soon as possible is important to the design process.

When it comes to finding the right balance to optimizing responsive variants, we apply lossless compression optimizations. We do breach into lossy optimizations but try to be careful about it by using perceptual image coders with high-quality settings. The variety of images we encounter is one reason, but ultimately we'd lean toward quality over reducing file size. We also rely on HTML5 standards to optimize page speed via prefetching.

By being wise about the gap between your breakpoints and responsive variant widths, you can also get a lot out of a simple browser cache for repeat visitors with differing window widths. I resize my browser window all the time, and wouldn't want variants so specific that I keep downloading slightly larger versions of the same image.

Quoted from: https://blog.ycombinator.com/how-to-use-responsive-images/

Contributed by Yoav Givati, Engineer, Webflow

Image Optimization Tips

Image optimization is a tricky business, and it can make the difference between a decent looking site and a truly beautiful one. Here are a few best practices for optimizing images for websites. These tips regard using Photoshop, ImageAlpha, and ImageOptim.

• Photoshop allows you to "Save for Web" with the quality setting as low as possible (35-55%). This setting compresses your image, removing some of the image quality in the process. When saving for web, it's best to look at the preview window while adjusting the quality until you find a good balance between the image file size and quality. To smooth out and counteract the pixelation, you can add a bit of blur (0-.1), depending on the actual composition and detail of the photo.

• Images with text require higher quality, because the text will appear pixilated before the rest of the image. I use 55% as my recommended starting point, and then you can try decreasing the quality until you have gone too far with the compression--then bump it back.

• Images that have lots of solid colors (simple background gradients and graphics) can usually get away with a lower quality, as related to compression, because there is not a lot going on in the image. 35% is a good place to start.

• Photographs of people and landscapes are somewhere in the middle, the key is to get the file size as small as possible without compromising image quality.

• ImageAlpha is a free app that removes extra colors from your image. You simply drag your file into the app and reduce the number of colors (256, 128, 64, etc), which also reduces the file size. You can play with the settings and A/B test the image with various settings.

• ImageOptim removes excess metadata from your file, sometimes reducing file size by as much as 15-20% without losing any image quality. I highly recommend this step as it is fast, easy, free, and does not compromise the image.

• For full-screen images, you should shoot for less than 500k in file size. Ideally, a web page shouldn't be larger than 1-2MB to load quickly on mobile.

Dealing with Responsive Images

It's important that images are actually larger than the area they display in, because retina screens (such as in MacBooks, iMacs, iPads, and iPhones) contain twice the pixel information per inch. I develop for 2560px screens (27" iMac for example), so any image that should take up the entire screen should be at least 2560x1440 (16:9 ratio). Double that size if you want it to be retina-ready.

Any image that is inside of a column in the content area should be a standard ratio (3:2, 4:3, 1:1) and its size depends on the site width, for example, 1080px.

• If you want an image to go "site width" it should be at least 1080px wide.

• If you want the images to look stellar on retina screens you must double those sizes.

• 1/1 column is 1080px (2160px retina)

• 1/2 column is 540px (1080px retina)

• 1/3 column is 360px (720px retina)

• 1/4 column is 270px (540px retina)

• 1/5 column is 216px (432px retina)

• 1/6 column is 180px (360px retina)

• A standard WordPress thumbnail is 150px (300px retina)

All of this is changeable and is dependent on the "site width" setting of your website.

Responsive Breakpoints

The size at which a website switches from a multiple column layout to a one-column layout is referred to as the column breakpoint. A standard column breakpoint is usually around 800px. Any image that you want to be the full width of the column breakpoint should be at least 800px wide.

Contributed by John F. Van Dinther, TwoHatsConsulting

When it comes to images, keep in mind that images dimensions are not the only thing that matters, but also the compression level. Two images with the same dimensions can have a very different weight, depending on how you compress them. I'll outline three compression methods:

• Manual compression: If you aren't comfortable enough with Photoshop, ImageOptim can be used to compress a bunch of images on the fly. It will reduce the file size with lossless algorithms, so you won't lose in quality, and will also remove redundant image metadata. They also support the new Guetzli JPEG encoder, released in March 2017 by Google. If you want to integrate it with your website, there's also a web service available (but it isn't free). For Windows users, you can check out FileOptimizer.

• Client-side compression:

• ImageOptim, already mentioned for manual compression, can be used for client-side compression in the form of a Grunt plugin. After a quick setup, the plugin compresses all images located inside the images folders defined in your gruntfile. This solution is very efficient, but has one downside: if your platform frequently publishes content with images, you'll have to run Grunt at short intervals.

• You can also leverage the Javascript Image Compression (JIC) library. By attaching this library to your images upload fields or WYSIWYG text area, your browser automatically compresses your 4MB image into a much smaller, web-friendly image. Combined with an image resizing library, we are getting closer to a fully automated image processing.

• You can also combine both, by using Grunt for your general images, that are part of the look and feel, and JIC for user-uploaded content.

• Server-side compression: The mod_pagespeed Apache module (also available for nginx and IIS) performs a bunch of server-side operations that serve your site's performance, such as minifying, compressing, concatenation of JavaScript and CSS files, better resource caching, deferred loading of assets, and of course image optimization and compression. Together with helping your PageSpeed Insights, you'll gain in page load time and automation. It won't replace all the optimization that you can do upfront, but it's a easy way to improve performance and reduce page size.

Contributed by Morgan Milet, Dropsolid

There are two main reasons that image optimization tools are so popular. The first is related to usability improvement: You'll experience improved page load time after images on your page are optimized. The second is the fact that optimized images equal saving disk space.

Image optimization serves usability because the smaller the image, the faster the page load time for the user. Load speed is a factor that has a great impact both on usability and website optimization. In addition, you can save disk space if you upload optimized images to your website.

Supsystic's free version of the Photo Gallery plugin solves these issues by allowing you to optimize thumbnails, save backups of source files, compare the appearance of compressed and optimized files, and more. See our documentation for more details.

Contributed by Supsystic

An active site includes a maximum of 5-7 images in each of its blog posts. Optimizing 5-7 images a day is not a big issue. Here are some image optimization tips and tricks:

• Select only PNG/JPEG image formats for better optimization.

• Always add an image title, a description and alt text while uploading an image in WordPress.

• Use high-end hosting for better image load speed.

• Mention image credits if required, to avoid copyright issues.

Here are few recommended image optimization tools and technologies:

• Compress your images using selected WordPress plugins (see our post on the subject).

• I recommend the following free tools for image compression: TinyPNG, Compressor.io, Kraken Image Optimizer.

• You can also use CDNs such as Cloudinary, MaxCDN, Amazon's AWS, and more.

To avoid mistakes:

• Never upload an uncompressed image.

• Do not over-compress your image with multiple tools that might damage image quality.

Contributed by Alok Rana, LoudTechie

In these times of large screen resolutions and massive full-screen images, image optimization is more important than ever. As a WordPress theme development company, we often stumble upon websites where images are being heavily scaled instead of displaying images with the optimal size and image dimensions. When selecting a WordPress theme, it's highly recommended to choose one that's displaying thumbnails that are sized correctly, without wasting valuable page load time on image scaling.

Another important aspect is to optimize images before you even upload the images to your website. It usually is disadvantageous to upload a portrait image, if your website is optimized for landscape images. For example if you're running an online magazine or news website, it would be recommended to optimize the size and image ratio before uploading the image to your site. This not only saves server space, but also helps avoid other image-related issues.

In addition, always make sure that the images on your website are compressed. Serving optimized and compressed images with less file size can speed up your website, save bandwidth. You usually won't lose image quality, at least not in a way that it's noticeable by the human eye.

Contributed by Michael Hebenstreit, MH Themes

The best tip I can provide is: Automate your image optimizations. If your optimizations can be offloaded to a service or build/deploy process, your server or your framework/CMS can use that. Use tools. Don't get stuck following rules that may not suit your current project.

If you're not using a service, there are three tools you can put in your toolbox:

• MozJPEG for all your basic JPEG optimization needs. Typically MozJPEG's default settings provide big wins in file size. The easiest way to install this across many operating systems is through NPM.  

• For PNG images, use PNGQuant and/or ZopfliPNG. If you don't want to lose any pixels (lossless compression), use only ZopfliPNG.

• For Animated GIFs... well, don't use them. Use either a WebM or MP4 file converted with FFmpeg or an animated WebP image with mixed compression mode using Google's gif2webp. Additionally, you can use animated PNGs for compression on Safari and Firefox-based browsers.

• Send or serve the appropriate image for each browser.

• Animated images might be a pain point if you want good cross-browser support. Most Blink-based browsers support animated Webp images.

• Firefox, Safari, and  Chrome (as of version 59) can use Animated PNGs. However, if you're sending anything other than an animated WebP to Chrome, you're sending more data than you actually need to. The Picture Element or Content Negotiation for WebP images is your best bet (see our post).

To wrap all these tools into a nice package, MacOS users can use Imageoptim. Windows users can use the above Node/NPM tools, or install them through Bash on Ubuntu or Windows.

Contributed by Cory Dowdy

Image optimization is one of those things that will always be a huge performance killer when it comes to websites. Unfortunately, this is something that users will always ignore or put off to the last minute. As someone who works in the web performance industry, I see bad practices on a daily basis. For example, users uploading full resolution-images that are 5+ MB, not utilizing a CDN to speed up distribution, or not sizing images down beforehand, which in turn leaves CSS to rescale them.

Here are a few quick tips I give people whenever I see unoptimized images slowing down their site:

• Images need to be compressed. Whether you go lossy or lossless, it's important to pick one and roll with it. I personally recommend lossy for most users, as they will see the greatest speed increases. A lot of times images can be compressed by up to 60%+.

• Compressing images doesn't have to be complicated. If you're using a tool like Photoshop or Affinity Photo, simply utilize the "save for web" feature and quality indicator bars when you save out a file. If you are using a CMS like WordPress, there are dozens of WordPress image optimization plugins that can automate the compression upon uploading to the media library.

• Look into other file types which can further reduce the size of your images. I highly recommend utilizing both SVGs and WebP if you can. SVGs work great for logos and icons. WebP images, Google's image format, have been shown to be drastically smaller than both JPG and PNG.

• Resize your images in a photo editing tool before uploading to your site, or utilize a plugin. If your web page is 800px wide and you upload a photo that is 1400px wide, CSS is going to have to scale it down to fit the page. This adds to your load time. I suggest also doing some research into responsive images (retina) as you will want to also take this into account when making your image size calculations.

• CDNs are here for a reason, and they can drastically increase the load time of your optimized images by distributing them from servers closer to your users (which reduces latency). They can also help the performance of your entire site by ensuring that not only your images, but also your other assets, as they are delivered via a fast HTTP/2 connection with multiplexing, server push, etc.

There are numerous other things that can be done, such as lazy loading your images or using web fonts like Font Awesome in place of images on your site. In 2017, there should there are no more excuses for sites running slow due to large, unoptimized images. There is plenty of free information out there on how to get started.

Contributed by Brian Jackson, Director of Inbound Marketing, Kinsta

I like solving tricky programming problems ( think of them as Sudoku puzzles or clever logic problems). So I probably enjoy complex algorithms more than most developers. However, even I find some image compression algorithms daunting. I could probably cobble together a simple one if I had to, but fortunately, I don't. I work mostly in C# and Visual Basic these days, and the .NET framework that they use provides a reasonably nice image compression tool.

The System.Drawing.Image class provides a Save method that saves an image into a file. Optional parameters let you specify the file type (.bmp, .jpg, .png, and so forth) and a compression level. To specify the file type, loop through the array of encoders returned by the ImageCodecInfo.GetImageEncoders method until you find one with the right Multipurpose Internet Mail Extensions (MIME) type.

The following code shows a simple GetEncoderInfo method that returns an encoder for a MIME type.

// Return an ImageCodecInfo object for this mime type.

private ImageCodecInfo GetEncoderInfo(string mimeType)

{

   ImageCodecInfo[] encoders = ImageCodecInfo.GetImageEncoders();

   for (int i = 0; i <= encoders.Length; i++)

   {

       if (encoders[i].MimeType == mimeType) return encoders[i];

   }

   return null;

}

To set the compression level, create an EncoderParameters object. Give it a parameter of type System.Drawing.Imaging.Encoder.Quality with a value between 0 and 100. The value 0 provides high compression and low image quality. The value 100 provides high image quality and a large file (probably larger than the original file).

The following SaveJpg method uses the GetEncoderInfo method to save an image into a file with a specified compression level (I've skipped error handling to save space):

// Save the file with a specific compression level.

private void SaveJpg(Image image, string filename, long compression)

{

   EncoderParameters encoderParams = new EncoderParameters();

   encoderParams.Param[0] = new EncoderParameter(

       System.Drawing.Imaging.Encoder.Quality, compression);

   ImageCodecInfo codecInfo = GetEncoderInfo("image/jpeg");

   File.Delete(filename);

   image.Save(filename, codecInfo, encoderParams);

}

Now you can use this method to write a program that adjusts image compression. It's pretty fast, so you can even use a slider to try out different compression levels. Whenever the slider moves, save the image at the selected level in a temporary file and then display it. With a little experimentation, you can decide exactly how much compression you can get away with and still get an acceptable result.

Contributed by Rod Stephens, C# Helper

As an internet marketer, I frequently come across client websites that have unoptimized images. I generally run into the following issues:

• Using larger images and then resizing them using CSS or image (width/height) attributes.

• Using print quality images that are unoptimized for the web.

• Not lazy loading images on pages that have too many images.

• Using the wrong format of image, such as using PNG when JPEG would have resulted in a lower file size.

Here are some image optimization tips and tools:

• As far as PNG images go, one of best compression tools I have come across is PNGQuant, a lossy compressor. It also works well with images that have an alpha channel providing the smallest possible file size along with high-fidelity transparency.

• If you want even more compression, you further compress the image with PNGOutwin, a lossless compression software. In other words, it does not reduce the image quality.

• When it comes to the web, it's always best to save PNG images as PNG8, which is a lossy image format that supports only 256 colors.

• For JPEG, save the image using a lower-quality setting, somewhere around 80%-85%, and you can always go lower if the image isn't too blurry.

• Most JPEG images also carry EXIF data, which add a little bulk to the image. In addition to removing EXIF data, saving the image as a progressive JPEG (for images larger than 10kb) reduces the overall size, and also helps the image load faster when connections are slow. You can also try reducing the chroma information to reduce the image size further. Photoshop's 'Save for Web' option allows you to play around with these options.

• An open source program that I love using to optimize JPEG images is RIOT, which has a range of minute settings for maximum compression for while maintaining overall quality.

• There are also a few open source options, such as mozjpeg by Mozilla and Guetzli by Google, which can reduce JEPG size by around 10% to 20%. But these need to be used through the command line (a GUI version isn't currently available).

Contributed by Mukesh, OrbitingWeb

Too many small business owners waste good money when it comes to trying to improve site performance. Image optimization is one way for site owners to improve performance without breaking the bank.

Some people assume that just because they use WordPress, their website is automatically SEO-optimized, and their images are too. There are many image optimization plugins available for WordPress, and if you're not using any of these, you're probably missing out on SEO and user experience.

Among the WordPress plugins, I recommend trying EWWW and imagify.io. These plugins have a variety of features such as  bulk image optimization, file type conversion, and automatic conversion of new uploads. Cloudinary's WordPress plugin is also great if you'd like to get optimized images hosted in the cloud for you. A lost second on the web can cost you big in the bottom line.

See our plugin comparison for more details.

Contributed by Pietro Saccomani, Founder, MobiLoud

Something that a lot of newcomers fail to understand when it comes to image optimization is the value of optimal resolution and quality. In a few image formats such as JPEG, which are lossy, some of the details are lost as a tradeoff for reduced size. In these cases, the lost details that are mostly irrelevant and would go unnoticed.

Another underestimated way to reduce size is picking the optimum resolution. Almost everyone knows that lowering the resolution reduces the size, but very few people understand how massive the difference in size is. This is because image size scales to the square of resolution dimensions.

All of these operations mentioned above can easily be achieved on the Unix command line using ImageMagick. To reduce the quality of an image (only for lossy image formats), run:

convert <input image location> -quality <quality desired (in precentage)> <output image location>

For example:

convert input-image.jpg -quality 55 output-image.jpg

To change the resolution of the image (also works on lossless formats):

convert <input image location> -resize <resolution> <output image location>

For example:

convert input-image.jpg -resize 1280x720 output-image.jpg

Mix and match quality reduction with resolution changes until you have an image with the detail you desire and the lowest possible size.

Contributed by Soham Kamani, Founder, sohamkamani.com

Traditionally, icons on a web page have been drawn using bitmaps, which are often stitched together to deliver faster over the wire. However, bitmaps do not scale well on different screen resolutions, and this is a problem for responsive web design.

Font icons have proved to be a great alternative. Another common alternative is to use SVG, which means drawing scalable vector graphics. While there has been a good amount of research about optimizing network performance of font icons or SVGs, I could not find data that talks about the performance of these icons after they have been sent and rendered on the browser.

I wanted to check which type of icon allows 60 frames per second. The test candidates are:

• Font icons: A font file embedded in an HTML page using the <link> tag, where the icon was usually created using a class.

• Inline SVG: SVG markup was used for the icon embedded into the web page.

• Background SVG: The SVG was inserted as data:uri in a class that was applied to repeated elements on the web page.

The web page had each of these icons repeated multiple times, making the page long enough to scroll. Running each test multiple times, and watching trends for each of the 733+ icons should eliminate noise in the data. Basically, the performance order was, from best to worst: Font icons > background SVG > inline SVG.

From a pure performance perspective, font icons seem to perform the best. However, they cannot be manipulated like inline SVG icons, and are restricted to animating as a single unit. When using these recommendations on your site, they should be tested (using something like browser-perf).

Link to the full article: http://blog.nparashuram.com/2015/05/icons-font-inline-svg-or-background-svgs.html

Contributed by Parashum, Founder, blog.nparashuram.com

There are several ways to optimize images for online use:

First, creating multiple image sizes is highly recommended. Often you only need to display a thumbnail of an image, which would not require the full size. In such a case, creating a thumbnail copy of the original image save you load time, especially when creating a image gallery.

Take the time to decide which image format suits your need. You often won't need the maximum quality or any transparency options. When you do need transparency and high quality, go with PNG. If you need to display larger images without transparency, go with JPG.

When creating images, you can always try to play around with the quality settings, especially for JPG. Just try see how an image looks with a lower quality setting before choosing best quality. The differences are usually hardly visible, especially for images with less complexity and less colors.

Contributed by codester

Videos don't necessarily have to be an impediment to improved web page performance. Here are some of the ways to optimize video files:

• File size: A video's file size depends on the bitrate and other metadata attached to it. Data compression is one of the techniques to reduce the video file size without losing quality. FFmpeg, HandBrake, MPEG Streamclip are some of the compression tools that can be used to restructure the way pixel data is stored to make the final video optimized and lighter.

• File format: Different video file types store data in different ways, which is why a WebM video is lighter than an MP4 video. In addition, the browser may support only a few of the available formats, so ensure you aren't embedding videos that require extra plugins. Modern browsers support HTML5 formats like MP4, WebM and Ogg, which are is recommended.

• CDNs: CDNs can be used to stream video content so that it is available to the user instantaneously. Online Video Platform (OVP) providers offer services that handles video optimization to provide the user with seamless video streaming.

• Video streaming: Several new technologies make use of Adaptive Bitrate Streaming over HTTP to enable streaming; some of these include MPEG-DASH, HTTP Live Streaming (HLS), HTTP Dynamic Streaming (HDS), and so on. All these protocols are designed to stream videos from a regular HTTP server, making specialized media delivery servers redundant. The video stream is broken into smaller chunks of different bitrates that are ready for playback; a device trying to view the video file can pick the data stream as needed based on the bandwidth available.

• Optimizing page design for video: In addition to the format and data delivery of the video content, it's also important to optimize the web page design so that it doesn't hinder the user experience. Here are some points to consider when designing your website:

• Optimizing for mobile devices: The video must re-adjust along with the responsive design of the website; it should also detect the device orientation and display the video accordingly.

• Video size and placement: Using HTML or CSS to specify the exact width and height of the embedded video allows the browser to allocate the required bandwidth and avoid unnecessary overhead.

• Deferring videos: Embedded videos that are configured to auto-play requires the page to make additional requests for files and resources needed for video playback, which might slow down the page significantly. Deferring videos from loading till after the initial page load has completed frees up bandwidth.

Multimedia content has become a necessity in engaging users and can improve conversion rates on your website. So there are more reasons to embed videos on your web page than there are disadvantages. There is no cost to performance if we optimize the page design, pick the right video format and utilize media delivery providers to handle video processing efficiently.

Contributed by Kameerath Kareem, Writer, catchpoint

When compressing your images, it's very important to make a proper balance between the image size and image quality. The quality of the image will decrease as the size decreases.

Here are a few different methods of optimizing/compressing your image size:

• Optimizing images before uploading to the site: Optimizing your images before uploading them to your website may be time consuming, but it's the most effective of all methods.

• Offline tools for reducing image size: No matter on which platform or operating system your machine runs, you will easily find a free or paid tool according to your preference. Some recommended offline tools are: Photoshop, GIMP, Trimage, ImageOptim (MAC utility), PNGGauntlet and RIOT (Windows).In RIOT, you can preview and compare your final results with the original image, is very useful.

• Online tools for reducing image size: If you don't want to go through the hassle of downloading and installing the offline software on your computer, you can opt for online tools. Some recommended tools are: JPEGMini, PunyPNG, TinyPNG, Kraken.io.

• Optimizing images after uploading to WordPress: There are various WordPress plugins available, however, this method is not as efficient as optimizing images before uploading them to your blog. Some of the most popular plugins are: Smush.it, EWWW Image Optimizer, CW Image Optimizer, Imsanity, Hammy. In fact, WordPress has a default JPEG image compression setting for images uploaded to the WordPress media gallery, which compresses by 90% of the original quality. There is no way to change this setting from the admin panel. Read our post explaining how to configure this setting.

With regards to image dimensions, the larger the dimensions the larger the image, which leads to slower page load. Don't depend on resizing the height and width of the images in your post editor, because the browser will still load the image with original dimensions and then resize it.

Therefore, you need to resize the image dimensions before uploading to your website. Check the content area width of your blog and resize images according to it. There are various tools for this purpose, such as PicResize, IrfanView, PicMonkey.

Contributed by Pankaj Kumar, WPBlogCafe

Whenever I start optimizing any website for performance, the biggest bottlenecks are non-optimized images, so I tend to start here. Luckily, it's easy to fix if you approach it systematically.

Here are three steps you should follow when preparing images for the web:

1. Select the right image format: Broadly-supported image formats for the web are JPEG, PNG, and GIF. GIF is the only format that supports animations, but you should consider the <video> HTML tag and the WebM format for optimal performance. If you're displaying a still picture, this leaves you with the JPEG and PNG. The general rule of thumb is: Use PNG for illustrations, graphics, logos and all the images with only a few colors. Use JPEG for everything else: Pictures, Illustrations with gradients, and so on.

2. Downsize the images before uploading them to your server: Before your downsize your images, you need to know how your images will be displayed on your website in terms of pixel dimensions. If your content container is 1200 pixels wide, you should downsize your images to be 1200 px wide. If you want to provide the optimal experience for users with retina screens, consider providing 2x image resolution, in our case 2400px (in this case, you should use the srcset and sizes attributes of the <img> HTML tag).

3. Compress and optimize the images: The last step is to use an appropriate image compression algorithm to strip away as many bytes as possible. This one is the trickiest. It depends on your own preferences and it's the constant debate of what is more important to you: smaller file size or better quality?

Instead of leaving you here, I want to share a sweet spot that serves as a good starting point for JPEG images. When exporting the image from your desktop software (i.e. Photoshop), save the image at the quality set to 90/100. Then run it through one of the online image optimization tools.

If your CMS of choice is WordPress, you can rely on WordPress to handle at least steps 2 and 3. We've tested all leading solutions for WordPress in our 'Ultimate Guide to Image Optimization for WordPress' (more details).

Contributed by Primoz Cigler, ProteusThemes

It does not have to be that way ― with Shopify and Cloudinary, you are just one step away from having the perfect e-commerce store. In this article, you will learn the basics of creating your store with Shopify and integrating it with Cloudinary, so you can manage your images.

With Cloudinary managing your images, you are assured of optimized media content delivery which leads to improved performance, shorter website load times, and more conversion.

What is Shopify?

Shopify is an e-commerce platform that enables you to set up your own online shop. It supports uploading products and setting up payments and shipping, among other activities.

What is Cloudinary?

Cloudinary is a SaaS offering that provides solutions for image and video management, including server or client-side upload, a huge range of on-the-fly image and video manipulation options, quick CDN delivery, and powerful asset management options.

Cloudinary enables web and mobile developers to address all their media management needs with simple bits of code in their favorite programming languages or frameworks, leaving them free to focus primarily on their own product's value proposition.

Getting Started with Shopify

To create a Shopify platform, follow this step-by-step process:

1. Sign Up with Shopify

Visit Shopify and create an account using the signup form. Fill in the necessary details where required.

2. Start Setting Up Your Online Shop

After signing up, you will be directed to your store admin screen. From there, you can modify what your store looks like, upload products, set up payments and shipping.

3. Pick a Theme

You can choose a theme from Shopify’s theme store. Themes can be modified by editing their HTML and CSS files.

For a more detailed tutorial about how to build an online store with Shopify, check out this cool article here.

Integrating Cloudinary with your Store

What’s a store without descriptive images? What’s your product if you can’t successfully manipulate images to tell your audience a convincing story? Even if you already took care of having the best images, how frustrating it can be if these are loaded so slowly and your potential customers leave the store before becoming real customers. You can solve all these using Cloudinary. In addition to creating light-weight images that reduce the loading time of your page, Cloudinary’ offers other awesome features from which you can benefit..

To get our fetch URL, which we will need later, we’ll have to sign up for a free Cloudinary account:

Cloudinary also offers a dashboard where you can manage your media contents that are uploaded to your cloud. You can also apply transformations to these images via the Media Library page on the dashboard.

Bearing in mind that the integration is technical and requires editing our Shopify Theme code, let’s take the following steps to set up Cloudinary:

STEP 1: Edit your “settings_schema.json” file

On the homepage of your store, navigate to: Online Store > Themes > Actions > Edit Code > Config.

Open the settings_schema.json file:

In between the very first "[" and the "{", insert the following code into settings_schema.json. Then go to the next line and insert a comma right before the start of the next opening "{":

    {
      "name": "Cloudinary",
      "settings": [
        {
          "type": "paragraph",
          "content": "Load all your images leveraging Cloudinary's remote image Fetch for best page load performance."
        },
        {
          "type": "checkbox",
          "id": "enableCloudinary",
          "label": "Enable Cloudinary"
        },
        {
          "type": "text",
          "id": "cloudinaryUrl",
          "label": "Cloudinary Fetch URL",
          "info": "Your Cloudinary Fetch url containing your domain, cloud name, and global transformations to apply to all images (ex:
          `\/\/res.cloudinary.com\/myAcct\/image\/fetch\/q_auto,f_auto,fl_lossy\/`)."
        }
      ]
    }

STEP 2: Add a New “Snippet”

On your store’s homepage, navigate to: Online Store > Themes > Actions > Edit Code > Snippets.

Add a new snippet and name it cloudinary.liquid

Insert the following code into cloudinary.liquid and hit the Save button.

    {% if img %}
            {%if settings.enableCloudinary and settings.cloudinaryUrl != blank %}
        {% assign baseUrl = settings.cloudinaryUrl %}
        {%if img contains "?" %}
          {% assign imgUrl = img | split: "?" %}
          {% assign fetchQuery = "?" | append: imgUrl.last | url_encode %}
          {% assign fetchUrl = imgUrl.first | append: fetchQuery %}
        {% else %}
          {% assign fetchUrl = img %} 
        {% endif %}
        {%if transformation and transformation !=blank %}
          {% assign imgTransformation = transformation | append: '/|' | prepend:'|/' | replace        :'//','/' %}
          {% assign baseUrl = baseUrl | append: '/|' | append: transformation | replace:'fetch        //', 'fetch/' %}
        {% endif %}
        {% assign imgUrl = baseUrl | append: '/https:' | append:fetchUrl | replace: 'https:htt       p','http' | replace:'/|/','/' | replace:'//|','/' |
    replace:'/|','/' %}
        {{ imgUrl | img_tag: img_tag, img_class}}
      {% else %}
        {{img | img_tag: img_tag, img_class}}
      {% endif %}
    {% endif %}

STEP 3: Configure Your Cloudinary Settings

From the store homepage, navigate to: Online Store > Themes > Customize > General Settings

Click on the Cloudinary section

Tick the Enable Cloudinary checkbox

Insert the Cloudinary fetch URL, which is below the input box and hit the Save button

An example of the fetch URL would be something like the following:

//res.cloudinary.com/demo/image/fetch/q_auto,f_auto,fl_lossy

The demo parameter should be replaced with your Cloudinary cloud name.

You can read more about the auto property which applies global transformations to your images for optimization reasons

STEP 4: Update Your Section's Theme

On the store homepage, navigate to: Online Store > Themes > Actions> Edit Code > Sections

Click on the section or sections that you want to update.

    <!-- from feature-row.liquid -->

    <div class="page-width feature-row">
      {% capture image_layout %}
        <div class="feature-row__item">
          {% if section.settings.image != blank %}
          <!-- replace the commented out code using your `cloudinary.liquid` snippet  -->
          <!-- {% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
            {% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
            {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            {% include 'image-style' with image: section.settings.image, width: 545, height: 545, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
              <div style="padding-top:{{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="feature-row__image lazyload"
                     src="{{ section.settings.image | img_url: '200x200' }}"
                     data-src="{{ img_url }}"
                     data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ section.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ section.settings.image.alt | escape }}">
              </div>
            </div>

            <noscript>
              {{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
            </noscript> -->

          {% else %}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
        </div>
      {% endcapture %}

      <div class="feature-row">
        {% if section.settings.layout == 'left' %}
          {{ image_layout }}
        {% endif %}

        <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }}">
          {% if section.settings.title != blank %}
            <h2 class="h3">{{ section.settings.title | escape }}</h2>
          {% endif %}
          {% if section.settings.text != blank %}
            <div class="rte-setting featured-row__subtext">{{ section.settings.text }}</div>
          {% endif %}
          {% if section.settings.button_label != blank and section.settings.button_link != blank %}
            <a href="{{ section.settings.button_link }}" class="btn">
              {{ section.settings.button_label | escape }}
            </a>
          {% endif %}
        </div>

        {% if section.settings.layout == 'right' %}
          {{ image_layout }}
        {% endif %}
      </div>
    </div>

Remove the original image code. For example:

    {{section.settings.image | img_url: '600x600' | img_tag: section.settings.image.alt, 'feature-row__image' }}

Next, assign a new “img” variable to the Shopify CDN hosted image URL.

    {% assign img = section.settings.image | img_url: '600x600' %}

Then, include your Cloudinary snippet and pass the new img variable and optionally pass in additional Cloudinary transformations to further customize your images for your specific templates, in addition to any global transformations you may have configured:

{% include 'cloudinary', img:img, transformation: 'w_300,h_300,c_fill,g_auto', img_tag:
section.settings.image.alt, img_class: 'feature-row__image' %}

Congratulations! You're images are now loading through Cloudinary

Few Points to Take Away

1. One click enable/disable of the Cloudinary integration - ideal for performance A/B testing on demand.
2. The integration uses Cloudinary’s 3rd party proxy "Fetch" protocol so you can still use your Shopify media library as is and we'll import, manipulate and deliver all your images via Cloudinary automatically.
3. You'll have access to both Global transformation settings (common transformations for all assets) as well as location specific / template specific transformation settings. The only downside is that you'll need to update your image references in your existing snippets / templates as shown in the integration guide. However, you also have full control to edit the integration to your needs using this version as a starting point.

Conclusion

Image optimization in websites is a very important feature that cannot be overlooked. The same can be said for online stores. Having a store that displays its content in the best possible way and display it immediately will not only speak well of your brand, but will play a huge role in dictating sales volume and other important factors in the long run. Some of these factors include customer acquisition rate, conversion rate, and whether or not they keep visiting your site after the first few experiences. For a more detailed overview on how to optimize images on your websites, you can check out this article by Prosper Otemuyiwa .

Cloudinary is now supporting the sonar tool, an open source platform that aims to bring together best practices for web developers.

What is sonar?

sonar is a linting tool for the web that was developed out of Microsoft's Edge team. The code for the project was donated to the JS Foundation and development is open and looking for input from anyone in the web community, such as browser vendors, web experts and developers.

There are four primary goals for sonar:

• Use the community to identify key web development best practices

• Provide tools that help web developers write the best possible code

• Help identify issues in existing code that do not adhere to current best practices

• Promote community tools and services that drive web development best practices

Currently sonar supports jsdom, Chrome and Edge 15 web browsers, and expect to add support for Firefox soon. sonar is also integrating other best-in-class tools and services, such as aXe for accessibility and SSL Server Test for checking the certificate configuration.

Cloudinary Helps Assess Site Speed

sonar's scanner tool currently tests the following for web sites:

1. Accessibility of the website to serve users with impairments or disabilities

2. Interoperability with of the site with different browsers

3. Performance for fast page load time

4. Progressive Web Apps tests the interactions of the site with iOS touch icon and mobile software that supports the web app manifest file.   

5. Security for various disallowed headers and vulnerabilities.

Cloudinary is providing some functionality under the Performance section of sonar scanner that was originally built for Cloudinary's website speed assessment tool. Specifically for sonar, Cloudinary is providing advanced algorithms that demonstrate how changes - such as image size, format, quality and encoding parameters - can deliver significant reductions in file size while maintaining perceived quality and ultimately making websites run faster in any browser.

The results will display/drill into each image that could benefit from an optimization and what the estimated compression savings could result in.

You can use this rule in the online site scan or via the command line as part of the latest version of sonar (0.12.2).

We are very excited to participate in the program with the sonar team. We hope all Cloudinary users and community members will visit the sonar project, and take a look to see just how valuable it could be in helping maintain best practices for web development. For more information about sonar, read through their blog post on the scanner tool here, check out their website, GitHub repo or follow them on Twitter at @narwhalnellie.

In this tutorial, we're going to learn how to prevent WordPress from generating multiple (resized) versions of an image. As of WordPress 4.8.1, with the default Twenty Seventeen theme, WordPress will generate six additional resized versions of a single image. I've tested it on a clean installation, and here's a screenshot to prove it.

WordPress 4.8.1, with the Twenty Seventeen theme, generating six resized versions for every image uploaded.

Generating this many images might negatively affect your WordPress host's performance. Specially while taking backups. How? Let me explain.

In the example above, we see that there's a 99.3 percent increase in the amount of storage used for uploading a single image. That's almost twice the size.

While most web hosts provide unlimited storage, this would significantly increase the backup size and duration.

Cloudinary users would know that one can directly obtain a resized version of an image using Cloudinary's image optimization features, simply by adding parameters in the image URL. But that's a story for another day.

Why Does WordPress Generate Multiple Resized Versions of each Image?

Good question! First, it's important to note that both WordPress and the active theme generates multiple resized versions of an uploaded image.

The smaller version of the image is served to a mobile device, the larger to a desktop device, and so on. The active theme might have custom post types, (a popular example being the portfolio), which could require certain fixed dimensions of the image.

Responsive images was introduced in WordPress 4.4. It scans the device's viewport and serves the optimal dimension of the image to the browser. This approach reduced the size of the image to be loaded, resulting in faster loading times and better user experience.

It's OK to Have Multiple Versions of Uploaded Images

Here's the situation - and I cannot stress this enough - the backup size/time issue described above is not that bad. Rather, for a regular WordPress blog, it is absolutely fine to have multiple versions of the uploaded images.

Here's why:

WordPress is an intricate system with a lot of moving parts. Removing a theme's default behavior (in our case, generating multiple versions of the behavior) might not be the best idea. It could result in broken images across your site - both in the desktop and mobile responsive versions - inadvertently hurting image SEO and hampering the user experience.

Therefore, it requires in-depth understanding of theme's functioning and experience in WordPress development. This tutorial should not be used by intermediate WordPress users on a live site.

Side Note: If you're like me and want to take things apart in preset to understand them - be my guest. But please use an experimental WordPress installation!

How to Prevent WordPress From Generating Multiple Image Versions

In order to prevent broken links, I've structured this tutorial in three phases.

• Phase One: Identifying the images we could safely prevent from generating further

• Phase Two: Committing the changes in two parts:

• Part 1: Changing the core WordPress settings

• Part 2: Editing the active theme's functions.php file

• Phase Three: Looking at the methods one could use to delete the existing resized images.

Phase One: Identifying Images to be Removed

In this phase, we identify the images that can be safely removed, without breaking the website. As a reference, we'll use the same image uploaded in the beginning of this tutorial.

The first step is to prepare a list of all the post types you are currently using or might use in the future. You will need to identify the corresponding image sizes for each post type. For instance, if you plan to use the portfolio layout of a multipurpose theme, you should retain that image size. However, if you prevent WordPress from generating this particular image size, you might not notice it now. But the moment you use portfolio post type, you would see broken images.

Before you can proceed with this phase, you need to be absolutely certain about the dimensions of the image you want to use in your site.

Would This Affect Responsive Images?

As I mentioned earlier, WordPress' default responsive property enables you to serve different sizes of the same image, based on the visitor's viewport. In other words, a smaller image size would be served to a visitor from a mobile browser and a larger image size would be served to a visitor from the desktop browser.

Preventing WordPress from generating multiple images might have a negative impact on performance and user experience.

Size comparison of resized images in WordPress

Let's say you have prevented WordPress from generating any additional image sizes.

The smaller size of the image would never be generated, and only the original image would exist. In our case, the original image's size is 544KB. The same image would be served to a visitor from a mobile browser or a desktop browser.

Now let's say you did not prevent WordPress from generating additional image sizes. Different versions of the image would exist - including small, medium, large. Only in this case, the smaller sized version of the image would be served to the mobile browser. The size of the smaller image is 68KB, which is 87.5 percent smaller than the original image, which equates to an 87.5 percent bandwidth saving that would lead to a faster loading time and better user experience.

These savings are possible if you simply left WordPress alone to do its job!

Not to mention if you're using Cloudinary, you would easily be able to generate browser-dependent optimized images (in any resolution), simply by adding parameters to the image request URL. If you're a WordPress developer looking to implement a scalable, content delivery network- (CDN) powered, on-demand image transformation and optimization in your WordPress site, you should check out Cloudinary.

On the other hand, some multipurpose themes generate excessive number of images, which aren't really required at all times. One might only be using the homepage and the blog layout of a certain multipurpose theme. In such cases, you could identify the image sizes you need and safely do away with the ones you would not need.

What About Featured Images?

A blog post's featured image visually communicates the premise of the article, and increases click rate, readership and shareability. In other words, featured images are super important.

Based on your blog's homepage design, you might have a smaller sized version of the featured image used in the home page, or the blog pages. However, in the individual article view, you might be using a large version of the featured image. Most Medium-styled themes use this technique. In such a case, you might want to prevent WordPress from generating custom image sizes, except the featured image.

This is where things get tricky. Since we all use different WordPress themes, each theme will have its own unique code. It would be quite difficult for this tutorial to suggest a code change for each theme.

Sample code to create custom image sizes in WordPress. Credits: WPShout

Rather, it would be much simpler if we used the method outlined by this excellent article from WPShout. Read the bit under "Adding WordPress Custom Image Sizes in function.php" to create you own custom featured image sizes.

At the end of phase one, you have identified the images that you would want to remove, i.e. prevent WordPress from further generating these image sizes.

Phase Two: Preventing WordPress from Generating Custom Image Sizes

We'll divide this phase into two parts. In the first part, we'll look at changing the default WordPress settings. The second part will deal with modifying the theme's functions.php file.

Part One - Changing WordPress' Media Settings to Prevent Generation of Custom Images

This part is fairly simple.

1. Login to your WordPress dashboard and go to Settings > Media.

Default WordPress Image sizes

You'll see the default sizes WordPress resizes each image. To prevent WordPress from generating these image sizes, simple change the values to 0.

Preventing the WordPress core from generating multiple image sizes

Let's put this technique to test now. I'll upload another image in WordPress and check whether the images are being generated. The uploaded image is night shot of the NYC skyline, with a resolution of 5760x3840 (22 MP).

Let's see how many images are generated.

Before and after effect of preventing WordPress from generating resized images.

Yes, it works! You would notice that three images are not generated - exactly the ones that we disabled in the last step.

On a separate note, when this image is uploaded to Cloudinary, it can be retrieved in any resolution by simply changing a single parameter. When a browser requests an image, Cloudinary detects the browser type (Chrome, Firefox, etc) and serves the most optimized version of that image, which is supported by that bowser.

Part Two - Modifying the Theme's functions.php

Now let's look at changing the active theme's settings, in order to prevent it from generating additional images. Here it's important to reiterate that you should do this only if you are absolutely certain about how the active theme displays images in various posts and pages.

In our case, the Twenty Seventeen theme generates three custom images. After we disabled the WordPress core settings from generating resized images, there were three images that we still generated. This was done by the active theme. Depending on the theme, this number would vary. Most multipurpose themes use more than five custom image dimensions.

Custom image sizes generated by WordPress

How to Edit a WordPress Theme's functions.php from the WordPress Dashboard

Launch your WordPress dashboard, go to Appearance > Editor and click on Theme Functions, as shown in the screenshot below:

How to navigate to Theme Functions using the WordPress Editor

Next, we want to find all occurrences of the two functions and delete them. It's always a good practice to comment out a piece of code, rather than deleting it. This gives the developers a chance to investigate (in case something goes wrong) and makes it easier to revert the changes.

The first function we want to disable is the addimagesize() function. This function is used for generating additional images sizes by the theme. The second function we want to disable is called setpostthumbnail_size(). Doing this would stop your theme from generating post thumbnail size in WordPress.

We need to comment out all occurrences of these functions. To do this, simply use your browser's Find utility. Press Ctrl+F (or Cmd+F on a Mac) and type addimagesize. Your browser will highlight all occurrences of this text in the website.

Once you find these lines, add '//' at the beginning to comment them out.

Similarly, find all occurrences of setpost-thumbnailsize and turn them into comments.

The following screenshot highlights the same.

Commenting out the addimagesize() function in a theme's functions.php file

Once you've commented the lines, remember to save the settings.

How to save settings in the theme's functions.php file from the WordPress dashboard

In our example, the Twenty Seventeen theme did not use the setpostthmbnail_size() function. Upon disabling these functions, the additional images were not generated by WordPress.

Phase Three: Deleting Old Images

Depending on how long you've had your WordPress blog or the number of images uploaded, you could have multiple versions of each image in your media library. If you are certain about the image sizes you don't require, you can safely delete them.

There are a couple of ways of batch deleting images from WordPress.

Batch Deleting Images via SSH

This method works if you have SSH terminal access to your WordPress host. While most shared or managed WordPress hosts do not allow this process, it is the fastest one, provided you've used Linux/UNIX before. It uses the classic find and delete feature in the bash shell.

First, we'll navigate to the WordPress Media directory, i.e. /wp-content/uploads directory and execute the find and delete function.

We need know the (i) resolution and (ii) extension of the images we want to delete.

For example, to delete all the 100x100px JPG images, the command would be:

find . -name "*100x100.jpg" -type f -delete

This command would recursively delete all JPG images ending with 100x100 in the filename. Check out this helpful AskUbuntu answer for more info on the same.

We can repeat this process for each resolution we want to remove.

Batch Deleting Images via FTP

FTP is one of the easiest ways to batch delete files, albeit a bit time-consuming. Simply connect to your WordPress host using your preferred FTP client (we'll use FIleZilla in this tutorial).

Navigate to the public_html/wp-content/uploads directory.

From FileZilla's main menu, select Server > Search Remote Files.

In the new dialog box, fill in the following information, as shown in the screenshot below.

Recursively search and delete images in WordPress via FTP using FileZilla

1. The Search directory should be the uploads folder

2. You can add multiple parameters to the search query. In our case, we want to remove all images with 100x100 resolution. Hence, we've selected that the filename should contain the phrase 100x100. In case you wanted to delete only JPG files (optional), you could add another parameter, which mentions that the filename should end with jpg.

3. Once the parameters are defined, click on Search

4. FileZilla will query all the folders under the uploads directory and return the relevant results.

5. Select the files, right-click and click on Delete.

That's it! Filezilla will delete all the files one-by-one.

Wrapping Up

Preventing WordPress from generating images is a delicate task, which, if done improperly, could lead to broken image links across your site. You might save a few minutes on the backup time, but you  run the risk of hampering the user experience. Remember, broken images indexed on Google might lead to lower SEO scores, which might affect your organic traffic and SERP ranking.

However, if you are absolutely certain about the image resolutions you want to use, you can prevent WordPress from generating additional/unwanted image sizes. There are two ways to do this. First you can change WordPress' default Media settings. The second step is to investigate the active theme's functions.php and commenting out the line of code that call the addimagesize() and setthumbnailpost_size() functions.

Finally, if you want to delete the existing images that you no longer wish to use, you can delete them via FTP or SSH. Phase three of this tutorial describes the matter in depth.

On a separate note, if you are running an image-heavy website, such as a photo-blog or a travel blog with user generated content, a dedicated image optimization and delivery solution would do wonders to your user experience.

Cloudinary is the perfect solution, thanks to it's on-the-fly image optimization and transformation capabilities. Plus its multi-tier content delivery network delivers images in the shortest time possible to your website visitors. Manually resizing and optimizing images are a thing of the past, thanks to Cloudinary's range of on-the-fly transformation features.

What are your thoughts on WordPress generating multiple image sizes? Did this tutorial change your mind about altering image sizes? Let us know in the comments below!

*Originally posted on Loud Techie

Knowledge is power. And if you allow your users to upload images, you also probably want to better understand what their images contain. Whether a photo is of a building, people, animals, celebrities, or a product, image processing and analysis can assist in further comprehension. The benefits of this knowledge can go beyond "merely" categorizing your content and making your image library searchable: drawing insights from user generated content can be very useful! What better way to learn more about your users than to analyze the images they upload and find out what they care about and then have the ability to display relevant content to them according to their interests or even match them with other users that share similar interests.

Analyzing the contents of a photograph would be a huge time sink if performed manually on a lot of images. Enter Amazon Rekognition, a service that uses deep neural network models to detect and tag thousands of people, objects and scenes in your images, and lets you easily build powerful visual search and discovery into your applications.

Cloudinary has integrated two Amazon Rekognition add-ons into its image management and manipulation pipeline: the Amazon Rekognition Auto Tagging add-on and the Amazon Rekognition Celebrity Detection add-on.

Amazon Rekognition: Categorization

The Amazon Rekognition Auto Tagging add-on can automatically identify what's in a photograph and returns a list of detected categories and the confidence score of each category. The add-on is very simple to use: just set the categorization parameter of Cloudinary's image upload API to aws_rek_tagging while uploading a new image or updating an existing image and the response will include a list of identified tags for the image.

For example, uploading the following picture of a puppy to Cloudinary and requesting categorization:

Cloudinary::Uploader.upload("cute_puppy.jpg", 
  :categorization => "aws_rek_tagging")

\Cloudinary\Uploader::upload("cute_puppy.jpg", 
  array("categorization" => "aws_rek_tagging"));

cloudinary.uploader.upload("cute_puppy.jpg",
  categorization = "aws_rek_tagging")

cloudinary.v2.uploader.upload("cute_puppy.jpg", 
  {categorization: "aws_rek_tagging"},
  function(error, result){console.log(result);});

cloudinary.uploader().upload("cute_puppy.jpg", ObjectUtils.asMap(
  "categorization", "aws_rek_tagging"));

cl_image_tag("cute_puppy.jpg")

cl_image_tag("cute_puppy.jpg")

CloudinaryImage("cute_puppy.jpg").image()

cloudinary.image("cute_puppy.jpg")

cloudinary.url().imageTag("cute_puppy.jpg")

cl.imageTag('cute_puppy.jpg').toHtml();

$.cloudinary.image("cute_puppy.jpg")

<Image publicId="cute_puppy.jpg" >

</Image>

<cl-image public-id="cute_puppy.jpg" >

</cl-image>

cloudinary.Api.UrlImgUp.BuildImageTag("cute_puppy.jpg")

MediaManager.get().url().generate("cute_puppy.jpg")

The upload response includes the various categories that were automatically detected in the uploaded photo together with the confidence level of the detected category. So Amazon Rekognition is 91% sure that the picture contains a puppy and is 82% sure that the breed is Newfoundland.

...
"info": {
  "categorization": {
    "aws_rek_tagging": {
      "status": "complete", 
      "data": [
        {"tag": "Animal", "confidence": 0.9117},
        {"tag": "Canine", "confidence": 0.9117}, 
        {"tag": "Dog", "confidence": 0.9117}, 
        {"tag": "Mammal", "confidence": 0.9117}, 
        {"tag": "Pet", "confidence": 0.9117}, 
        {"tag": "Puppy", "confidence": 0.9117}, 
        {"tag": "Newfoundland", "confidence": 0.8253}, 
        {"tag": "Husky", "confidence": 0.596}, 
        {"tag": "Adorable", "confidence": 0.5791} 
...

For more information on the Amazon Rekognition Auto Tagging add-on, see the documentation.

Amazon Rekognition: Celebrity Detection

The Amazon Rekognition Celebrity Detection add-on can automatically recognize thousands of celebrities in a wide range of categories, such as entertainment and media, sports, business, and politics. This add-on is also very simple to use: just set the detection parameter of Cloudinary's image upload API to aws_rek_face while uploading a new image or updating an existing image, and the response will include a list of identified celebrities for the image.

For example, uploading the following picture to Cloudinary and requesting detection:

Cloudinary::Uploader.upload("brangelina.jpg", 
  :detection => "aws_rek_face")

\Cloudinary\Uploader::upload("brangelina.jpg", 
  array("detection" => "aws_rek_face"));

cloudinary.uploader.upload("brangelina.jpg",
  detection = "aws_rek_face")

cloudinary.v2.uploader.upload("brangelina.jpg", 
  {detection: "aws_rek_face"},
  function(error, result){console.log(result);});

cloudinary.uploader().upload("brangelina.jpg", ObjectUtils.asMap(
  "detection", "aws_rek_face"));

cl_image_tag("brangelina.jpg")

cl_image_tag("brangelina.jpg")

CloudinaryImage("brangelina.jpg").image()

cloudinary.image("brangelina.jpg")

cloudinary.url().imageTag("brangelina.jpg")

cl.imageTag('brangelina.jpg').toHtml();

$.cloudinary.image("brangelina.jpg")

<Image publicId="brangelina.jpg" >

</Image>

<cl-image public-id="brangelina.jpg" >

</cl-image>

cloudinary.Api.UrlImgUp.BuildImageTag("brangelina.jpg")

MediaManager.get().url().generate("brangelina.jpg")

The upload response includes the various celebrities that were automatically detected in the uploaded photo together with the confidence level of the detected celebrity. So Amazon Rekognition is 100% sure that this is a picture of Brad Pitt and Angelina Jolie. The response also includes information about unrecognized faces detected in the image if relevant, and the results provide detailed data on each face's location, pose, orientation within the image, and facial landmarks.

{
...
"info": 
  {"detection": 
    {"aws_rek_face": 
      {"status": "complete",
       "data": 
        {"celebrity_faces": 
          [{ 
            "name": "Angelina Jolie",
            "match_confidence": 100.0
            "face":
             {"bounding_box":
               {"width"...
              },
              "landmarks":
               [{"type": "eyeLeft",
                 "x": ...
               }],
            ...
           },
                 ...
            "name": "Brad Pitt",
            "match_confidence": 100.0},
                 ...
        "unrecognized_faces": [ ],
         ...
}}}}}

For more information on the Amazon Rekognition Celebrity Detection add-on, see the documentation.

Automatically tagging images

Cloudinary allows you to tag uploaded images, where each image can be assigned one or more tags. You can also leverage the Amazon Rekognition add-ons to automatically assign tags to your images based on a minimum confidence score of identified categories/celebrities.

Simply add the auto_tagging parameter to the upload call and the image is automatically assigned resource tags based on the Amazon Rekognition detected categories/celebrities. The value of the auto_tagging parameter is the minimum confidence score of a detected celebrity that should be used for the automatically assigned resource tag. The value of the auto_tagging parameter is given as a decimal value between 0 and 1, where 1 represents 100%. Assigning these resource tags allows you to list and search images in your media library using Cloudinary's API and Web interface.

Note that the automatic tagging feature can be used with either of the Amazon Rekognition add-ons or with both together. The following example automatically tags an uploaded image with all detected categories and celebrities that have a confidence score of at least 70% (auto_tagging = 0.7).

Cloudinary::Uploader.upload("steve.jpg", 
  :detection => "aws_rek_face", 
  :categorization => "aws_rek_tagging",
  :auto_tagging => 0.7)

\Cloudinary\Uploader::upload("steve.jpg", 
  array(
    "detection" => "aws_rek_face", 
    "categorization" => "aws_rek_tagging", 
    "auto_tagging" => 0.7));

cloudinary.uploader.upload("steve.jpg",
  detection = "aws_rek_face",
  categorization = "aws_rek_tagging",
  auto_tagging = 0.7)

cloudinary.v2.uploader.upload("steve.jpg", {
  detection: "aws_rek_face", 
  categorization: "aws_rek_tagging", 
  auto_tagging: 0.7},
  function(error, result){console.log(result);});

cloudinary.uploader().upload("steve.jpg", ObjectUtils.asMap(
  "detection", "aws_rek_face", 
  "categorization", "aws_rek_tagging",
  "auto_tagging", "0.7"));