nuxt / nuxt/image

Feature request: Create responsive images with Cloudinary and download them

Open
#177 1 comment 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

We often create image-specific breakpoints using the "Responsive Breakpoint Generator" from cloudinary. But we don't want to host the images remotely. https://www.responsivebreakpoints.com/

So I'm wondering if a buildModule like is potentially able to do that for me and if this is something you would think is something @nuxt/image could be doing.

The already existing presets: {} property would be ideal for a concept I have in mind:
A big hero image does require different parameters in the responsive breakpoint generator than an article thumbnail for instance. presets: {} could hold these parameters.

Then I would imagine a source folder with high-res images being looped through. The images file-name could look like this:
hero-cats;preset-hero.jpg

If @nuxt/image could now upload this image to cloudinary with parameters coming from the correct preset, then download the result to a image-dist folder and use that as the srcset when referencing it in <NuxtImage>, I'd be one very happy developer :D

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing buildModule and presets: {} behavior in @nuxt/image. Define how source images, preset parameters, Cloudinary processing, downloaded output, and generated srcset values should interact. Done should include a clear configuration and end-to-end behavior for the proposed high-resolution image workflow.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt
Domain
frontend, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.