Introduction

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.

Knowledge requirements

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.

Codesandbox

The completed project is available on Codesandbox.

You can find the full codebase on my Github

App Setup

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.

1yarn create nuxt-app nuxtjs-image-device-pixel-ratio
2# OR
3npx create-nuxt-app nuxtjs-image-device-pixel-ratio
4# OR
5npm init nuxt-app nuxtjs-image-device-pixel-ratio

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.

1cd nuxtjs-image-device-pixel-ratio
2
3yarn dev
4# OR
5npm run dev

Cloudinary account setup

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.

@nuxt/cloudinary setup

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

1yarn add @nuxtjs/cloudinary
2# OR
3npm install @nuxtjs/cloudinary

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

1// nuxt.config.js
2export default {
3  modules: [
4    '@nuxtjs/cloudinary'
5  ]
6}

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.

1touch .env

You can find your cloud-name on your dashboard.

1<!-- .env -->
2NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>

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

1// nuxt.config.js
2export default {
3  cloudinary: {
4    cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
5    useComponent: true
6  }
7}

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

Manually changing image device pixel ratio

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

1// pages/index.vue
2<script>
3export default {
4  data(){
5    return {
6      imagePublicId:"nuxtjs-image-device-pixel-ratio/pexels-kelson-downes-1149137",
7      dprOptions:["1.0","2.0","3.0","auto"]
8    }
9  }
10}
11</script>

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.

1<!-- pages/index.vue -->
2<template>
3  <div>
4    <div>
5      <h1>Managing Image Device Pixel Ratio</h1>
6    </div>
7    <div
8      v-for="(option,index) in dprOptions"
9      :key="index"
10    >
11      <cld-image
12        :publicId="imagePublicId"
13      >
14        <cld-transformation
15            height="300"
16            width="300"
17            crop="thumb"
18        />
19        <cld-transformation
20            :dpr="option"
21        />
22    </cld-image>
23    <div>
24        <p>DPR: {{option}}</p>
25        <p>Width: 300</p>
26        <p>Height: 300</p>
27        <p>Crop: Thumb</p>
28      </div>
29    </div>
30  </div>
31</template>

The different images will be easily distinguishable.

Conclusion

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.