{"id":623,"date":"2020-04-28T14:21:51","date_gmt":"2020-04-28T12:21:51","guid":{"rendered":"https:\/\/sellingo.pl\/blog\/?p=623"},"modified":"2024-03-09T22:06:50","modified_gmt":"2024-03-09T21:06:50","slug":"czy-sa-pliki-webp-i-dlaczego-warto-z-nich-korzystac","status":"publish","type":"post","link":"https:\/\/sellingo.pl\/blog\/czy-sa-pliki-webp-i-dlaczego-warto-z-nich-korzystac\/","title":{"rendered":"Czym s\u0105 Pliki WebP i dlaczego warto z nich korzysta\u0107?"},"content":{"rendered":"\n<div class=\"wp-block-cover has-background-dim\" style=\"background-image:url(https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/three-white-ceramic-pots-with-green-leaf-plants-near-open-796602-copy-1.jpg)\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Czym s\u0105 Pliki WebP i dlaczego warto z nich korzysta\u0107?<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>W niniejszym artykule poznasz najwa\u017cniejsze informacje o plikach WebP &#8211; czym r\u00f3\u017cni\u0105 si\u0119 od innych format\u00f3w plik\u00f3w graficznych i dowiesz si\u0119, jakie korzy\u015bci wnosz\u0105 w Twoim sklepie <a href=\"https:\/\/sellingo.pl\" target=\"_blank\" rel=\"noopener\" title=\"\">Sellingo!<\/a><\/strong><\/p>\n\n\n\n<p>Standardowo w darmowych sk\u00f3rkach graficznych sklep\u00f3w <a href=\"https:\/\/sellingo.pl\/\">Sellingo.pl<\/a> wprowadzili\u015bmy automatyczn\u0105 konwersj\u0119 plik\u00f3w graficznych do nowego formatu, jakim jest WebP. <\/p>\n\n\n\n<h2>Czym jest WebP?<\/h2>\n\n\n\n<p><strong><span style=\"color:#0f6f40\" class=\"has-inline-color\">WebP jest formatem plik\u00f3w graficznych stworzonym po to, aby zast\u0105pi\u0107, przy\u015bpieszy\u0107 i ujednolici\u0107 starsze formaty tj. JPEG, PNG czy GIF. Technologia WebP zosta\u0142a wprowadzona w celu zmniejszenia rozmiar\u00f3w obraz\u00f3w zawartych na stronach internetowych.<\/span> <\/strong>WebP zosta\u0142 stworzony przez Google na bazie technologii pozyskanej od zakupionej przez Google firmy On2 Technologies. Format WebP to nowy standard dla plik\u00f3w graficznych, funkcjonuj\u0105cy od wrze\u015bnia 2010 roku. Dzi\u0119ki zastosowanej kompresji stratnej WebP pozwala zmniejszy\u0107 wag\u0119 plik\u00f3w graficznych przy zachowaniu por\u00f3wnywalnej jako\u015bci z orygina\u0142em w formacie JPEG. W 2012 roku WebP otrzyma\u0142 r\u00f3wnie\u017c wsparcie kompresji bezstratnej, co pozwala r\u00f3wnie\u017c kompresj\u0119 wagi przy por\u00f3wnywalnej jako\u015bci plik\u00f3w PNG.<\/p>\n\n\n\n<p><strong>WebP powoli staje si\u0119 standardem plik\u00f3w graficznych u\u017cywanych w internecie.<\/strong> Zastosowanie najnowszej technologii na Twojej stronie mo\u017ce przynie\u015b\u0107 wiele korzy\u015bci, a dzi\u0119ki <a href=\"https:\/\/sellingo.pl\" target=\"_blank\" rel=\"noopener\" title=\"\">Sellingo<\/a> nie musisz martwi\u0107 si\u0119 r\u00f3wnie\u017c o internaut\u00f3w odwiedzaj\u0105cych Twoj\u0105 stron\u0119 z mniej popularnych przegl\u0105darek. WebP przy\u015bpieszy \u0142adowanie Twojej strony internetowej sklepu, co sprawi, \u017ce b\u0119dzie ona jeszcze bardziej przyjazna dla u\u017cytkownik\u00f3w, a Google jeszcze lepiej oceni jako\u015b\u0107 Twojej witryny i b\u0119dzie pozycjonowa\u0107 j\u0105 wy\u017cej w wynikach wyszukiwania.<\/p>\n\n\n\n<h2>Konwerter plik\u00f3w WebP w Sellingo.pl<\/h2>\n\n\n\n<p>Chocia\u017c w internecie do wyboru masz kilka mo\u017cliwo\u015bci samodzielnego konwertowania plik\u00f3w i mo\u017cesz to r\u00f3wnie\u017c robi\u0107 w cz\u0119\u015bci program\u00f3w graficznych na komputerze, aby nast\u0119pnie wstawi\u0107 je do strony swojego sklepu internetowego, ale my proponujemy Ci znacznie wygodniejsze rozwi\u0105zanie.<\/p>\n\n\n\n<h2>Wbudowany konwerter grafik do WebP<\/h2>\n\n\n\n<p><strong><span style=\"color:#0f6f40\" class=\"has-inline-color\">Sklep Sellingo posiada wbudowany konwerter, kt\u00f3ry automatycznie skompresuje wstawiane przez Ciebie pliki z tradycyjnego formatu na format standardu WebP.<\/span><\/strong> To \u015bwietne i niezwykle wygodne rozwi\u0105zanie, kt\u00f3re nic nie zmienia w Twoim aktualnym procesie wstawiania grafik. Zrobisz to dok\u0142adnie tak jak dotychczas. Wstawisz swoj\u0105 grafik\u0119 z tradycyjnym rozszerzeniem, a Tw\u00f3j sklep Sellingo automatycznie zamieni j\u0105 na format WebP.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Szybszy i l\u017cejszy<\/p><cite>WebP przy\u015bpieszy dzia\u0142anie Twojej strony w przegl\u0105darkach obs\u0142uguj\u0105cych  ten format, a dzi\u0119ki mniejszej wadze plik\u00f3w, zmniejszy si\u0119 tak\u017ce zu\u017cycie transferu. <\/cite><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<h2>WebP w Sellingo, a przegl\u0105darki niewspieraj\u0105ce WebP<\/h2>\n\n\n\n<p>W przypadku Sellingo dalej przechowywane s\u0105 oryginalne pliki, kt\u00f3re u\u017cywane b\u0119d\u0105 teraz tylko na potrzeby wy\u015bwietlania obrazk\u00f3w w przegl\u0105darkach niewspieraj\u0105cych WebP. Nie musisz si\u0119 wi\u0119c martwi\u0107 o tych u\u017cytkownik\u00f3w, kt\u00f3rzy w\u0142a\u015bnie z nich korzystaj\u0105.<\/p>\n\n\n\n<h2>WebP vs JPEG i PNG<\/h2>\n\n\n\n<p>Skoro WebP jest lepsze, por\u00f3wnajmy na przyk\u0142adach obrazk\u00f3w, jak wypada ten format w zestawieniu ze znanymi wszystkim formatami graficznymi tj. JPEG i PNG.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Format:<\/td><td><strong>WebP<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><\/tr><tr><td>Link obrazka:<\/td><td><a href=\"https:\/\/drive.google.com\/open?id=1vdaaJ082vwMmLd_SuyDQhVZxtHKuqHgS\"><\/a><a href=\"https:\/\/drive.google.com\/open?id=1BmZc4HBfwnAQwGpqE9Ox8wJKcpnoRYjT\">Obrazek WebP z PNG<\/a><a href=\"https:\/\/drive.google.com\/open?id=1BmZc4HBfwnAQwGpqE9Ox8wJKcpnoRYjT\"><br>Obrazek WebP z JPEG<\/a><\/td><td><a href=\"https:\/\/drive.google.com\/open?id=1HoKCebodOoPlhMuvHbCcc1ND6EKlOHGc\">Obrazek JPEG<\/a><\/td><td><a href=\"https:\/\/drive.google.com\/open?id=1V_uNtKWDf6p7nTXjUNb6yEdElg-dZFo3\">Obrazek PNG<\/a><\/td><\/tr><tr><td>Waga:<\/td><td>10,2 KB \/ 9,68 KB<\/td><td>17,2 KB<\/td><td>81,9 KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>WebP vs JPEG<\/strong><\/td><td><strong>WebP vs PNG<\/strong><\/td><\/tr><tr><td>W przypadku por\u00f3wnania z JPEG format WebP wypada znacznie lepiej. Pliki WebP przy zachowaniu tej samej jako\u015bci potrafi\u0105 by\u0107 nawet do 43% l\u017cejsze w por\u00f3wnaniu z JPEG.<\/td><td>PNG to format obs\u0142uguj\u0105cy przezroczysto\u015b\u0107, co r\u00f3wnie\u017c potrafi WebP. Jest to szczeg\u00f3lnie wa\u017cne w projektowaniu materia\u0142\u00f3w graficznych czy stron internetowych. Daje to mo\u017cliwo\u015b\u0107 pracy i zawarcia takich plik\u00f3w na warstwach. Pliki WebP z tak\u0105 sam\u0105 jako\u015bci\u0105 mog\u0105 by\u0107 znacznie l\u017cejsze od oryginalnego PNG.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"docs-internal-guid-593173dc-7fff-12aa-a1cb-9846814920fd\">Korzy\u015bci z u\u017cycia kompresji do WebP<\/h2>\n\n\n\n<p>Pliki graficzne stanowi\u0105 zwykle wi\u0119kszo\u015b\u0107 zawarto\u015bci danych na stronie internetowej. To w\u0142a\u015bnie one g\u0142\u00f3wnie obci\u0105\u017caj\u0105 i spowalniaj\u0105 jej dzia\u0142anie. <strong><span style=\"color:#0f6f40\" class=\"has-inline-color\">WebP to zdecydowanie l\u017cejszy format plik\u00f3w graficznych, a ze wzgl\u0119du na ma\u0142\u0105 wag\u0119, obrazki wczytuj\u0105 si\u0119 szybciej, co realnie wp\u0142ywa na przy\u015bpieszenie wy\u015bwietlania si\u0119 i dzia\u0142ania stron.<\/span><\/strong> Strony \u0142aduj\u0105 si\u0119 szybciej, co z kolei to wp\u0142ywa na komfort ich u\u017cytkowania.<\/p>\n\n\n\n<p>Pliki graficzne stanowi\u0105 zwykle wi\u0119kszo\u015b\u0107 zawarto\u015bci danych na stronie. To w\u0142a\u015bnie one g\u0142\u00f3wnie obci\u0105\u017caj\u0105 i spowalniaj\u0105 jej dzia\u0142anie. <strong>Ma\u0142a waga obrazk\u00f3w realnie wp\u0142ywa na mniejsze zu\u017cycie transferu, przy\u015bpieszenie wy\u015bwietlania si\u0119 i dzia\u0142ania stron internetowych. Strony \u0142aduj\u0105 si\u0119 szybciej, co z kolei to wp\u0142ywa na komfort ich u\u017cytkowania.<\/strong><\/p>\n\n\n\n<p><strong>WebP pozytywnie wp\u0142ywa tak\u017ce na popraw\u0119 jako\u015bci strony w oczach Google, co prze\u0142o\u017cy\u0107 si\u0119 mo\u017ce na wy\u017csze pozycje strony w wyszukiwarce oraz jej wynik szybko\u015bci w Google Pagespeed Insights. <\/strong>Google lepiej indeksuje sprawne i szybkie strony internetowe, a na dodatek WebP to format wspierany i promowany przez Google. Ka\u017cdy aspekt WebP wskazuje na to, \u017ce dzi\u0119ki niemu Twoja strona nie tylko przy\u015bpieszy, ale b\u0119dzie te\u017c wy\u017cej w wynikach wyszukiwania.<\/p>\n\n\n\n<h2>Wady rozwi\u0105zania WebP<\/h2>\n\n\n\n<p>WebP nie jest jeszcze formatem idealnym, a jego najwi\u0119kszym ograniczeniem jest to, \u017ce pomimo lat nie rozpowszechni\u0142 si\u0119 szybko i nadal jest niszowym rozwi\u0105zaniem. Ze wzgl\u0119du na wprowadzenie tego formatu przez Google, w pierwszej kolejno\u015bci to w\u0142a\u015bnie przegl\u0105darka <strong><a href=\"https:\/\/www.google.com\/search?client=opera&amp;q=chrome&amp;sourceid=opera&amp;ie=UTF-8&amp;oe=UTF-8\">Chrome <\/a><\/strong>zapewnia\u0142a wsparcie dla tego formatu. Kolejn\u0105 przegl\u0105dark\u0105 ze wsparciem plik\u00f3w WebP sta\u0142a si\u0119 r\u00f3wnie\u017c<strong> <a href=\"https:\/\/cashback.opera.com\/pl\/?\" target=\"_blank\" rel=\"noopener\" title=\"\">Opera<\/a><\/strong>. Niestety, najwi\u0119ksz\u0105 wad\u0105 WebP jest brak wsparcia w innych bardzo popularnych przegl\u0105darkach tj. Firefox, Safari czy Internet Explorer.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img width=\"1024\" height=\"387\" src=\"https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1-1024x387.png\" alt=\"WebP w Sellingo\" class=\"wp-image-631\" srcset=\"https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1-1024x387.png 1024w, https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1-300x113.png 300w, https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1-768x290.png 768w, https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1-400x151.png 400w, https:\/\/sellingo.pl\/blog\/wp-content\/uploads\/2020\/04\/formatwebp-1.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Google Chrome jest jednak dominuj\u0105c\u0105 przegl\u0105dark\u0105 i korzysta z niej ponad 60% internaut\u00f3w, zar\u00f3wno na komputerach osobistych, jak i urz\u0105dzeniach mobilnych.<\/p>\n\n\n\n<p>Wg. danych z marca 2020 wed\u0142ug serwisu StatCounter:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Udzia\u0142 na komputerach PC:<\/strong><\/td><td><\/td><td><strong>Udzia\u0142 na urz\u0105dzeniach mobilnych:<\/strong><\/td><td><br><\/td><\/tr><tr><td>Google Chrome<\/td><td>68,11%<\/td><td>Google Chrome<\/td><td>61,52%<\/td><\/tr><tr><td>Firefox<\/td><td>9,25%<\/td><td>Safari<\/td><td>24,95%<\/td><\/tr><tr><td>Safari<\/td><td>8,93%<\/td><td>Samsung Internet<\/td><td>6,47%<\/td><\/tr><tr><td>Microsoft Edge<\/td><td>4,56%<\/td><td>UC Browser<\/td><td>3,64%<\/td><\/tr><tr><td>Inne<\/td><td>9,15%<\/td><td>Inne<\/td><td>4,42%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>W sklepie internetowym Sellingo problem ten rozwi\u0105zali\u015bmy dzi\u0119ki zachowaniu oryginalnych pliki, kt\u00f3re u\u017cywane s\u0105 na potrzeby przegl\u0105darek niewspieraj\u0105cych jeszcze formatu WebP. Obrazki b\u0119d\u0105 wi\u0119c wy\u015bwietlane w odpowiednim standardzie niezale\u017cnie od wybranej przegl\u0105darki.<\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter\">\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\" href=\"https:\/\/sellingo.pl\/pomoc\/jak-wlaczyc-pliki-webp\" target=\"_blank\" rel=\"noreferrer noopener\">Sprawd\u017a jak udost\u0119pni\u0107 pliki WebP w Sellingo<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom kksr-disabled\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;623&quot;,&quot;readonly&quot;:&quot;1&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;19&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;4.4&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;4&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;4.4\\\/5 - (19 votes)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Czym s\u0105 Pliki WebP i dlaczego warto z nich korzysta\u0107?&quot;,&quot;width&quot;:&quot;112.4&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 112.4px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            4.4\/5 - (19 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>W niniejszym artykule poznasz najwa\u017cniejsze informacje o plikach WebP.<\/p>\n","protected":false},"author":1,"featured_media":625,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[34,29,30],"tags":[379,380,381],"_links":{"self":[{"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/posts\/623"}],"collection":[{"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":20,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/posts\/623\/revisions"}],"predecessor-version":[{"id":5038,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/posts\/623\/revisions\/5038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/media\/625"}],"wp:attachment":[{"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/categories?post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sellingo.pl\/blog\/wp-json\/wp\/v2\/tags?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}