Recherche avancée

Sur d’autres sites (6297)

• H.264 and VP8 for still image coding : WebP ?

  1er octobre 2010, par Dark Shikari — H.264, VP8, google, psychovisual optimizations

  JPEG is a very old lossy image format. By today’s standards, it’s awful compression-wise : practically every video format since the days of MPEG-2 has been able to tie or beat JPEG at its own game. The reasons people haven’t switched to something more modern practically always boil down to a simple one — it’s just not worth the hassle. Even if JPEG can be beaten by a factor of 2, convincing the entire world to change image formats after 20 years is nigh impossible. Furthermore, JPEG is fast, simple, and practically guaranteed to be free of any intellectual property worries. It’s been tried before : JPEG-2000 first, then Microsoft’s JPEG XR, both tried to unseat JPEG. Neither got much of anywhere.

  Now Google is trying to dump yet another image format on us, “WebP”. But really, it’s just a VP8 intra frame. There are some obvious practical problems with this new image format in comparison to JPEG ; it doesn’t even support all of JPEG’s features, let alone many of the much-wanted features JPEG was missing (alpha channel support, lossless support). It only supports 4:2:0 chroma subsampling, while JPEG can handle 4:2:2 and 4:4:4. Google doesn’t seem interested in adding any of these features either.

  But let’s get to the meat and see how these encoders stack up on compressing still images. As I explained in my original analysis, VP8 has the advantage of H.264′s intra prediction, which is one of the primary reasons why H.264 has such an advantage in intra compression. It only has i4x4 and i16x16 modes, not i8x8, so it’s not quite as fancy as H.264′s, but it comes close.

  The test files are all around 155KB ; download them for the exact filesizes. For all three, I did a binary search of quality levels to get the file sizes close. For x264, I encoded with --tune stillimage --preset placebo. For libvpx, I encoded with --best. For JPEG, I encoded with ffmpeg, then applied jpgcrush, a lossless jpeg compressor. I suspect there are better JPEG encoders out there than ffmpeg ; if you have one, feel free to test it and post the results. The source image is the 200th frame of Parkjoy, from derf’s page (fun fact : this video was shot here ! More info on the video here.).

  Files : (x264 [154KB], vp8 [155KB], jpg [156KB])

  Results (decoded to PNG) : (x264, vp8, jpg)

  This seems rather embarrassing for libvpx. Personally I think VP8 looks by far the worst of the bunch, despite JPEG’s blocking. What’s going on here ? VP8 certainly has better entropy coding than JPEG does (by far !). It has better intra prediction (JPEG has just DC prediction). How could VP8 look worse ? Let’s investigate.

  VP8 uses a 4×4 transform, which tends to blur and lose more detail than JPEG’s 8×8 transform. But that alone certainly isn’t enough to create such a dramatic difference. Let’s investigate a hypothesis — that the problem is that libvpx is optimizing for PSNR and ignoring psychovisual considerations when encoding the image… I’ll encode with --tune psnr --preset placebo in x264, turning off all psy optimizations. 

  Files : (x264, optimized for PSNR [154KB]) [Note for the technical people : because adaptive quantization is off, to get the filesize on target I had to use a CQM here.]

  Results (decoded to PNG) : (x264, optimized for PSNR)

  What a blur ! Only somewhat better than VP8, and still worse than JPEG. And that’s using the same encoder and the same level of analysis — the only thing done differently is dropping the psy optimizations. Thus we come back to the conclusion I’ve made over and over on this blog — the encoder matters more than the video format, and good psy optimizations are more important than anything else for compression. libvpx, a much more powerful encoder than ffmpeg’s jpeg encoder, loses because it tries too hard to optimize for PSNR.

  These results raise an obvious question — is Google nuts ? I could understand the push for “WebP” if it was better than JPEG. And sure, technically as a file format it is, and an encoder could be made for it that’s better than JPEG. But note the word “could”. Why announce it now when libvpx is still such an awful encoder ? You’d have to be nuts to try to replace JPEG with this blurry mess as-is. Now, I don’t expect libvpx to be able to compete with x264, the best encoder in the world — but surely it should be able to beat an image format released in 1992 ?

  Earth to Google : make the encoder good first, then promote it as better than the alternatives. The reverse doesn’t work quite as well.

  [155KB]

• [Aug-Sept 2013] Piwik 2.0 Development Update !

  3 octobre 2013, par Fabian Becker — Development

  This Development Update is the first in a new series of posts we’ll be writing to keep you, our loyal users, informed of our efforts. We hope these updates keep you excited about Piwik’s future, and if you’re a developer, we hope they inspire and challenge you to accomplish more yourself !

  Despite this being our first update, it will probably be one of our biggest. We’ve gotten a lot done as we race towards the Piwik 2.0 release ! Just see for yourself :

  What we’ve accomplished

  Theming

  Piwik now supports theming, a feature that was requested often in the past. Because of our switch to the Twig template engine and other major code changes it is now possible to change the way Piwik looks. Additionally, developers can use the dynamic stylesheet language LESS, instead of CSS. Piwik will automatically transform the LESS code into CSS.

  Piwik 2.0 will ship with a new dark theme called PleineLune (french for Full Moon) that makes use of the new theming feature. Another theme with a left-aligned menu was created during the Piwik Meetup in Paris. Both of these themes were created by Thomas Zilliox, a very talented designer and CSS expert.

  

  PHP 5.3 Namespaces

  For Piwik 2.0 we decided to make use of namespaces, a feature introduced in PHP 5.3. The usage of namespaces makes our code more readable and allows us to better modularize the platform. This is in part why we are raising the required minimum PHP version to 5.3 for Piwik 2.0. (Remember to update your server !)

  Translations in JSON

  All translations are now stored in JSON files which makes storing translations in Piwik a lot cleaner that the giant PHP array we previously used.

  Side note : if you’d like to make Piwik available to more languages, please sign up at translations.piwik.org. We’d love to have your help !

  UI Tests

  We now use UI tests to make sure that changes to the code don’t break the UI. UI tests use PhantomJS and CutyCapt and are automatically executed on Travis CI. Whenever an integration test fails the script produces a screenshot diff that shows the difference. Learn more.

  

  AnonymizeIP supports IPv6

  The AnonymizeIP plugin now masks IPv6 addresses. The concept of the config option ‘ip_address_mask_length’ has now changed to reflect the level of masking that should be applied to the IP. With a masking level of 1 Piwik will mask the last octet of an IPv4 address and the last 80 bits of an IPv6 address.

  All Websites Dashboard usable with 20,000+ Websites

  The All Websites Dashboard is now usable even if you track many thousands of websites in your Piwik instance. We rewrote parts of the archiving process in order to make this possible. Making Piwik fast and memory efficient is a constant concern for core developers.

  Plugins can now add new Visualizations

  Piwik Plugins and Themes can now create new visualizations for your report data. They can also specify their own ViewDataTable footer icons or modify existing ones. This will allow plugin developers to create new ways for you to view your data, customize existing reports so they look great in new visualizations and provide extra analytics functionality accessible in each of your reports.

  The new TreemapVisualization plugin makes use of this feature to let you view your reports as treemaps. It serves as an example of this new functionality.

  Piwik Marketplace

  The Piwik Marketplace is a new platform developers can use to publish their plugins and themes so all Piwik users can easily access them. The marketplace is hosted at plugins.piwik.org and is currently in an early development state, but we’re already able to host plugins !

  Developers can easily publish their plugins by adding a commit hook to their Github repositories. Every time you push a new tag, the marketplace will make a new version of your plugin available. The marketplace will provide a centralized platform to search for plugins and also provide statistics on plugin usage.

  Install Plugins and Themes in one click from within Piwik

  Piwik has offered since the beginning the much-loved “one click update” feature. We are bringing the same functionnality to the Marketplace : you will be able to install Plugins and Themes in one click directly within the Piwik interface ! Similarly to WordPress or Firefox, Piwik will let you extend the functionnality of your analytics platform.

  Conclusion

  In Piwik 2.0 you will be able to install plugins and themes from the marketplace. And, if you’re so inclined, you will be able to create and host your own plugins/themes on the marketplace so everyone can use them. This is by far the accomplishment we are most excited by… the possibilities it opens up for Piwik’s future are truly unlimited. We hope you share our excitement !

  Au revoir, until next time !

  PS : our mission is to liberate web analytics ; thank you for sharing the word about Piwik 2.0 !

• Evolution #4753 (Nouveau) : Styles du privé : listes d’objets (suite des boîtes et des formulaires)

  30 avril 2021

  Les boîtes et les formulaires ont été visuellement « raccordés » ensembles.
  Je pense que logiquement les listes d’objets devraient suivre.
  En fait ce sont 3 variations d’un même composant : une boîte avec entête, corps et pied.

  Pour les listes on peut séparer la question en 2 aspects :

  1) L’emballage extérieur¶

  Là il s’agirait de reprendre les choix graphiques propres à « l’emballage extérieur » des boîtes et formulaires : bordure, arrondi, espacements.
  Exemple sur l’image suivant où les 3 sont visibles (nb : ceux en colonne sont automatiquement « ressérés », d’où la différence de padding etc.)

  

  Après en fonction de l’un ou de l’autre, il y aura peut-être lieu d’ajuster le padding ou la taille du titre. Mais pour l’instant ce sont ceux en place.

  2) L’intérieur¶

  Ensuite je propose de procéder à quelques ajustements à l’intérieur de ces listes.
  Je pense que certains choix ont été faits pour s’accommoder du manque de place en largeur à l’époque, et ne sont plus nécessaires maintenant.

  Pour me faire un idée de ce qui fonctionnerait le mieux, et comprendre les détails visuels qui me gênaient un peu, j’ai parcouru quelques articles de recommandations sur l’ergonomie des data tables.
  Alors ils traitent plutot des fonctionnalités de ces tables dans leur ensemble, mais il y a aussi quelques guidelines visuelles intéressantes.

  • https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e
  • https://medium.com/nextux/design-better-data-tables-4ecc99d23356
  • https://www.uxbooth.com/articles/designing-user-friendly-data-tables/
  • https://uxdesign.cc/lets-design-data-tables-bf065a60e588

  Je retiens quelques règles simples :

  • Des espacements suffisants et consistants (le padding quoi)
  • Une taille de police identique partout (au moins dans le tbody). C’est fatiguant pour l’oeil et moins lisible quand on passe sans arrêt d’un taille de police à l’autre sur une même ligne. Et je ne suis pas sûr qu’il y ait forcément besoin de gras pour certains éléments comme les titres ou autres.
  • À quelques exceptions près (id, picto), pas de largeur fixes sur les colonnes, laisser faire le navigateur.

  Donc voilà, c’est pas grand chose à ajuster non plus.
  Les colonnes des tables ont des classes .importante et .secondaire.
  À mon avis elle ne devraient plus avoir d’incidence en vue « normale », mais juste décider quelles colonnes afficher et masquer en vue réduite, dans les colonnes ou ailleurs.

  Donc dans les grandes lignes ça donnerait quelques chose comme ça (juste une maquette) :

  

  3) Détails¶

  Enfin pour ces 3 composants, je propose qu’il y ait une classe modificatrice commune pour produire un affichage compact, c’est à dire ressérer tout le contenu.
  Cette classe serait automatiquement appliquée dans les colonnes.

  Ça pourrait être « compact », mais sur d’autres composants pour varier les tailles je suis parti sur mini / large. Donc mini aussi ?