Image Retina Density Pack

Name: Image Retina Density Pack
Brand: Cloudinary
Rating: 4.9 (21 reviews)

Generate retina density versions of your image with our free online tool. Upload an image, choose your densities like 1x and 2x, and download the pack in just a few clicks.

🖼️ Scaling millions of product images? 💡Automate, optimize, and deliver faster. 👉 Talk to a Media Expert

Retina Density Pack

Upload one image and generate @1x / @2x / @3x density variants for responsive web design. Get a ZIP with all densities plus a ready-to-paste HTML snippet for retina and HiDPI screens.

Or drag your image here

JPG / PNG / WebP · High-res source recommended (use a 3x source for best @3x quality)

Density Variants

3 densities

Each card shows a density variant with its actual delivered pixel size. The browser picks the right one based on the user's screen DPR (device pixel ratio).

Base Width (@1x)

@2x and @3x are auto-calculated (2× and 3× this base).

Densities to Include

Output

Format

Quality

Base filename

HTML Embed Snippet

Paste this into your HTML for automatic density switching.

★★★★★

4.9 (21 reviews)

Looking to generate density packs in bulk?

Free Online Image Retina Density Pack Tool

Generate crisp 1x and 2x retina versions of your image in seconds, right in your browser. No downloads needed, no watermarks, no sign-up.

Why use our Image Retina Density Pack tool?

Generate retina density variants of any image right in the browser, with no downloads or ads. Developers can also use our API to build density packs automatically across their workflows.

Built for the browser

Work right in your browser, free, with no software to install and no watermarks.

Quality preserved

Cloudinary keeps your image crisp and true to the original, end to end.

Performance Optimization

Your extracted region is delivered in the best format and quality for every device, browser, and connection, automatically.

Build density packs in bulk

Process one image or thousands. Use our free API to generate retina density packs automatically across your projects.

Workflow Automation

Set up presets to generate density packs automatically on upload, ready for delivery in seconds.

Format versatility

Works with all major formats, so your extracted region looks sharp anywhere you share it.

How to build a retina density pack in 3 steps

Get your density pack in 3 simple steps. Upload your image, choose your densities, and download the pack in seconds.

Upload your image

Drag and drop your image into the browser, or upload it from your device in seconds.

Choose your densities

Set the base width and the density set (for example 1x and 2x), and preview each version.

Download your pack

Once it’s ready, download your retina density pack, with no watermarks, ready to ship.

Go beyond a basic density pack

A woman and a golden retriever in the mountains. They're sitting, facing away from the camera while the dog noses the woman. They're surrounded by natural splendor including majestic mountains, puffy clouds, and evergreen-studded hills. — An un-cropped image overlaid with a cropping window showing how it would be cropped by Cloudinary.

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Original: 18 MB
We’re showing a resized version of the original asset to avoid slow loading speeds. View the original.

JPEG: 135 KB
WebP: 135 KB
AVIF: 90 KB
JPEG XL: 94 KB

Duration: 1:42

Duration: 0:15

URL:

/ar_0.5,c_fill,g_auto,w_433/q_auto/f_auto/hiking_dog_mountain.jpg

cloudinary.image("hiking_dog_mountain.jpg", {transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ]})

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

CloudinaryImage("hiking_dog_mountain.jpg").image(transformation=[
  {'aspect_ratio': "0.5", 'gravity': "auto", 'width': 433, 'crop': "fill"},
  {'quality': "auto"},
  {'fetch_format': "auto"}
  ])

(new ImageTag('hiking_dog_mountain.jpg'))
	->resize(Resize::fill()->width(433)
->aspectRatio(0.5)
	->gravity(
	Gravity::autoGravity())
	)
	->delivery(Delivery::quality(
	Quality::auto()))
	->delivery(Delivery::format(
	Format::auto()));

cloudinary.url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).imageTag("hiking_dog_mountain.jpg");

cl_image_tag("hiking_dog_mountain.jpg", transformation: [
  {aspect_ratio: "0.5", gravity: "auto", width: 433, crop: "fill"},
  {quality: "auto"},
  {fetch_format: "auto"}
  ])

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .AspectRatio("0.5").Gravity("auto").Width(433).Crop("fill").Chain()
  .Quality("auto").Chain()
  .FetchFormat("auto")).BuildImageTag("hiking_dog_mountain.jpg")

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setAspectRatio("0.5").setGravity("auto").setWidth(433).setCrop("fill").chain()
  .setQuality("auto").chain()
  .setFetchFormat("auto")).generate("hiking_dog_mountain.jpg")!, cloudinary: cloudinary)

MediaManager.get().url().transformation(new Transformation()
  .aspectRatio("0.5").gravity("auto").width(433).crop("fill").chain()
  .quality("auto").chain()
  .fetchFormat("auto")).generate("hiking_dog_mountain.jpg");

cloudinary.image('hiking_dog_mountain.jpg').transformation(Transformation()
	.resize(Resize.fill().width(433)
.aspectRatio(0.5)
	.gravity(
	Gravity.autoGravity())
	)
	.delivery(Delivery.quality(
	Quality.auto()))
	.delivery(Delivery.format(
	Format.auto())));

cloudinary.image {
	publicId("hiking_dog_mountain.jpg")
	 resize(Resize.fill() { width(433)
 aspectRatio(0.5F)
	 gravity(
	Gravity.autoGravity())
	 })
	 delivery(Delivery.quality(
	Quality.auto()))
	 delivery(Delivery.format(
	Format.auto())) 
}.generate()

new CloudinaryImage("hiking_dog_mountain.jpg")
  .resize(
    fill()
      .width(433)
      .aspectRatio(0.5)
      .gravity(autoGravity())
  )
  .delivery(quality(auto()))
  .delivery(format(auto()));

Frequently Asked Questions

What is the Image Retina Density Pack tool?

It generates multiple pixel-density versions of your image (such as 1x and 2x) so it stays sharp on standard and retina screens, right in your browser.

How does it work?

Upload your image and choose a base width and density set in your browser. The tool builds each version and gives you the pack, ready to download.

Is it free to use?

Yes, it’s free to use online. Just upload your image, choose your densities, and download the pack.

Can developers build density packs programmatically?

Yes. Developers can use Cloudinary’s API to generate retina density packs and automate it across their workflows at scale.

Which densities can I generate?

Common sets like 1x and 2x from a base width, so you can serve the right resolution to every device with crisp results. You might also like our Image Palette Extractor, or browse all our free tools.