Create Image Loading Placeholders

In today’s world, where optimization and loading time is crucial for websites, loading placeholders are developed to improve the waiting experience of users on a webpage.

This article will discuss how to create a loading placeholder image that shows a lightweight version of an image, whether pixelated, blurry etc., before the target or original image is displayed.

We will be using NuxtJS, an open-source front-end framework built on top of Vue that features file-system routing, and it delivers both static-site generation (SSG) and on-demand server rendering.

You can fork and run the completed application in CodeSandbox.

The source code for this project is available on GitHub.

The requirement for completing this tutorial is experience building with Vue.js and Nuxt.js. To follow through the steps, we need to do the following:

• Have node.js installed on our computer. npm will be available for installing dependencies with the installation done.
• A Cloudinary account for storing and uploading our media assets. Signup for a free account, here.
• A text editor of our choice.

We scaffold a nuxt app in a folder called image-placeholders, using the following terminal command:

`npm init nuxt-app image-placeholders`

The command above will trigger a set of prompts. And we can choose the following as shown below:

`Project name: accept the default, Press Enter`


`Programming language: JAVASCRIPT`


`Package manager: Npm`


`UI framework: Tailwind CSS`


`Nuxt.js modules: N/A`


`Linting tools: N/A`


`Testing framework: None`


`Rendering mode: Universal (SSR / SSG)`


`Deployment target: Static (Static/Jamstack hosting)`


`Development tools: jsconfig.json`


`What is your GitHub username? <github-username>`


`Version control system: GIT`

The above command created our project, image-placeholders. We will be using Tailwind CSS for styling, a utility-based CSS framework that helps build modern websites packed with classes used directly in our markup.

In the project directory, we run the following command to spin up a development server on port 3000.

`npm run dev`

We require the cloud name, API key, and API secret to configure Cloudinary in Nuxt. This is retrieved from our Cloudinary dashboard.

We require the @nuxtjs/cloudinary module and we install it with the command below:

npm install @nuxtjs/cloudinary

The nuxtjs/cloudinary module provides a robust development kit allowing us seamlessly use Cloudinary in Nuxt.js apps.

In the nuxt.config.js file, add @nuxtjs/cloudinary as a module in the modules section.

nuxt.config.js

modules: [
  "@nuxtjs/cloudinary"
]

After that, we need to set configurations for the Cloudinary module within nuxt.config.js and add the cloudinary section.

nuxt.config.js

modules: [
  "@nuxtjs/cloudinary"
],

// add this section
cloudinary: {
  cloudName: "<your-cloud-name>",
  apiKey: "<API-Key>",
  apiSecret: "<API-Secret>",
  useComponent: true,
}

The useComponent key set to true lets us use Vue components for images and videos embedded with Cloudinary functionalities.

We create a file .env in the root of the folder. Add the variable’s name within the file and set the value to the API key and secret retrieved from our Cloudinary dashboard. This protects critical information from exposure in the codebase.

.env

    NUXT_API_KEY=<insert api key without quotes>
    NUXT_API_SECRET=<insert api secret without quotes>

Next, we include the value and name set in the .env file into nuxt.config.js

nuxt.config.js

    modules: [
      "@nuxtjs/cloudinary"
    ],
  
    cloudinary: {
      cloudName: "<your-cloud-name>",
      apiKey: process.env.NUXT_API_KEY,
      apiSecret: process.env.NUXT_API_SECRET,
      useComponent: true,
    }

First, we upload a sample image to a folder called image-placeholders on Cloudinary.

Here is the final result of the saved image asset.

With the image stored in Cloudinary, we go to the index.vue component and add the following code snippet.

pages/index.vue

    <template>
      <div class="lg:flex items-center h-screen">
        <div class="w-full px-8">
          <h1 class="md:text-5xl lg:text-4xl font-bold text-stone-800">
            IMAGE LOADING <span class="block">PLACEHOLDER</span>
          </h1>
          <h2 class="md:mb-4 lg:mt-3 text-blue-700">using Cloudinary and Nuxt</h2>
        </div>
        <cld-image
          :public-id="publicId"
          loading="lazy"
          gravity="auto:subject"
          fetchFormat="auto"
          quality="auto"
          alt="Calm teri sitting"
        >
          <cld-placeholder type="pixelate" />
        </cld-image>
      </div>
    </template>
    <script>
    export default {
      name: "IndexPage",
      data() {
        return {
          publicId: "image-placeholders/teri",
        };
      },
    };
    </script>
    <style>
    .cld-image {
      object-fit: cover;
      border-radius: 10px;
    }
    </style>
Code language: HTML, XML (xml)

From the above snippet of code, we did the following:

• We included classes in the markup using Tailwind CSS.
• Configured the cld-image component to deliver and transform our image. The loading attribute is set to lazy load the image and we passed the publicId of the Cloudinary as a prop to the component. Also, in the component, we added the gravity, quality, fetchFormat transformation properties on the image.
• Configured the cld-placeholder component to display a lightweight image version of the target image with type attributes to define the kind of placeholder the image will use. The different placeholder types are:
  • pixelate
  • vectorize
  • blur
  • predominant-color

In this post, we used the @nuxtjs/cloudinary module to render a pixelated version of an image, while lazy loading the image. This technique provides immense user experience benefits.

• Vue Cloudinary Components
• Image transformations