Google recommends (see attached) How is this possible in Xara?
Attachment 129444
Printable View
Google recommends (see attached) How is this possible in Xara?
Attachment 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.Quote:
Originally Posted by behzad
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
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?
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.
A designer weighs up SEO against effort and file size against file type.Quote:
Originally Posted by behzad
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
Here's an example of the filesize savings that can be achieved:
LINK
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.
I think I just found the answer to my own question. The <picture> tag looks something like:
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.Code:<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
Nice one gcellison and Egg.
The other approach is to nest the <object> Tag inside the <picture> in a similar presentation.Quote:
Originally Posted by gcellison
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, You are the god of coding. I sometimes can not understand what your saying when you get technical cause I am an idiot :)
Support for WebP on export and publish is now available in Xara Designer Pro+ https://www.talkgraphics.com/showthr...e-21-0-0-61527
Download trial to give it a try here: https://www.xara.com/pro-plus-download/
Do read https://www.talkgraphics.com/showthr...w-WebP-Support.Quote:
Originally Posted by MB365
Acorn