21.09.2024 14:45 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: .
11.09.2024 20: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?
03.09.2024 11:31 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!
02.09.2024 03:00 Milí provozovatelé webů, čím více ušetříte za platformu a vývojáře, tím více utratíte za konzultanty, kteří vám to všechno budou opravovat. Může to být v pohodě, pořád se to může vyplácet. Ale tuhle proměnnou byste si měli dát do výpočtů. „Na platformě ušetříme X, na vývojářích Y, ale počítáme s konzultacemi k UX, SEO, přístupnosti nebo rychlosti ve výši Z. Ty konzultanty radši najmeme na začátku projektu, aby to ohlídali.” Asi tak nějak. Vezměme třeba Shoptet . Myslím, že to je opravdu skvělá platforma . Shoptet je ale zároveň velmi často špatně používaná platforma. „Uděláme to na Shoptetu. Podívejte kolik peněz měsíčně ušetříme…“, Oukej, ale už nepočítejte, že si tam budete něco upravovat na míru. Často vidíme na sílu upravený design původních šablon, který pak ale v důsledku zhoršuje UX a… rozbije rychlost. Nebo WordPress. Klasika. To už snad ani nemusím psát… Ale, musím, milé čtenářky a čtenáři, musím. Ano, i na WordPressu jde všechno udělat dobře. Ale často se to dělá, no vy víte jak… Najme se vývojář, který je levný a nerozumí tomu. I relativně velké weby jsou často jen neudržovaným slepencem pluginů. Levný vývojář je levný. Takže to udělá blbě, nekomunikuje, neřeší, je zrovna na Kanárech… V PageSpeed.cz to při poradenství k rychlosti vidíme často. Konzultace nebo analýzy mohou u být u levných řešení výrazně náročnější než u řešení na míru. Pořád to může vycházet ekonomicky, projektově nebo jinak dobře. Jasně, že může. Ale rozhodně si to dejte do kalkulace. Nenechte se překvapit. Já jsem vám to říkal. Text původně vyšel na LinkedInu, kde jej také můžete komentovat, lajkovat nebo jinak doplnit.
