Device Pixel Ratio (DPR) is the ratio between an images’ physical and logical pixels. Let us explore how to manually change an image’s DPR as well as adjust the DPR automatically based on the client device. This is helpful to ensure your website or app is customized not just for the device screen size but also for the device pixel quality.

HTML, CSS, and basic JavaScript knowledge are required to be able to follow this tutorial. Vue.Js knowledge is a plus but not a hard requirement.

The completed project is available on Codesandbox.

You can find the full codebase on my Github

Nuxt.Js is a mature Vue.Js framework built to boost productivity while remaining performant. To get started, we will use the create-nuxt-app utility. Ensure you have Yarn or NPM v5.2+/v6.1+ installed. Open the terminal in your preferred working directory and run the following command.

yarn create nuxt-app nuxtjs-image-device-pixel-ratio
# OR
npx create-nuxt-app nuxtjs-image-device-pixel-ratio
# OR
npm init nuxt-app nuxtjs-image-device-pixel-ratio
Code language: PHP (php)

This will result in a series of setup questions. Here are our recommended defaults.

Once the setup is complete, you can run your project on localhost:3000.

cd nuxtjs-image-device-pixel-ratio

yarn dev
# OR
npm run dev
Code language: PHP (php)

Cloudinary is a media management platform that allows us to make the most of our assets. This is through their comprehensive set of APIs and SDKs. If you do not have an account, feel free to create one here.

Proceed to the media library and add the following file (pexels-kelson-downes-1149137.jpg) in a new folder named nuxtjs-image-device-pixel-ratio.

We can now install the recommended Nuxt.Js Cloudinary plugin. Run the following command in the project root.

yarn add @nuxtjs/cloudinary
# OR
npm install @nuxtjs/cloudinary
Code language: CSS (css)

Once the installation is complete, we may add the package to the modules section of nuxt.config.js.

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/cloudinary'
  ]
}
Code language: JavaScript (javascript)

We now need to connect the module to our account. To do this, let us save our cloud-name to our .env file. This is the file that stores our environmental variables, values we do not want in our codebase.

touch .env
Code language: CSS (css)

You can find your cloud-name on your dashboard.

<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
Code language: HTML, XML (xml)

Let us now add a Cloudinary configuration section to the nuxt.config.js file.

// nuxt.config.js
export default {
  cloudinary: {
    cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
    useComponent: true
  }
}
Code language: JavaScript (javascript)

With the above setup, we can now access assets in our Cloudinary account and use the module’s components to manipulate them.

First, let us configure the image we will be using and the possible device pixel ratios.

// pages/index.vue
<script>
export default {
  data(){
    return {
      imagePublicId:"nuxtjs-image-device-pixel-ratio/pexels-kelson-downes-1149137",
      dprOptions:["1.0","2.0","3.0","auto"]
    }
  }
}
</script>
Code language: HTML, XML (xml)

With the above setup, we can now iterate to display the images at different pixel ratios. This is by using the dpr transformation on the cld-transformation component. We will also crop the images to a width and height of 300 pixels.

<!-- pages/index.vue -->
<template>
  <div>
    <div>
      <h1>Managing Image Device Pixel Ratio</h1>
    </div>
    <div
      v-for="(option,index) in dprOptions"
      :key="index"
    >
      <cld-image
        :publicId="imagePublicId"
      >
        <cld-transformation
            height="300"
            width="300"
            crop="thumb"
        />
        <cld-transformation
            :dpr="option"
        />
    </cld-image>
    <div>
        <p>DPR: {{option}}</p>
        <p>Width: 300</p>
        <p>Height: 300</p>
        <p>Crop: Thumb</p>
      </div>
    </div>
  </div>
</template>
Code language: HTML, XML (xml)

The different images will be easily distinguishable.

Manipulating device pixel ratios for images allows us to manually ensure we have the desired outcome we want. To read more about this API, feel free to go through the documentation.