Welcome to TalkGraphics.com
Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

Thread: WebP Support

  1. #11
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Lightbulb Re: WebP Support

    In the meantime...

    ...Secure a high quality JPG/PNG file and drop onto your design page.

    Scale the image to your wanted size.
    Use an on-line image to webP converter - I tried https://convertio.co/webp-converter/ as it seemed to be the best out there.
    Save the converted webP file in the same folder as your original (just for convenience).
    Select the image in your design and press Shift+Ctrl+Alt+A and add the full path to your webP file.
    Finally, open the same selected image's Placeholder code body and add: <img src="index_htm_files/[image].webp" width=100% height=100% />, where [image] is your filename.
    Do not have Regenerate placeholder image ticked and click out with the OK button a few times.

    Your XDA will now use the webP file instead of your JPEG/PNG.

    Far from perfect but it does work: https://shared.xara.com/ftJWjAASDx/.

    In return, I need the code that would handle the stretched placeholder image in a similar fashion to Stretch Full Width.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #12
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: WebP Support

    Thanks Acorn.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  3. #13

    Default Re: WebP Support

    Quote Originally Posted by Acorn View Post
    In the meantime...

    ...Secure a high quality JPG/PNG file and drop onto your design page.

    Scale the image to your wanted size.
    Use an on-line image to webP converter - I tried https://convertio.co/webp-converter/ as it seemed to be the best out there.
    Save the converted webP file in the same folder as your original (just for convenience).
    Select the image in your design and press Shift+Ctrl+Alt+A and add the full path to your webP file.
    Finally, open the same selected image's Placeholder code body and add: <img src="index_htm_files/[image].webp" width=100% height=100% />, where [image] is your filename.
    Do not have Regenerate placeholder image ticked and click out with the OK button a few times.

    Your XDA will now use the webP file instead of your JPEG/PNG.

    Far from perfect but it does work: https://shared.xara.com/ftJWjAASDx/.

    In return, I need the code that would handle the stretched placeholder image in a similar fashion to Stretch Full Width.

    Acorn
    I did think it would be something like that, but to do that for my whole website would take some commitment, and probably some valium, and lots of coffee.
    Seriously though it would be nice to convert all jpg and png files. Thanks for the link.

    Maybe Santa will use his magic elf dust on the Devs
    Last edited by Ore; 05 December 2020 at 08:00 PM. Reason: Forgot to close the door on the way out

  4. #14
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: WebP Support

    Quote Originally Posted by Ore View Post
    I did think it would be something like that, but to do that for my whole website would take some commitment, and probably some valium, and lots of coffee.
    Seriously though it would be nice to convert all jpg and png files. Thanks for the link.
    Maybe Santa will use his magic elf dust on the Devs
    @Xara - Which is why we deserve to see a Technical Roadmap as making changes like this involve a high commitment. Suddenly getting a working solution may incur a lot of nugatory effort.

    I think we can understand you have a lot of technical debt as the codebase is very mature. So even saying it is not possible is beneficial. that is the power of a roadmap.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  5. #15
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: WebP Support

    Quote Originally Posted by Acorn View Post
    In the meantime...

    ...Secure a high quality JPG/PNG file and drop onto your design page.

    Scale the image to your wanted size.
    Use an on-line image to webP converter - I tried https://convertio.co/webp-converter/ as it seemed to be the best out there.
    Save the converted webP file in the same folder as your original (just for convenience).
    Select the image in your design and press Shift+Ctrl+Alt+A and add the full path to your webP file.
    Finally, open the same selected image's Placeholder code body and add: <img src="index_htm_files/[image].webp" width=100% height=100% />, where [image] is your filename.
    Do not have Regenerate placeholder image ticked and click out with the OK button a few times.

    Your XDA will now use the webP file instead of your JPEG/PNG.

    Far from perfect but it does work: https://shared.xara.com/ftJWjAASDx/.

    In return, I need the code that would handle the stretched placeholder image in a similar fashion to Stretch Full Width.

    Acorn
    For those concerned about on-line conversion, you can use free desktop applications like IrfanView, GIMP and Krita. Not Affinity suite AFAICS.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #16

    Default Re: WebP Support

    Quote Originally Posted by Acorn View Post
    @Xara - Which is why we deserve to see a Technical Roadmap as making changes like this involve a high commitment.
    Acorn
    That makes a lot of sense, would be good to know what's coming up.

  7. #17
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: WebP Support

    Quote Originally Posted by Acorn View Post
    Your XDA will now use the webP file instead of your JPEG/PNG.

    Far from perfect but it does work:
    https://shared.xara.com/ftJWjAASDx/.

    In return, I need the code that would handle the stretched placeholder image in a similar fashion to Stretch Full Width.

    Acorn
    I worked out the code to embed the webP in a Stretchy frame:
    Code:
    <div style="left:0px;top:0px;width:100%;">
     <span class="xr_ar" style="left: 0px; width: 100%; height: 512px; pointer-events: none;background-image: url('index_htm_files/[image].webp');   background-position: center; background-repeat: no-repeat; background-size: cover;"></span>
     </div>
    You then need to apply the Stretch Full Width (and Sticky) to the Placeholder.

    You have to set the Placeholder and SPAN height to the same value to keep things sane.
    I use Shift+Ctrl+Alt+A to attach [image].webp to the Placeholder.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #18
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: WebP Support

    Update
    Just <span class="xr_ar" style="width: 100%; height: 512px; pointer-events: none; background-image: url('index_htm_files/[image].webp'); background-position: center; background-repeat: no-repeat; background-size: cover;"></span> works with Stretch Full Width (and Sticky) to the Placeholder.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #19
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: WebP Support

    There is a more direct way of adding a webP image to a design page through a Placeholder > Placeholder > Replace with graphic file > All files and pick the required image file.
    The problem with this way is you need to know the dimensions of the image to get the scaling right as the Placeholder distorts the image to its dimensions:
    You cannot access the code directly - <img class="xr_ap" src="index_htm_files/[image].webp" alt="" title="" style="left:38px;top:44px;width:792px;height:481px;"> but you could add a Name ID for CSS/JS/jQuery manipulation.

    Equally, you can load in an SVG in the same fashion but the image is scaled down to fit into the smallest Placeholder dimension.
    The resultant is a base64 image/svg+html, which, I believe, you cannot manipulate in code any further.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #20
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Exclamation Re: WebP Support

    Dear Xara...

    For want of any response, how about upping the ante?

    www.industrialempathy.com/posts/image-optimizations/

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •