Jump to content
You must now use your email address to sign in [click for more info] ×
Forum Downtime Tuesday 15th October [click for more info]

All Media Lab

Members
 View Profile  See their activity

  • Posts

    473

  • Joined

  • Last visited

 Content Type 

Posts posted by All Media Lab

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    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.

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    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

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    1 hour ago, carl123 said:

    But it is not the miracle cure to solve all your SEO problems that some people in this thread are claiming it is

    Nobody said that webp solves all SEO problems, only that it's an important part of SEO nowadays!

    https://growthhackers.com/articles/why-is-google-s-new-image-format-webp-so-critical-to-seo

    https://inboundjunction.com/why-webp-is-critical-to-seo#:~:text=Google Knows SEO&text=WebP is no exception.,providing the same quality experience.

    https://insanelab.com/blog/web-development/webp-web-design-vs-jpeg-gif-png/

    Yes the people of inbound junction don't know what they are talking about! You know it better! They make money with implementing webp everyday like my self.

    And a question: Why do you think webp is implemented in all browsers except for Safari? To make nobody using it?

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    The problem is that you always have something to say, but no real arguments based on facts! Maybe it's time to not lurk around this forum all day and take a nice walk outside!

    I know what I'm talking about and you proved to me that you  don't. If you don't want webp in Affinity fine! Some other people would be delighted when it was implemented in the export panel. I work with webp every day!

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    20 hours ago, R C-R said:

    Wouldn't the difference in page load times be true only for the part of the web page that includes WebP formatted content, & if all other factors like server response times & loads were equal? Even for that, 30 to 40% better times is probably a bit optimistic since the difference in file size for a given quality level varies greatly depending on the content of the image(s) & its compressibility.

    I would expect the improvement to be greatest for pages with multiple high resolution raster images for users with slowish internet connections. Depending on the content, for users with fast connections the improvement might be too small to notice.

    I wonder why you say that..... based on? 

    Hope you have access  to a Mac with Safari and or Xcode and a Chrome browser or any other browser that accepts webp.

    Try this full-screen image system I developed my self with webp and jpg fallback based on: https://github.com/aFarkas/lazysizes. Open the dev tools and notice in Network that you save up to 60% bandwidth compare to the jpg (optimized with jpegMini) that are there for fallback. The issue is not only speed advantage, but also it saves energy in a huge way! And of course it's a SEO boost.

    https://yourweblab.nl/kit/

    webp-test.jpg

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    4 hours ago, carl123 said:

    Not true, if another standard is proven to be equal to or has a better efficiency than WebP Google could not configure its algorithm to give better rankings to websites using WebP.

    Google is constantly being sued for unfair/uncompetitive changes to its ranking systems.  

    They can't just dictate "what is expected".

     

    I agree!

    Google measures the page loading speed in general (no matter if the faster page load is caused by the use of webp, minifying code, async loading of the scripts or what ever), so when you use webp with jpg fallback you have a 30 to 40% smaller bandwidth of the particular web page on almost all modern browsers except for Safari. The page speed advantage reflexes in the search results.  But like me lot's of people use Chrome or Firefox on their Mac. Nothing unfair or noncompetitive! Everybody is entitled to implement webp for free in their websites and use the source code in apps like the Affinity ones.  The problem is that there is no alternative at the moment for webp and works in most browsers. So Google is not dictating, but strongly advising in a smart way😉.

    https://developers.google.com/speed/webp/docs/api

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    Hi @R C-R

    Think you didn't read this:

    Quote

    @Ben Affinity Moderator and Staff member

    I'm also informed that Webp has no support for floating point or HDR.  Web seems quite behind the curve compared to other conduits for media presentation - HDR will soon become the baseline for displays, as it is already for TVs.  Apple might still have influence on which formats are most future suited when they announce their support for HDR tech soon.

    Looking at the wider picture - webp doesn't look like it will be the long term winner.

    The future isn't 8-bit, and it isn't SDR.

     

    https://forum.affinity.serif.com/index.php?/topic/85857-affinity-not-for-webdesign-no-webp-still/

    WebP in Affinity Photo

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    Hi @NoSi

    Because despite the fact that all major browser support webp (except for Safari) and it's widely used in modern webdesign and game design, somehow the Affinity staff and some developers don't see the importance of having webp in the export panel. Have had discussions with a developer from Affinity on this forum and it's like talking to a brick wall. 

    This feature is ask for for years now!

    David

      

    Recommended Workflow for Webpage Design

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    Hi Mark,

    When you are UX and UI designing for an IOS application the "points methode" can be a way to do it, but this is a very specific app in devices design methode.

    There is a whole chapter in the Affinity Designer workbook about this!

    The title of your post and your questions have lead me to the impression that you wanted to make a website mockup?

    If so that "points methode" is completely unnecessary and you can use any PPI DPI  (it doesn't make any difference) and use the Bootstrap mockup templates I provided you with.  

    Stay in the "web 72 dpi" modes (for you own well being😉 makes no difference anyway) of the Bootstrap mockup template document setup  and start filling in the multiple device templates with content like text and images etc.

    And that's all there is to it!!!!

    Be aware that common icons that are part of a font set (like font awesome) are all made out of vectors and don't need any responsive images (you can scale them without quality loss). For images you only need one size (and orientation/art direction for all devices in the template)  and the webdesigner takes care of the multiple sizes.

    In most cases web design companies use  a service like Cloudinary that can resize and optimize images on the server and on the fly. In one of the seal examples I gave you the link for I used imagekit, It takes care automatically of all image sizing cropping etc. when it is loaded in a device. All I have to do is deliver 1 image in a big size and the art directions to the imagekit server.   

    And if they (the web design companies) want you to deliver the images you can do it the way I showed you in the Affinity Photo export examples in my previous posts. 

    Regards,

    David 

    Recommended Workflow for Webpage Design

    in Pre-V2 Archive of Affinity on Desktop Questions (macOS and Windows)

    Posted

    Hi Mark,

    https://www.udemy.com/course/web-design-affinity-designer-affinity-photo-windows-serif/

    I did not give you the link for nothing! Your replies in German still prove you don't understand it.

    I attached the grids for you to this post. They come from:

    https://hackerthemes.com/bootstrap-4-affinity-designer-grid/

    Have a close look at it! They contain the proper sizes as a start and give you a idea how to set it up.

    Regards,

    David

     

    There are two links at the bottom:

    grids.png

    bootstrapGrid.afdesign bootstrapGrid_noArtboard.afdesign

×
×
  • 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.

 Accept Cookies  Reject Cookies