Jump to content
You must now use your email address to sign in [click for more info] ×

All Media Lab

Members
  • Posts

    470
  • Joined

  • Last visited

Posts posted by All Media Lab

  1. Hi @grahamm7,

    Never tried this one, but this seems to work:

    https://rtlfixer.com/

    What software will Right to Left Fixer work with?
    Right-to-left writing support can now be achieved with many software that don’t support right to left writing.
    Some of the supported and tested apps are:

    – Affinity Designer
    – Affinity Photo
    – Affinity Publisher
    – iStudio Publisher
    – Adobe Photoshop
    – Adobe Illustrator
    – Adobe Indesign
    – Xara Designer
    – And much more

    Regards,

    David

  2. Hi,

    I just exported a SVG with Affinity Designer in Big Sur all latest version and there is a error in the way the <tspan></tspan> is placed in the file. It implicates wrong spaces between fonts! I only noticed it in the website I made it for in a smaller size. You can't see it in a big size. I did the same export with Affinity Designer on Windows 10 and the result is different from the Mac one. The Windows 10 version spits out a file without errors. If someone from Affinity staff is reading this I can provide you the Windows and Mac file. Never had a problem in years with SVG and Designer on Mac!

    Regards,

    David

  3. Hi @duch_suva,

    When using <picture> and <srcset> I would consider using "w" instead of 1x, 2x, 3x etc.

    Start with the first size you want for example 1000w (=1000px) then click on the additional properties next to your size there you can rename the image and show the size: for example my-image-1000px done by putting "name",  "width" and "px" or when the name is already OK you  use the "slice name". To prevent you from having to do this for every slice you can copy the slices and only rename the sizes. For example 1000w, 2000w, 3000w etc. When you made a export set up with all slices you can save it as a preset.

    Then convert the jpg also in webp, optimize the jpg's with for example jpegMini

    Code example not the same sizes but you get the idea this is for screens of max 2000px so if you want to serve a iMac 5k you have to go till 5000w:

       <picture>
                    <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-1000px.webp 1000w, assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-2000px.webp 2000w, " type="image/webp"> 
                    <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-800px.webp 800w, assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-1250px.webp 1250w" type="image/webp">
                    <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-1000px.jpg 1000w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg 2000w" type="image/jpeg"> 
                    <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-800px.jpg 800w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-1250px.jpg 1250w" type="image/jpeg"> 
                    <img src="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg" class="img-fluid"/>
                </picture>

    When you use a vector for example a SVG you only have to use one image for every ratio and sometimes you can do it with only one, because there is no quality loss in any size. With images on screen only the larger dimensions in pixels creates better quality images. For example a HD screen needs 1080px x 1920px to produce a good quality full screen image and a 5k iMac needs 5120px x 2880px for the same image to look good. On screen DPI and PPI means nothing!

     

    Regards,

    David

     

    Example for a header ratio 4:1 wide devices.

     

    affinity-header.png

    affinity-header-panel.png

     

    Example for a header ratio 4:3 small devices:

    header-portrait-affinity.png

    portrait-panel.png

  4. Hi,

    Even in the latest version of Affinity Designer when I work in the export mode it seems impossible to copy a slice. Say I want 1000w, 2000w, 3000w, 4000w and 5000w I still have to use the Path components panel to rename every single slice. Path components doesn't seem to be remembered so I have to do this for every slice (a lot of work!). 

    Is there any way to quickly copy the slices and only change the sizes?

    Thanks,

    David 

  5. 2 hours ago, R C-R said:

    BTW, your topic title doesn't make much sense: how could Affinity "take the lead" by adding WebP export to the apps?

    They could have taken the lead by adding webp to the export panels like Bohemian Sketch did (early adoption like I purchased all 3 Affinity apps in a early stage, because I believed it was something to invest in for now and the future)!   Taken the lead also means believing that it's the future and advocating the use of webp with tutorials etc. If you don't take the lead and any risk or don't have a vision of the future of web design you miss out on early adoption of innovative implementations.  

    Before Affinity I used only Photoshop, Illustrator and Sketch until I was reading about Affinity. Adding webp to a web export panel will not bother anyone else who is not interested in webp and they can carry on like they did before. For webp I moved back to the export panel of Sketch for half of my work.

    Nobody has said that the adoption rate is high, and it will definitely help when all photo editors support the extension.  (the chicken and egg story!)

    Webp will be soon implemented in all major browsers. Is implemented in some photo editing apps and all image delivering cloud services work with webp.

    Idea for the Affinity Photo website:

    Quote

    Picture the future.

    If you could create your own photo editing software, it would work like this. Whether it’s quick corrections, delicate retouching, or immersing yourself in complex fine art with hundreds of layers, Affinity Photo has you covered. And don't forget we implemented a special export panel for the web including webp,

    Because we  really picture the future!

     

  6. Wonder if you have really read my post! SAFARI HAS IMPLEMENTED WEBP IN THEIR LATEST SAFARI BROWSER AND THAT IMPLICATES THAT ALL BROWSERS CAN READ WEBP! That's great news and the reason I started this topic.

    You don't have to tell me what to do on this forum! Are you the forum police? Start your own topic and skip this one!

    So it has nothing to do with a point made because the implementation of webp in Safari is new!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  7. Quote

    @Patrick Connor  Staff member:

    WebP is not yet widely used, despite the widespread browser support and advantages. As an export format it could be reconsidered for implementation if there was significantly higher usage uptake. For now we can only recommend a post-export conversion process as a work-around, sorry.

    Hi,

    Mac Rumors Safari Implementation of webp

    Now with the implementation of webp in all browsers, including Safari, it is extremely painful to see that last week an Affinity staff member jumped on the bandwagon to defend that almost nobody uses webp and we have to figure it out ourselves.I expected when I bought the Affinity Suite that Affinity was a modern progressive application bundle and would promote the use of webp by implementing it in the export panels and making tutorials on the subject.  Webp is an excellent replacement for both transparent PNGs and JPGs. Yes, the use of webp still needs to grow I agree, but with this conservative mentality it obviously doesn't help to achieve this. Hope to see some more positive response from Affinity Staff and quick implementation of webp.

     

    Quote

    Mac rumors:

    WebP images are supported in Chrome, Firefox and Microsoft Edge browsers, but has been notably absent from both iOS and macOS Safari. The addition to Safari makes the format more likely to receive widespread adoption.

    Regards,

    David

     

  8.  

    43 minutes ago, R C-R said:

    What is so unfortunate about using XnConvert as a (possibly automated) batch converter if one wants to generate WebP content for their web pages?

    After all, it is not as if any Affinity app produces ready to use HTML so AP is not going be the only tool used to build web pages.

    It was a reply to your post! I showed you my work flow to explain my point.

    So if I make my point and you don't have a answer you come with this?

    The request is made for many years by many people. This is a discussion about why it is not implemented yet. 

  9. Hi @NoSi,

    Yes of course they can and you don't need the fancy JavaScript like I use or imagekit/cloudinary.

    Just the plain HTML you see here is one image of a Bootstrap image slider or you could use this code for an image header  on any device including portrait mode on a mobile phone:

    <picture>
                    <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-1000px.webp 1000w,assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-2000px.webp 2000w" type="image/webp"> 
                    <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-800px.webp 800w, assets/Responsive-Images/nieuws/header-news/header-info-webp/header-info-phone-1250px.webp 1250w" type="image/webp">
                    <source media="(min-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-1000px.jpg 1000w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg 2000w" type="image/jpeg"> 
                    <source media="(max-width: 36em)" srcset="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-800px.jpg 800w, assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-phone-1250px.jpg 1250w" type="image/jpeg"> 
                    <img src="assets/Responsive-Images/nieuws/header-news/header-info-jpg/header-info-2000px.jpg" class="img-fluid"/>
                </picture>

    The jpg's are created in a custom Affinity Photo export preset and unfortunately the webp's are converted in XnConvert!

    If more applications would support webp  it will get more populair.

  10. Hi @Oval,

    Yes you have a point!  It was more ment to show the image system working with webp and jpg fallback.

    The link was an old Bootstrap 3 example from 4 years ago, this new link provides the latest version of our full screen image system with the images coming from https://www.imagekit.io . You can do the same test if you want. The optimization is done automatically on the imagekit server and jpg is set on 80% optimization. Notice that the webp's are first recognized as jpg's, but correctly named webp in network of the def tools.  

    THE NEW LINK TO TEST WEBp VS JPG

    Regards, 

    David

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.