Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    May 2002
    Location
    Canada
    Posts
    3,338

    Default Google recommends

    Google recommends (see attached) How is this possible in Xara?

    Click image for larger version. 

Name:	Screenshot_2.png 
Views:	86 
Size:	17.5 KB 
ID:	129444

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: Google recommends

    Quote Originally Posted by behzad View Post
    Google recommends (see attached) How is this possible in Xara?

    Click image for larger version. 

Name:	Screenshot_2.png 
Views:	86 
Size:	17.5 KB 
ID:	129444
    behzad, I have already addressed this, and more, in the Thred with this specific Post regarding future image formats: https://www.talkgraphics.com/showthr...649#post635649.

    The quick and dirty approach is to create a Placeholder and then use Web Properties > Placeholder > Replace with graphic file > Browse button.

    The better way is to drop the jpeg/png of your image onto the page and make this the Placeholder.
    This gives you the exact scaled dimension.

    The upside is you have a solution for the Squishy Squashy Saga.

    The downside is you lose Web Animations > Mouse-over Effects.
    I replace these with my own CSS.

    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

  3. #3
    Join Date
    May 2002
    Location
    Canada
    Posts
    3,338

    Default Re: Google recommends

    Thank you Acorn. I believe google analyzed the speed by fractions of second and they mark it as a red flag. So maybe google is too picky about the speed of jpg and png appearing?

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Google recommends

    No, Google measures page download speed across many factors, images just being one.

    Does it matter to you? Depends on what your sites about. If it's your own personal site, then the speed difference will be less important.

    If it's for a company or product with many competitors then yes it matters in the SEO rankings.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

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

    Default Re: Google recommends

    Quote Originally Posted by behzad View Post
    Thank you Acorn. I believe google analyzed the speed by fractions of second and they mark it as a red flag. So maybe google is too picky about the speed of jpg and png appearing?
    A designer weighs up SEO against effort and file size against file type.

    Xara produces many images needlessly.
    I redesign automatically with Rectangles and Linear Fills (which can include a Transparent colour).
    I replace small images with in-line SVG as this cuts down on extra HTML calls.
    I replace JPG/PNG with WebP or AVIV.

    Each has a design cost.

    I use Lighthouse in my browser (F12 > Lighthouse) to tell me thinks but focus on Accessibility over SEO everything.

    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. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Google recommends

    Here's an example of the filesize savings that can be achieved:

    LINK
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Google recommends

    This is a fantastic thread on a truly important topic. I read about the WebP format a while back but didn’t pursue it as it is beyond the scope of Xara’s apps. Since it is now an issue of interest to others on the forum, I will throw in my question. This is asked particularly to Acorn and anyone else who is using the method of creating the WebP files externally and then using placeholders to reference them.

    Apparently, browsers that are not fairly recent do not recognize the WebP format, meaning that an alternate JPG must be provided. It can be invoked through several methods, including the HTML <picture> element. But even that is not recognized by browsers that are still less recent… including the most recent (and final) version of Internet Explorer.

    So, my question is: How do you accommodate the need for JPGs and the limit on the usage of <picture> to ensure that all users will see the image in one format or another? Any insight would be greatly appreciated.

  8. #8
    Join Date
    Mar 2018
    Location
    Morelos, Mexico
    Posts
    236

    Default Re: Google recommends

    I think I just found the answer to my own question. The <picture> tag looks something like:
    Code:
    <picture>
      <source type="image/webp" srcset="flower.webp">
      <source type="image/jpeg" srcset="flower.jpg">
      <img src="flower.jpg" alt="">
    </picture>
    In the event that the <picture> element is not recognized by the browser (like IE), everything is ignored except for the <img> tag. So the image stills shows up. (Source: https://web.dev/serve-images-webp/). This will be very useful.

  9. #9
    Join Date
    May 2002
    Location
    Canada
    Posts
    3,338

    Default Re: Google recommends

    Nice one gcellison and Egg.

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

    Info Re: Google recommends

    Quote Originally Posted by gcellison View Post
    I think I just found the answer to my own question. The <picture> tag looks something like:
    Code:
    <picture>
      <source type="image/webp" srcset="flower.webp">
      <source type="image/jpeg" srcset="flower.jpg">
      <img src="flower.jpg" alt="">
    </picture>
    In the event that the <picture> element is not recognized by the browser (like IE), everything is ignored except for the <img> tag. So the image stills shows up. (Source: https://web.dev/serve-images-webp/). This will be very useful.
    The other approach is to nest the <object> Tag inside the <picture> in a similar presentation.

    https://caniuse.com/?search=<picture> covers 95.5% of browsers in use.
    https://caniuse.com/?search=<object> happens to include IE11.

    The best guide I have found and used is the whole article around https://css-tricks.com/a-guide-to-th...-image-formats.

    If end viewers are still using browsers that cannot handle WebP directly the <picture> approach is required.

    • Pure webP, hang the viewer: Use Web Properties > Placeholder > Replace with graphic file.
    • Fallback to jpg/png: Use Web Properties > Placeholder > HYML code (body) and embed @gcellison's code.
    • Fuller cover: You would have to experiment with something like this:

    Code:
    <picture>
      <source type="image/webp" srcset="flower.webp">
      <source type="image/jpeg" srcset="flower.jpg">
      <object data="flower.jpg">
        <img src="flower.jpg" alt="">
      </object>
    </picture>

    • Ultimate, corporate need: embed the techniques in the CSS Tricks article above.

    Embedding has its limitations as you now hold a Placeholder and some Xara effects will fail.

    There is always a balance and what we desperately need is Xara to provide WebP, AVIV & SVG cover akin to JPG & PNG.
    I am using WebP directly as honestly those on old browsers need to catch up as they are leaving themselves open to security flaws.

    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

 

 

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
  •