{"id":5718,"date":"2021-03-22T07:40:46","date_gmt":"2021-03-22T06:40:46","guid":{"rendered":"https:\/\/pomoc.dhosting.pl\/?post_type=manual_kb&#038;p=5718"},"modified":"2023-05-18T16:03:28","modified_gmt":"2023-05-18T14:03:28","slug":"jpg-webp-png-svg-ktory-format-obrazkow-wybrac","status":"publish","type":"manual_kb","link":"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/","title":{"rendered":"JPG, WEBP, PNG, SVG \u2013 kt\u00f3ry format obrazk\u00f3w wybra\u0107?"},"content":{"rendered":"<p>Strony internetowe, poza tre\u015bci\u0105 w postaci tekstu jak opisy, informacje czy aktualno\u015bci sk\u0142adaj\u0105 si\u0119 z obraz\u00f3w. Jaki format sprawdzi si\u0119 najlepiej dla poszczeg\u00f3lnych zastosowa\u0144? Zacznijmy mo\u017ce od opisu poszczeg\u00f3lnych format\u00f3w.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-left counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Spis tre\u015bci<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#JPG\" >JPG<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#WEBP\" >WEBP<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#PNG\" >PNG<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#SVG\" >SVG<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#Jaki_format_do_czego\" >Jaki format do czego?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/dhosting.pl\/pomoc\/baza-wiedzy\/jpg-webp-png-svg-ktory-format-obrazkow-wybrac\/#Przydatne_narzedzia_online\" >Przydatne narz\u0119dzia online<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"JPG\"><\/span>JPG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>JPG<\/strong> &#8211; jest formatem, kt\u00f3ry charakteryzuje si\u0119 wysokim stopniem kompresji, co sprawia, \u017ce pliki zajmuj\u0105 mniej i co za tym idzie \u0142aduj\u0105 si\u0119 szybciej na stronach internetowych. Jest stosowany i przystosowany do zdj\u0119\u0107, por\u00f3wnuj\u0105c podczas kompresowania s\u0105siednie piksele tak, aby wzrok nie zauwa\u017cy\u0142 znacznej r\u00f3\u017cnicy, ale danych by\u0142o mniej. Nale\u017cy mie\u0107 na uwadze, \u017ce jest to kompresja stratna, tak wi\u0119c warto jest dokonuj\u0105c kompresji do pliku <strong>JPG<\/strong> zachowa\u0107 oryginalne zdj\u0119cie, poniewa\u017c po wykonaniu kompresji i zapisaniu pliku, pewne dane zostan\u0105 bezpowrotnie utracone.<\/p>\n<p>Format ten stosujemy wy\u0142\u0105cznie do zdj\u0119\u0107 statycznych. Nie mo\u017cna dokona\u0107 kompresji animacji <strong>GIF<\/strong> do formatu <strong>JPG<\/strong> z zachowaniem animowanych element\u00f3w, oraz nie ma mo\u017cliwo\u015bci zapisania warstwy prze\u017aroczystej.<\/p>\n<div id=\"dhost-3312166347\" class=\"dhost-inpost dhost-entity-placement\"><a href=\"https:\/\/dhosting.pl\/opieka-stron.html?utm_source=pomoc&utm_medium=artykul&utm_campaign=pomoc\" target=\"_blank\">\r\n\t<img decoding=\"async\" src=\"https:\/\/dhosting.pl\/pomoc\/wp-content\/uploads\/2025\/01\/baner-opieka.png\" alt=\"opieka stron www\">\r\n<\/a>\r\n<br \/>\r\n<br \/><\/div><h2><span class=\"ez-toc-section\" id=\"WEBP\"><\/span>WEBP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>WEBP<\/strong> &#8211; jest formatem rozwijanym przez <strong>Google<\/strong> i ma na celu zast\u0105pienie przede wszystkim serwowania obraz\u00f3w w formacie <strong>JPG<\/strong>. Charakteryzuje si\u0119 kompresj\u0105 w trybie stratnym oraz bezstratnym. Przy zastosowaniu kompresji stratnej obrazu, podobnie jak w wypadku<strong> JPG<\/strong>, nast\u0119puje por\u00f3wnanie s\u0105siednich pikseli i usuni\u0119cie ich. Odbywa si\u0119 to jednak za spraw\u0105 innego algorytmu, wypracowanego przez Google przez co jako\u015b\u0107 obrazu sprawia wra\u017cenie lepszej, a stopie\u0144 kompresji jest jednocze\u015bnie wy\u017cszy i tak mo\u017cemy osi\u0105gn\u0105\u0107 pliki mniejsze nawet o 25 czy w skrajnych wypadkach 35%.<\/p>\n<p>Mimo i\u017c format ten istnieje i jest powszechnie dost\u0119pny od ponad 10 lat, nie sta\u0142 si\u0119 standardem i nie wypar\u0142 jak planowano formatu<strong> JPG<\/strong>. Cz\u0119sto stosuje si\u0119 wi\u0119c przy u\u017cyciu wtyczek dla popularnych system\u00f3w zarz\u0105dzania tre\u015bci\u0105 (<strong>CMS<\/strong>) rozwi\u0105zania gdzie na serwerze zapisane s\u0105 zar\u00f3wno pliki w formacie <strong>JPG<\/strong> oraz <strong>WEBP<\/strong> i serwowane te, kt\u00f3re obs\u0142uguje przegl\u0105darka WWW odwiedzaj\u0105cej stron\u0119 osoby.<\/p>\n<p>Zalet\u0105 <strong>WEBP<\/strong> poza wy\u017cszym stopniem kompresji i lepsz\u0105 jako\u015bci\u0105 obraz\u00f3w jest fakt i\u017c format ten obs\u0142uguje warstw\u0119 prze\u017aroczysto\u015bci, tak wi\u0119c nadaje si\u0119 nie tylko do obs\u0142ugi zdj\u0119\u0107, ale r\u00f3wnie\u017c grafik, kt\u00f3re takie warstwy cz\u0119sto zawieraj\u0105.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"PNG\"><\/span>PNG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>PNG<\/strong> &#8211; to format, kt\u00f3ry z za\u0142o\u017cenia powsta\u0142 na potrzeby internetowe, st\u0105d te\u017c jego nazwa, kt\u00f3ra rozwija si\u0119 na <strong>Portable Network Graphics<\/strong>. Historycznie format ten powsta\u0142 r\u00f3wnie\u017c jako nast\u0119pca formatu <strong>GIF<\/strong> w chwili gdy pojawi\u0142y si\u0119 roszczenia zwi\u0105zane z kwesti\u0105 prawn\u0105 u\u017cycia kompresji stosowanej w tym formacie (<strong>GIF<\/strong>).\u00a0 <strong>PNG<\/strong> sprawdza si\u0119 najlepiej gdy mamy do czynienia nie ze zdj\u0119ciami, a z grafikami r\u00f3\u017cnego rodzaju, w tym zawieraj\u0105cymi warstw\u0119 prze\u017aroczysto\u015bci. Stopie\u0144 kompresji nie jest tutaj zbyt wysoki, tak wi\u0119c zdj\u0119cia w tym formacie mog\u0105 zajmowa\u0107 sporo wi\u0119cej ni\u017c np. w formacie <strong>JPG<\/strong>, jednak przy grafice zawieraj\u0105cej wiele jednolitych kolor\u00f3w oraz gdzie zachodzi potrzeba posiadania prze\u017aroczysto\u015bci, sprawia si\u0119 bardzo dobrze.<\/p>\n<p>Warto wspomnie\u0107, \u017ce z uwagi i\u017c format ten mia\u0142 zast\u0105pi\u0107 GIF, kt\u00f3ry pozwala na animowane elementy, jest mo\u017cliwo\u015b\u0107 zapisania animacji z\u0142o\u017conej z klatek obraz\u00f3w for formatu APNG czyli Animated Portable Network Graphics. Tego typu rozwi\u0105zanie jednak nie przyj\u0119\u0142o si\u0119 i jest tutaj wspomniane wy\u0142\u0105cznie jako ciekawostka.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"SVG\"><\/span>SVG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>SVG<\/strong> &#8211; jest formatem grafiki wektorowej w przeciwie\u0144stwie do wy\u017cej przedstawionych format\u00f3w, kt\u00f3re nale\u017c\u0105 do rastrowych. Czym to si\u0119 r\u00f3\u017cni? Na pewno zwr\u00f3ci\u0142e\u015b uwag\u0119, \u017ce przy powi\u0119kszaniu zdj\u0119\u0107 w pewnym momencie pojawiaj\u0105 si\u0119 piksele. Kraw\u0119dzie nie s\u0105 ju\u017c ostre, a rozmyte. Ma to zwi\u0105zek z tym, \u017ce format rastrowy ma zadan\u0105 rozdzielczo\u015b\u0107 i obraz nie jest skalowany, a powi\u0119kszany. W przypadku grafiki wektorowej, obraz i tu warto wspomnie\u0107, \u017ce tym obrazem jest wy\u0142\u0105cznie grafika dwuwymiarowa jest zapisany w postaci instrukcji \/ funkcji matematycznych, a nie pikseli umiejscowionych na siatce sk\u0142adaj\u0105cej si\u0119 na obraz. To sprawia, \u017ce z technicznego punktu widzenia taki obraz mo\u017ce by\u0107 skalowany w niesko\u0144czono\u015b\u0107 bez strat i kraw\u0119dzie danych element\u00f3w graficznych zawsze b\u0119d\u0105 g\u0142adkie \/ ostre.<\/p>\n<p>Format ten stosowany ze wzgl\u0119du na swoj\u0105 konstrukcj\u0119 charakteryzuje si\u0119 bardzo ma\u0142ymi rozmiarami plik\u00f3w, poniewa\u017c to przegl\u0105darka odczytuje instrukcje, kt\u00f3re zawiera plik<strong> SVG<\/strong> i rysuje obraz. Najcz\u0119\u015bciej jako pliki <strong>SVG<\/strong> mo\u017cemy spotka\u0107 r\u00f3\u017cnego rodzaju ikony i im podobne elementy graficzne na stronach. Niekiedy logotypy serwis\u00f3w internetowych r\u00f3wnie\u017c s\u0105 zapisane i serwowane w tym formacie. Dodatkowym atutem jest fakt i\u017c obraz taki nie musi by\u0107 serwowany z odr\u0119bnie zapisanego pliku, a zamieszczony wprost w kodzie strony WWW, co sprawia, \u017ce odwo\u0142a\u0144 do plik\u00f3w zewn\u0119trznych jest mniej i co za tym idzie, strona \u0142aduje si\u0119 nieco szybciej.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Jaki_format_do_czego\"><\/span>Jaki format do czego?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Podsumowuj\u0105c wi\u0119c je\u015bli chcesz zamie\u015bci\u0107 zdj\u0119cie, to dobr\u0105 praktyk\u0105 b\u0119dzie zastosowanie wtyczki potrafi\u0105cej wygenerowa\u0107 i zaserwowa\u0107 odwiedzaj\u0105cemu pliki <strong>WEBP<\/strong> ze wzgl\u0119du na ich dobr\u0105 jako\u015b\u0107 i wysoki stopie\u0144 kompresji, pami\u0119taj\u0105c jednak o tym aby domy\u015blnie strona zawiera\u0142a r\u00f3wnie\u017c zdj\u0119cia w formacie <strong>JPG<\/strong>. W ten spos\u00f3b niezale\u017cnie od tego jakiej przegl\u0105darki WWW u\u017cyje odwiedzaj\u0105cy Twoj\u0105 stron\u0119, zdj\u0119cia na pewno zostan\u0105 za\u0142adowane i przedstawione poprawnie.<\/p>\n<p>W sytuacji gdy planujesz zamieszczenie grafik gdzie wymogiem b\u0119dzie prze\u017aroczysto\u015b\u0107, a same obrazy b\u0119d\u0105 mia\u0142y pewien stopie\u0144 skomplikowania jak przej\u015bcia tonalne itp. przy jednocze\u015bnie niewielkich rozmiarach, dobrym wyborem b\u0119dzie zapisanie ich do formatu <strong>PNG<\/strong>.<\/p>\n<p>Gdy Twoja strona natomiast ma zwiera\u0107 elementy takie jak ikony czy stosunkowo proste grafiki dwuwymiarowe, najbardziej optymalnym b\u0119dzie u\u017cycie plik\u00f3w w formacie <strong>SVG<\/strong>.<\/p>\n<div class=\"success-alert-format\">\n<p>Pami\u0119taj, \u017ce zastosowanie formatu o wysokiej kompresji nie sprawi, \u017ce Twoja strona b\u0119dzie \u0142adowa\u0142a si\u0119 szybciej je\u015bli nie dostosujesz rozdzielczo\u015bci obraz\u00f3w do potrzeb strony WWW. Pami\u0119taj wi\u0119c, aby w polu o przyk\u0142adowych rozmiarach 500&#215;500 pikseli nie wybiera\u0107 obrazu o rozdzielczo\u015bci 1000&#215;1000 pikseli. Stosowanie odpowiedniej rozdzielczo\u015bci obraz\u00f3w na pewno przyspieszy dzia\u0142anie Twojej strony WWW.<\/p>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Przydatne_narzedzia_online\"><\/span>Przydatne narz\u0119dzia online<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3>Konwertery online<\/h3>\n<p>JPG do WEBP &#8211; <a target=\"_blank\" href=\"https:\/\/convertio.co\/pl\/jpg-webp\/\" rel=\"noopener noreferrer\">https:\/\/convertio.co\/pl\/jpg-webp\/<\/a><br \/>\nJPG do PNG &#8211; <a target=\"_blank\" href=\"https:\/\/convertio.co\/pl\/jpg-png\/\" rel=\"noopener noreferrer\">https:\/\/convertio.co\/pl\/jpg-png\/<\/a><\/p>\n","protected":false},"author":6,"featured_media":10957,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[95,110],"manual_kb_tag":[1475,1476,1474,1473,655,1472,1468,1470,3517,1471,3516,1469],"class_list":["post-5718","manual_kb","type-manual_kb","status-publish","format-standard","has-post-thumbnail","hentry","manualknowledgebasecat-hosting","manualknowledgebasecat-zacznij-tutaj","manual_kb_tag-format-grafiki","manual_kb_tag-format-zdjecia","manual_kb_tag-formaty-grafik","manual_kb_tag-formaty-obrazow","manual_kb_tag-hosting","manual_kb_tag-jaki-format-wybrac","manual_kb_tag-jpg","manual_kb_tag-png","manual_kb_tag-polski-hosting","manual_kb_tag-svg","manual_kb_tag-web-hosting","manual_kb_tag-webp"],"_links":{"self":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/5718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":0,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb\/5718\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media\/10957"}],"wp:attachment":[{"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/media?parent=5718"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manualknowledgebasecat?post=5718"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/dhosting.pl\/pomoc\/wp-json\/wp\/v2\/manual_kb_tag?post=5718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}