> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Why is my image blurry?



Image blurriness can occur for several reasons. This page covers two of the most common reasons and potential solutions:

## Device pixel ratio (DPR) not taken into consideration

Most devices have a DPR greater than 1 and sometimes greater than 2.
When delivering images to devices with a DPR greater than 1, you'll want to proportionately increase the pixels in the image as well.

For background on what DPR is and how it affects delivery, see [Device Pixel Ratio (DPR)](resizing_and_cropping#set_device_pixel_ratio_dpr).

### Set `dpr` to match the device's pixel ratio

For example, to deliver an image to a device with a DPR of 2.0, set the `dpr` transformation parameter to `2.0`:

![DPR 2.0 example with c_fill and g_face](https://res.cloudinary.com/demo/image/upload/c_fill,w_100,h_100,g_face,dpr_2.0/smiling_man.jpg)

```nodejs
cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", dpr: "2.0", crop: "fill"})
```

```react
import { fill } from "@cloudinary/url-gen/actions/resize";
import { dpr } from "@cloudinary/url-gen/actions/delivery";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("smiling_man.jpg")
  .resize(
    fill()
      .width(100)
      .height(100)
      .gravity(focusOn(face()))
  )
  .delivery(dpr("2.0"));
```

```vue
import { fill } from "@cloudinary/url-gen/actions/resize";
import { dpr } from "@cloudinary/url-gen/actions/delivery";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("smiling_man.jpg")
  .resize(
    fill()
      .width(100)
      .height(100)
      .gravity(focusOn(face()))
  )
  .delivery(dpr("2.0"));
```

```angular
import { fill } from "@cloudinary/url-gen/actions/resize";
import { dpr } from "@cloudinary/url-gen/actions/delivery";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("smiling_man.jpg")
  .resize(
    fill()
      .width(100)
      .height(100)
      .gravity(focusOn(face()))
  )
  .delivery(dpr("2.0"));
```

```js
import { fill } from "@cloudinary/url-gen/actions/resize";
import { dpr } from "@cloudinary/url-gen/actions/delivery";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("smiling_man.jpg")
  .resize(
    fill()
      .width(100)
      .height(100)
      .gravity(focusOn(face()))
  )
  .delivery(dpr("2.0"));
```

```python
CloudinaryImage("smiling_man.jpg").image(width=100, height=100, gravity="face", dpr="2.0", crop="fill")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\FocusOn;

(new ImageTag('smiling_man.jpg'))
	->resize(Resize::fill()->width(100)
->height(100)
	->gravity(
	Gravity::focusOn(
	FocusOn::face()))
	)
	->delivery(Delivery::dpr(2.0));
```

```java
cloudinary.url().transformation(new Transformation().width(100).height(100).gravity("face").dpr(2.0).crop("fill")).imageTag("smiling_man.jpg");
```

```ruby
cl_image_tag("smiling_man.jpg", width: 100, height: 100, gravity: "face", dpr: 2.0, crop: "fill")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(100).Height(100).Gravity("face").Dpr(2.0).Crop("fill")).BuildImageTag("smiling_man.jpg")
```

```dart
cloudinary.image('smiling_man.jpg').transformation(Transformation()
	.resize(Resize.fill().width(100)
.height(100)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.delivery(Delivery.dpr('2.0')));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(100).setHeight(100).setGravity("face").setDpr(2.0).setCrop("fill")).generate("smiling_man.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(100).height(100).gravity("face").dpr(2.0).crop("fill")).generate("smiling_man.jpg");
```

```flutter
cloudinary.image('smiling_man.jpg').transformation(Transformation()
	.resize(Resize.fill().width(100)
.height(100)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.delivery(Delivery.dpr('2.0')));
```

```kotlin
cloudinary.image {
	publicId("smiling_man.jpg")
	 resize(Resize.fill() { width(100)
 height(100)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 delivery(Delivery.dpr(2.0F)) 
}.generate()
```

```jquery
$.cloudinary.image("smiling_man.jpg", {width: 100, height: 100, gravity: "face", dpr: "2.0", crop: "fill"})
```

```react_native
import { fill } from "@cloudinary/url-gen/actions/resize";
import { dpr } from "@cloudinary/url-gen/actions/delivery";
import { focusOn } from "@cloudinary/url-gen/qualifiers/gravity";
import { face } from "@cloudinary/url-gen/qualifiers/focusOn";

new CloudinaryImage("smiling_man.jpg")
  .resize(
    fill()
      .width(100)
      .height(100)
      .gravity(focusOn(face()))
  )
  .delivery(dpr("2.0"));
```

You can then use this version of the image and display it in the same container as you would for the original version. It looks sharper.

For `dpr` parameter syntax and values, see [dpr (DPR)](transformation_reference#dpr_dpr) in the Transformation URL API reference.

## Resizing images leads to blurriness

Image resizing may cause some blurriness, whether you are scaling up or down. For example, a 300×300 image scaled down to 100×100 has far fewer pixels to represent the same detail, so it tends to look less sharp and clear. **Enlarging** a small source to fill a much larger area often makes that softness especially obvious. This occurs regardless of the resizing method you use, and some images hold up better than others depending on the image's colors, lining, models, and similar factors.

> **TIP**: When blur is mostly from **downscaling**, see [Downscaling tips](resizing_and_cropping#downscaling_tips) for ways to preserve more detail (including sharpen and other approaches).

The examples below upscale the `front_face` image (original **292×282**) by delivering it at **700** px wide (`w_700`, dimensions **700×676**). That's larger than the source, so detail can look soft.

![Original front_face image scaled up to 700x676](https://res.cloudinary.com/demo/image/upload/w_700/front_face.jpg)

```nodejs
cloudinary.image("front_face.jpg", {width: 700, crop: "scale"})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("front_face.jpg").resize(scale().width(700));
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("front_face.jpg").resize(scale().width(700));
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("front_face.jpg").resize(scale().width(700));
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("front_face.jpg").resize(scale().width(700));
```

```python
CloudinaryImage("front_face.jpg").image(width=700, crop="scale")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('front_face.jpg'))
	->resize(Resize::scale()->width(700));
```

```java
cloudinary.url().transformation(new Transformation().width(700).crop("scale")).imageTag("front_face.jpg");
```

```ruby
cl_image_tag("front_face.jpg", width: 700, crop: "scale")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Crop("scale")).BuildImageTag("front_face.jpg")
```

```dart
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setCrop("scale")).generate("front_face.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(700).crop("scale")).generate("front_face.jpg");
```

```flutter
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700)));
```

```kotlin
cloudinary.image {
	publicId("front_face.jpg")
	 resize(Resize.scale() { width(700) }) 
}.generate()
```

```jquery
$.cloudinary.image("front_face.jpg", {width: 700, crop: "scale"})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryImage("front_face.jpg").resize(scale().width(700));
```

### Use `e_auto_enhance`

For the best results, add `e_auto_enhance` to the transformation chain. This uses AI to automatically enhance the image by analyzing the image quality and automatically selecting the right enhancement techniques to apply, for example:

![front_face image with e_auto_enhance applied](https://res.cloudinary.com/demo/image/upload/w_700,e_auto_enhance/front_face.jpg)

```nodejs
cloudinary.image("front_face.jpg", {width: 700, effect: "auto_enhance", crop: "scale"})
```

```react
new CloudinaryImage("front_face.jpg").addTransformation("w_700,e_auto_enhance");
```

```vue
new CloudinaryImage("front_face.jpg").addTransformation("w_700,e_auto_enhance");
```

```angular
new CloudinaryImage("front_face.jpg").addTransformation("w_700,e_auto_enhance");
```

```js
new CloudinaryImage("front_face.jpg").addTransformation("w_700,e_auto_enhance");
```

```python
CloudinaryImage("front_face.jpg").image(width=700, effect="auto_enhance", crop="scale")
```

```php
(new ImageTag('front_face.jpg'))
	->addTransformation("w_700,e_auto_enhance");
```

```java
cloudinary.url().transformation(new Transformation().width(700).effect("auto_enhance").crop("scale")).imageTag("front_face.jpg");
```

```ruby
cl_image_tag("front_face.jpg", width: 700, effect: "auto_enhance", crop: "scale")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Effect("auto_enhance").Crop("scale")).BuildImageTag("front_face.jpg")
```

```dart
cloudinary.image('front_face.jpg').transformation(Transformation()
	.addTransformation("w_700,e_auto_enhance"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setEffect("auto_enhance").setCrop("scale")).generate("front_face.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(700).effect("auto_enhance").crop("scale")).generate("front_face.jpg");
```

```flutter
cloudinary.image('front_face.jpg').transformation(Transformation()
	.addTransformation("w_700,e_auto_enhance"));
```

```kotlin
cloudinary.image {
	publicId("front_face.jpg")
	 addTransformation("w_700,e_auto_enhance") 
}.generate()
```

```jquery
$.cloudinary.image("front_face.jpg", {width: 700, effect: "auto_enhance", crop: "scale"})
```

```react_native
new CloudinaryImage("front_face.jpg").addTransformation("w_700,e_auto_enhance");
```

> **NOTE**: There is a special [transformation count](transformation_counts#special_effect_calculations) for the `e_auto_enhance` effect.

For more information, see [e_auto_enhance](transformation_reference#e_auto_enhance) in the Transformation URL API reference.

### Use `e_sharpen`

Add `e_sharpen` to the transformation chain, for example:

![front_face image with e_sharpen applied](https://res.cloudinary.com/demo/image/upload/w_700,e_sharpen:300/front_face.jpg)

```nodejs
cloudinary.image("front_face.jpg", {width: 700, effect: "sharpen:300", crop: "scale"})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { sharpen } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(sharpen().strength(300));
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { sharpen } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(sharpen().strength(300));
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { sharpen } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(sharpen().strength(300));
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { sharpen } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(sharpen().strength(300));
```

```python
CloudinaryImage("front_face.jpg").image(width=700, effect="sharpen:300", crop="scale")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Adjust;

(new ImageTag('front_face.jpg'))
	->resize(Resize::scale()->width(700))
	->adjust(Adjust::sharpen()->strength(300));
```

```java
cloudinary.url().transformation(new Transformation().width(700).effect("sharpen:300").crop("scale")).imageTag("front_face.jpg");
```

```ruby
cl_image_tag("front_face.jpg", width: 700, effect: "sharpen:300", crop: "scale")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Effect("sharpen:300").Crop("scale")).BuildImageTag("front_face.jpg")
```

```dart
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700))
	.adjust(Adjust.sharpen().strength(300)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setEffect("sharpen:300").setCrop("scale")).generate("front_face.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(700).effect("sharpen:300").crop("scale")).generate("front_face.jpg");
```

```flutter
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700))
	.adjust(Adjust.sharpen().strength(300)));
```

```kotlin
cloudinary.image {
	publicId("front_face.jpg")
	 resize(Resize.scale() { width(700) })
	 adjust(Adjust.sharpen() { strength(300) }) 
}.generate()
```

```jquery
$.cloudinary.image("front_face.jpg", {width: 700, effect: "sharpen:300", crop: "scale"})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { sharpen } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(sharpen().strength(300));
```

For more information, see [e_sharpen](transformation_reference#e_sharpen) in the Transformation URL API reference.

### Use `e_improve`

Add `e_improve` to the transformation chain, for example:

![front_face image with e_improve applied](https://res.cloudinary.com/demo/image/upload/w_700,e_improve/front_face.jpg)

```nodejs
cloudinary.image("front_face.jpg", {width: 700, effect: "improve", crop: "scale"})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(improve());
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(improve());
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(improve());
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(improve());
```

```python
CloudinaryImage("front_face.jpg").image(width=700, effect="improve", crop="scale")
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Adjust;

(new ImageTag('front_face.jpg'))
	->resize(Resize::scale()->width(700))
	->adjust(Adjust::improve());
```

```java
cloudinary.url().transformation(new Transformation().width(700).effect("improve").crop("scale")).imageTag("front_face.jpg");
```

```ruby
cl_image_tag("front_face.jpg", width: 700, effect: "improve", crop: "scale")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Effect("improve").Crop("scale")).BuildImageTag("front_face.jpg")
```

```dart
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700))
	.adjust(Adjust.improve()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setEffect("improve").setCrop("scale")).generate("front_face.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(700).effect("improve").crop("scale")).generate("front_face.jpg");
```

```flutter
cloudinary.image('front_face.jpg').transformation(Transformation()
	.resize(Resize.scale().width(700))
	.adjust(Adjust.improve()));
```

```kotlin
cloudinary.image {
	publicId("front_face.jpg")
	 resize(Resize.scale() { width(700) })
	 adjust(Adjust.improve()) 
}.generate()
```

```jquery
$.cloudinary.image("front_face.jpg", {width: 700, effect: "improve", crop: "scale"})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { improve } from "@cloudinary/url-gen/actions/adjust";

new CloudinaryImage("front_face.jpg")
  .resize(scale().width(700))
  .adjust(improve());
```

For more information, see [e_improve](transformation_reference#e_improve) in the Transformation URL API reference.

> **NOTE**: The above examples are just some of the ways to enhance the visual quality of resized images.  For full detail and a comparison of the all the image enhancement options, see [Image enhancement options](effects_and_artistic_enhancements#image_enhancement_options).