Replacement Responsive Image Breakpoints Generator

Mrapplegate
Mrapplegate Member Posts: 2 ✭
in Developer APIs

I am not a developer and I was trying to install the open sourced Responsive Image Breakpoints Generator.

It has been 3 years since any changed were made.

I had to abandon my work because I don't know anything about developer work.

I decided to write my own version of the generator.

By I write, I mean AI writes.

ResponsiveBreakPoints.txt

It lets the user enter any value that the "real" generator allows.
Let me know if I can improve it.
Here is some output.

<picture>
<source type="image/jxl" srcset="https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 2400w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 2276w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 2272w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 1972w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 2020w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 1700w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 1534w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 1368w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 1118w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 966w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 634w,
https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,c_fill/f_jxl/rzm9ceudbvfuyi7x2feb.jxl 200w" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw">
<source type="image/avif" srcset="https://res.cloudinary.com/paulapplegate-com/image/upload/c_scale,ar_1:1,

Best Answers

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 103
    Answer ✓

    Hi there,

    You’re on the right track with the current implementation, but simplifying the srcset by eliminating near-duplicate widths and using automatic optimizations (f_auto, q_auto, and dpr:auto) will ensure you’re delivering the best experience across devices.

    Please let me know if you have additional questions.

    Best Regards,

    Wissam

  • Mrapplegate
    Mrapplegate Member Posts: 2 ✭
    edited September 29 Answer ✓

    Thanks Wissam. I would have never thought about duplicates. Always good to have another set of eyes on things. I appreciate it.

    I can't remove the answer aspect of my reply.
    Wissam had the answer not me.

Categories