Media Optimizer Transformations won't resize if file has no extension.

Comments

16 comments

  • Avatar
    Loic Verger Del Bove

    Hi Quokka,

    Would you mind sharing some working and non-working URLs so we can have a deeper look?

    Thanks in advance.

    Loic

    1
    Comment actions Permalink
  • Avatar
    Quokka

    Yes.

    Let's say I want to optimize this image: 
    https://cloudflare-ipfs.com/ipfs/bafybeidgvkie2d2tjzg6cq3e4zzcrn2ikvijwzhcibeeybxfyzr5urfsli

     

    I run it through my URL and my card transformation ("c_fill,h_600,w_600/q_auto:best/f_auto"):
    https://skyharbor.mo.cloudinary.net/card/https://cloudflare-ipfs.com/ipfs/bafybeidgvkie2d2tjzg6cq3e4zzcrn2ikvijwzhcibeeybxfyzr5urfsli

     

    While it does get optimized, the image doesn't get resized at all. This is happening to most images on my site. I noticed that the only ones that DO get resized by the transformation are the images with an extension.

    Ex)
    This image: https://ipfs.io/ipfs/QmQm6rmPcv6aFBeq1ewCNwFxDtxEq9g6CCLkwVYfzV61vF/2447_Gnomekins.png

    DOES get resized when run through my link: https://skyharbor.mo.cloudinary.net/card/https://ipfs.io/ipfs/QmQm6rmPcv6aFBeq1ewCNwFxDtxEq9g6CCLkwVYfzV61vF/2447_Gnomekins.png

    And the only difference is that it has an extension.

    0
    Comment actions Permalink
  • Avatar
    Loic Verger Del Bove

    Hi Quokka,

    Effectively, I can reproduce it and Media Optimizer is not able to detect the `resource_type` of the asset without the extension. 

    If you need to use extension-less URLs, you will need to explicitly specify the `resource_type` like this: https://skyharbor.mo.cloudinary.net/card/https://cloudflare-ipfs.com/ipfs/bafybeidgvkie2d2tjzg6cq3e4zzcrn2ikvijwzhcibeeybxfyzr5urfsli?resource_type=image

    Would that work for you?

    Best,

    Loic

    0
    Comment actions Permalink
  • Avatar
    Quokka

    This is great, thank you! I will note that c_lfill (limit fill) now works like a normal fill, not taking the limit to account when using smaller images, so the small images get scaled up and blurred.

    0
    Comment actions Permalink
  • Avatar
    Loic Verger Del Bove

    Hi Quokka,

    Glad it helps!

    Would you have some examples of `c_lfill`? Normally, it shouldn't scale up images.

    Thanks,

    Loic

    0
    Comment actions Permalink
  • Avatar
    Quokka

    Hey Loic! Sorry for the late response, but that issue got fixed and we're up and running now. 

     

    I have a new question that I hope you can answer.

     

    Since we don't know what file type something is and we automatically make everything 'resource_type' - is there any way I can turn gifs into images rather than gifs while still using 'resource_type=image'? We have some very large gifs come in and I know converting to videos will make them smaller, but there is no way to know which file is a gif or not before it loads, so our image optimizer just makes every large gif into a webp instead of mp4. What would be your solution for this?

    0
    Comment actions Permalink
  • Avatar
    Michal Kuperman

    Hi Quokka,

    In Media Optimizer we recognize if the URL is an image or video based on the extension. Alternatively, you can use the `resource_type` as suggested, to determine if the file is an image or video. 

    If there is any way to distinguish that the media URL is a gif by looking at its path, for example, if you can pass any query string, then you can create a custom "mapping function" to identify this and return a video file rather than an image. 

    Let us know if this would work for you,

    Thanks,
    Michal 

    0
    Comment actions Permalink
  • Avatar
    Quokka

    Hey Michal,

    There's no way to tell the file type of an image. I see in the cloudinary dashboard that it knows what the original file type is before converting (ex: GIF to webp). Why can we not use this data somehow to go from GIF to mp4? The costs of converting GIF to webp is making cloudinary unusable for us. Is there any other solution for this?

     

    Thanks,

    Quokka

    0
    Comment actions Permalink
  • Avatar
    Quokka

    Maybe there's something in settings that I can set all GIFs to automatically convert to mp4.

    0
    Comment actions Permalink
  • Avatar
    Zachary Gould

    Hey Quokka, because of your q_auto:best/f_auto your format will vary. If you want to limit a transformation to mp4 you can definitely set it up in your upload presets. You can read more about that here, https://cloudinary.com/documentation/transformations_on_upload

    Update: This approach would work in a Programmable Media product. The Media Optimizer product doesn't support upload presets since there are no uploads or storage. 

    0
    Comment actions Permalink
  • Avatar
    Stuart Rench

    Quokka,

    I am dealing with the same issue.  Do you have a solution?

    0
    Comment actions Permalink
  • Avatar
    Michal Kuperman

    Hi Quokka,

    While we are looking for a solution, can I ask you how you are delivering these files on your end? Are you using an 'img'  tag?

    Looking forward to your response,

    Thanks

    0
    Comment actions Permalink
  • Avatar
    Quokka

    Hey Stuart and Michal,

    No, I have not found a solution yet, I am just dealing with paying an absolutely ridiculous amount of money to show a few gifs that were converted to webP lol. 

    What we are doing is just passing the IPFS link into the optimizer URL like this: https://skyharbor.mo.cloudinary.net/card/https://cloudflare-ipfs.com/ipfs/bafybeidgvkie2d2tjzg6cq3e4zzcrn2ikvijwzhcibeeybxfyzr5urfsli?resource_type=image

     

    resource_type=image has to be in there or else the images won't resize, and there is no way in knowing what kind of file it is so the only option for gifs is to be converted to webP, causing a lot of bandwidth usage.

    Reminder: Displaying files from IPFS provides little to no customization. Anyone can upload their files to IPFS and make an NFT of it (we do not host any of it), and our marketplace would like to accompany all of these files (whether its png, jpg, gif, or mp4) in a very broad way. As I said, there is no way of knowing what's on the link until you load it. 

    The best solution for this IMO would be a setting solution (not a frontend one), where the user can tell Cloudinary Media Optimizer to convert all gifs to mp4's if Cloudinary ever comes across one, since the frontend won't know what it is until it is loaded.

    0
    Comment actions Permalink
  • Avatar
    Wissam Khalili

    Hi Quokka,

    Thank you for the additional information.

    Could you please share how the end user consumes the transformed media when you don't know if it's an image or video?

    Thanks,

    Wissam

    0
    Comment actions Permalink
  • Avatar
    Quokka

    Yes. You can just check out my website here, this should provide you with plenty of information: SkyHarbor.io

    Not sure what you mean by "consumes" but we just display a bunch of images back to back on our site. When the "image" is a gif, it gets converted to webP making it an extremely bandwidth-heavy file to display. Reminder: we MUST add "resource_type=image" to our media optimizer request or else the images don't resize, because none of the IPFS images we receive come with a file ending.

    0
    Comment actions Permalink
  • Avatar
    Wissam Khalili

    Hi Quokka,

    I have just done a small test:
    <img src="https://res.cloudinary.com/demo/image/fetch/f_mp4,fl_animated/https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5eeea355389655.59822ff824b72.gif" />
    This tag fails to show in Chome and FF but does show in Safari. It does matter if it’s presented in an <img> tag or not. So now we provide MP4 to browsers that support it. To browsers that don’t, we return an animated webp which is the next best thing.
    In the near future, we are planning to deliver animated avif instead.
     
    Thanks,
    Wissam
     
    0
    Comment actions Permalink

Please sign in to leave a comment.