Vzhůru dolů

22.11.2024 19:30 WebP je formát bitmapových obrázků, který se v posledních letech stal na webu velmi populárním. WebP představil Google už v roce 2010. Dnes už je formát podporovaný prakticky všemi prohlížeči a operačními systémy. Podpora v obrázkových editorech je různorodá. Související Obrázkové formáty pro web Formát AVIF Značka PICTURE Responzivní obrázky Pojďme si projít hlavní přínosy WebP: možnost výrazného snížení datového objemu v porovnání s JPEG i PNG alfa průhlednost, kterou dosud nabízel jen formát PNG podpora animací, kterou umí jen dědeček GIF WebP naopak oproti JPEG neumí například subsampling chroma kanálu a progresivní vykreslování . WebP je také prý pomalejší pro dekódování a více zatěžuje procesor. To byl ale problém jen dříve. Na už neexistujícím webu images.guide se psalo: Back in 2013, the compression speed of WebP was ~10× slower than JPEG but is now negligible . For static images that are processed as part of your build, this shouldn’t be a large issue. Dynamically generated images will likely cause a perceivable CPU overhead and will be something you will need to evaluate. Takže by to mělo být ke zvážení, jen pokud obrázky generujete v reálném čase, je jich hodně a jsou obrovské. Jinak to už dneska problém nebude a výkon se řešívá u ještě novějšího formátu AVIF. Podpora v prohlížečích: samá krása Jde o formát z dílny Google, i proto jej nejdříve podporovaly všechny prohlížeče postavené na jádru Chromu a Firefox. Nově také Safari od verze 14. Více informací o podpoře: caniuse.com/webp. Dříve bylo potřeba řešit fallback do více rozšířených formátů, ale toto zde nechávám už jen kvůli zpětné kompatibilitě článku. Fallback do JPEG Řešením je vygenerovat dvě sady obrázků – ve WebP i JPEG formátu a pomocí značky PICTURE nechat na prohlížečích výběr té správné: Chrome a jeho parta tady stáhnou jen WebP, zbývající třetina uživatelů dostane své „jépégéčko“. Pokud toto řešení nemůžete nasadit, je zde ještě například možnost detekce na serveru nebo přes .htaccess. Řešení s  ale bude výkonnostně nejefektivnější. Detekci podpory formátu WebP, ale i jeho jednotlivých vlastností, pro obrázky linkované z CSS lze obstarat knihovnou Modernizr. Zápis v CSS by pak mohl vypadat takto: .box .webp .box Jednoduchý detekční skript nabízí také Google na stránkách o WebP. Má kvůli WebP smysl zdvojovat obrázky? Záleží od situace, ale hlavně u větších webů se to myslím velmi vyplatí. Jaké množství dat WebP vlastně ušetří? O případu mého klienta, e-shopu VašeČočky.cz jsem psal: Když kolegové nasadili WebP obrázky, ušetřili 30 % datového objemu úvodní stránky a o pětinu snížili čas pro Page Load . Podobné zkušenosti mám i z jiných testů a klientských projektů. Není výjimkou ani větší než poloviční ušetření obrázkových dat. Jinak obecné studie od Googlu říkají, že WebP je menší následovně u bezztrátových obrázků typu PNG o 26 % u ztrátových obrázků typu JPG o 25-34 % Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .

13.11.2024 04:00 FrontKon se letos přestěhoval do Prahy a zhruba za měsíc přinese obsah, který bude doufám zajímavý pro každého frontendistu a každou frontendistku. Píšu „doufám“, protože jsem ten hlavní, kdo je za program zodpovědný. Takže teď alespoň víte, kde si stěžovat. To je i důvod, proč vás nyní velmi rád, i zde na Vzhůru dolů, na FrontKon zvu do O2 Universa. Dvě hlavní témata V programu najdete kolem 40 přednášek. Témat, které komunita přinesla, bude opravdu hodně, ale dvě jsem předem vytáhl a cíleně na ně zaměřil pozornost přednášejících. SSR zásadně zlepšuje rychlost webu a SEO a druhé téma – přístupnost – přináší nové právní povinnosti a je to téma, které osobně považuji za velmi důležité. O SSR se v javascriptové komunitě velmi mluví. Je samozřejmě vtipné, že se frontendové konference zaměřují na backend, ale vývoj nezastavíš. V roce 2025 začne platit European Accessibility Act, který bude od webařů vyžadovat úpravu webů směrem k lepší přístupnosti všem typům uživatelů. Je čas se připravit, třeba i na FrontKonu. Vyberu nyní několik přednášek z každého z obou okruhů, na které bych vás rád upozornil. SSR a backend vrací úder Přechod z React SPA na Next.js SSR Prisma.io: kouzla s daty Serverless renderování webových komponent Backend: Skrytý motor frontendu Diskuze: JS frameworky Přístupnost a European Accessibility Act 5 právních f*ckupů, kterým by se měl vyhnout každý frontendista Inkluzivní mindset: důležitý krok k tvorbě přístupnějších aplikací Evropský zákon o přístupnosti optikou frontendisty Jak jsme zpřístupňovali Dr.Max.cz Diskuze o přístupnosti Na webu už máme plnohodnotný program: frontkon.cz A pozor levnější vstupenky pomalu mizí. Přijďte se inspirovat, popovídat si a probrat výzvy současného frontendu. Budu se na vás těšit. Uvidíme se?

04.11.2024 21:00 Prázdniny, to je čas odpočinku a potkávání se. Robin s Martinem si takhle jednoho prázdninového dne v pražském Productboardu uvědomili, že ještě nikdy nenatáčeli podcast z očí do očí, sami dva. Takže tentokrát ne online, ne s hosty, ale o tom, co se nám aktuálně převaluje v hlavách. Probrali jsme toho hodně, od práce v Productboardu nebo v PageSpeed.cz, Robinovo „prgání“ v Kotlinu, přes leadership a management, komunity Frontendisti.cz a React Berlin, pak další nové komunity, anketu State of React, metriku INP a na závěr vás zveme na konferenci FrontKon. Podcast Celá epizoda na videu Obsah po minutách Co dělá Robin? „Architektura“ v Productboardu Robinovy hrátky s Kotlinem Co čteme? The Bonfire Moment, série Duna Co dělá Martin? PageSpeed.cz konzultace a nástroj Manažujeme nebo děláme leadership? My a naše komunity   React a výsledky ankety State of React React a performance a metrika INP Pozvánka na FrontKon Děkujeme za spolupráci: Honza Michálek . Odebírejte podcast ze Vzhůru dolů Spotify – Apple Podcasts – TuneIn – RSS podcastů Nápad? Chyba? Připomínka? Pochvala? Pište nám na e-mail podcast@vzhurudolu.cz nebo kamkoliv jinam. Hlavně, aby se to k nám dostalo. Přejeme vám příjemný poslech!