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-ratio2# OR3npx create-nuxt-app nuxtjs-image-device-pixel-ratio4# OR5npm 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-ratio23yarn dev4# OR5npm 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/cloudinary2# OR3npm install @nuxtjs/cloudinary
Once the installation is complete, we may add the package to the modules
section of nuxt.config.js
.
1// nuxt.config.js2export 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.js2export default {3 cloudinary: {4 cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,5 useComponent: true6 }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.vue2<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 <div8 v-for="(option,index) in dprOptions"9 :key="index"10 >11 <cld-image12 :publicId="imagePublicId"13 >14 <cld-transformation15 height="300"16 width="300"17 crop="thumb"18 />19 <cld-transformation20 :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.