How could I benefit from "responsive friendly upload" in strapi?

System Information
  • Strapi Version: 3.6.8
  • Operating System: windows10
  • Database: SQLite
  • Node Version: 14.17.1
  • NPM Version: 6.14.13
  • Yarn Version: 1.22.11

When I read the docs of strapi v3, I found that there is an option that produces responsive images, means that when we add an image, it produces other sizes in the public/uploads address of strapi directory. That feature works in my project and when I upload for example an image called figure-1-1.png, it produces some other images with different sizes in my upload folder.

But how can I use those other images in my contents? For example suppose that I have a content that uses “rich-text”. In that content when I use image icon in the editor, it inserted a link of the main image to my content like below:


So how could I benefit from other sizes? How could I use them in strapi that for example in mobile resolution the smallest size is used? Is there anything that I misunderstood?

I don’t think it’s ment to be used in Rich Text.
If you consume the API for uploads, it will give you small, medium, large, thumbnail sizes. So I guess if you know the name and the path or log it out you can also make the path for images.

@Eventyret thanks for your answer. But I think the main advantage of “strapi” is being a CMS. That means you can manage your content without need to code a lot. If we want to use API for uploads or something else, it is not very surprising and it is not related to the scope of “CMS”(in my opinion). We can upload our images even in the front-end part of our apps or websites!

It’s a HEADLESS CMS Ment to be consumed by an API on the frontend.
Of course yes the CMS Experience is to be able to write things etc for it too.

All I was saying is, I don’t think the default editor for strapi supports it, due to that it’s just a small markdown editor.

  • Can you extend it, sure you can
  • Can you change it, sure you can.

There is even a media uploads functionality you can use to upload images, no API is needed.

All I was trying to say is, you could try use the API to upload something or the Media Libary in the Admin UI. It would give you a way to see what the layout of the API response is, if you know the layout you could also just say something like uploads/sizes/large/1x1.jpg as an example.