{"id":12133,"date":"2025-09-04T16:21:15","date_gmt":"2025-09-04T14:21:15","guid":{"rendered":"https:\/\/wenet.pl\/blog\/?p=12133"},"modified":"2026-04-28T11:00:20","modified_gmt":"2026-04-28T09:00:20","slug":"jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec","status":"publish","type":"post","link":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/","title":{"rendered":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1080\" height=\"720\" data-src=\"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1.jpg\" alt=\"Wstawianie obrazka w kodzie HTML\" class=\"wp-image-12136 colorbox-12133 lazyload\" data-srcset=\"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1.jpg 1080w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-450x300.jpg 450w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-200x133.jpg 200w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-768x512.jpg 768w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-696x464.jpg 696w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-1068x712.jpg 1068w, https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-1-630x420.jpg 630w\" data-sizes=\"(max-width: 1080px) 100vw, 1080px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1080px; --smush-placeholder-aspect-ratio: 1080\/720;\" \/><\/figure>\n\n\n\n<p><strong>Czy wiesz, \u017ce ponad 60% internaut\u00f3w korzysta z wyszukiwania wizualnego i anga\u017cuje si\u0119 w tre\u015bci graficzne?*<\/strong> <strong>Obrazy nie tylko przyci\u0105gaj\u0105 uwag\u0119, ale te\u017c poprawiaj\u0105 do\u015bwiadczenie u\u017cytkownika i wspieraj\u0105 pozycjonowanie strony. Jednak, aby w pe\u0142ni wykorzysta\u0107 potencja\u0142 grafik, trzeba wiedzie\u0107, jak poprawnie wstawi\u0107 zdj\u0119cie HTML i jakie zasady obowi\u0105zuj\u0105 podczas dodawania plik\u00f3w graficznych do strony internetowej. W tym artykule poka\u017cemy Ci krok po kroku, jak dzia\u0142a znacznik <code>img<\/code> jakie ma mo\u017cliwo\u015bci oraz jakie b\u0142\u0119dy najcz\u0119\u015bciej pope\u0142niaj\u0105 pocz\u0105tkuj\u0105cy tw\u00f3rcy stron. Dowiesz si\u0119 tak\u017ce, jak zoptymalizowa\u0107 \u0142adowanie obraz\u00f3w, aby nie spowalnia\u0142y strony, a jednocze\u015bnie wspiera\u0142y SEO.<\/strong><\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white 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\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Prze\u0142\u0105cznik Spisu Tre\u015bci\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0a0a0a;color:#0a0a0a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0a0a0a;color:#0a0a0a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Jak_wstawic_zdjecie_HTML_krok_po_kroku\" >Jak wstawi\u0107 zdj\u0119cie HTML krok po kroku<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Checklista_%E2%80%93_o_czym_nalezy_pamietac_wstawiajac_obrazek_na_strone_www\" >Checklista &#8211; o czym nale\u017cy pami\u0119ta\u0107, wstawiaj\u0105c obrazek na stron\u0119 www?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Jak_dziala_atrybut_img_src\" >Jak dzia\u0142a atrybut img src?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Wlasciwe_uzycie_atrybutu_src\" >W\u0142a\u015bciwe u\u017cycie atrybutu src<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_src_a_ladowanie_obrazow\" >Atrybut src a \u0142adowanie obraz\u00f3w<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Wstawianie_obrazkow_a_wydajnosc_strony\" >Wstawianie obrazk\u00f3w a wydajno\u015b\u0107 strony<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Dlaczego_optymalizacja_obrazow_jest_tak_wazna\" >Dlaczego optymalizacja obraz\u00f3w jest tak wa\u017cna?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Jak_zoptymalizowac_rozmiar_obrazka\" >Jak zoptymalizowa\u0107 rozmiar obrazka?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Lazy_loading_%E2%80%93_oszczednosc_zasobow\" >Lazy loading \u2013 oszcz\u0119dno\u015b\u0107 zasob\u00f3w<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Znaczenie_nazwy_pliku_obrazka_dla_SEO\" >Znaczenie nazwy pliku obrazka dla SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Najlepsze_praktyki_dotyczace_wydajnosci\" >Najlepsze praktyki dotycz\u0105ce wydajno\u015bci<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybuty_ktore_warto_znac\" >Atrybuty, kt\u00f3re warto zna\u0107<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_src_%E2%80%93_podstawa_osadzania_obrazow\" >Atrybut src \u2013 podstawa osadzania obraz\u00f3w<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_alt_%E2%80%93_alternatywny_opis\" >Atrybut alt \u2013 alternatywny opis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybuty_width_i_height_%E2%80%93_kontrola_rozmiaru_obrazka\" >Atrybuty width i height \u2013 kontrola rozmiaru obrazka<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_title_%E2%80%93_podpowiedz_dla_uzytkownika\" >Atrybut title \u2013 podpowied\u017a dla u\u017cytkownika<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_loading_%E2%80%93_sterowanie_sposobem_ladowania_obrazow\" >Atrybut loading \u2013 sterowanie sposobem \u0142adowania obraz\u00f3w<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Atrybut_srcset_%E2%80%93_grafika_responsywna\" >Atrybut srcset \u2013 grafika responsywna<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Jak_madrze_uzywac_atrybutow\" >Jak m\u0105drze u\u017cywa\u0107 atrybut\u00f3w?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Praktyczne_przyklady_jak_wstawic_obrazek_HTML\" >Praktyczne przyk\u0142ady: jak wstawi\u0107 obrazek HTML?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Obraz_lokalny_z_poprawnym_alt_i_okreslonym_rozmiarem\" >Obraz lokalny z poprawnym alt i okre\u015blonym rozmiarem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Wstawienie_zdjecia_HTML_z_zewnetrznego_CDN\" >Wstawienie zdj\u0119cia HTML z zewn\u0119trznego CDN<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Obrazek_jako_link_klikalne_logo_miniatura\" >Obrazek jako link (klikalne logo \/ miniatura)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Lazy_loading_szybkie_ladowanie_dlugich_stron\" >Lazy loading: szybkie \u0142adowanie d\u0142ugich stron<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Responsywne_obrazki_srcset_sizes\" >Responsywne obrazki: srcset + sizes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Art_direction_picture_z_WebP_JPG_fallback\" >Art direction: picture z WebP + JPG fallback<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Obrazek_z_podpisem_figure_figcaption\" >Obrazek z podpisem: figure + figcaption<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Miniatury_listingu_kontrola_wymiarow_i_kompromis_jakosci\" >Miniatury listingu: kontrola wymiar\u00f3w i kompromis jako\u015bci<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#SVG_inline_ikony_vs_bitmapy_zdjecia\" >SVG inline (ikony) vs. bitmapy (zdj\u0119cia)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Dane_osadzone_Data_URI_%E2%80%94_mikro-grafiki_i_placeholdery\" >Dane osadzone (Data URI) \u2014 mikro-grafiki i placeholdery<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Bledy_i_fallback_jak_nie_zaskoczyc_uzytkownika\" >B\u0142\u0119dy i fallback: jak nie zaskoczy\u0107 u\u017cytkownika<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Checklista_jakosci_co_sprawdzic_przed_publikacja\" >Checklista jako\u015bci: co sprawdzi\u0107 przed publikacj\u0105?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Gdzie_doczytac_wiecej\" >Gdzie doczyta\u0107 wi\u0119cej?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#FAQ_%E2%80%93_Pytania_i_odpowiedzi\" >FAQ &#8211; Pytania i odpowiedzi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Czym_jest_atrybut_alt_i_dlaczego_jest_wazny\" >Czym jest atrybut alt i dlaczego jest wa\u017cny?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#Jak_optymalizowac_obrazy_pod_katem_SEO\" >Jak optymalizowa\u0107 obrazy pod k\u0105tem SEO?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jak_wstawic_zdjecie_HTML_krok_po_kroku\"><\/span>Jak wstawi\u0107 zdj\u0119cie HTML krok po kroku<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Aby wstawi\u0107 zdj\u0119cie HTML, nale\u017cy pos\u0142u\u017cy\u0107 si\u0119 znacznikiem <code>img<\/code>, kt\u00f3ry jest jednym z najcz\u0119\u015bciej u\u017cywanych element\u00f3w w kodzie strony internetowej. W odr\u00f3\u017cnieniu od innych tag\u00f3w, nie wymaga on zamkni\u0119cia, poniewa\u017c jest tzw. elementem pustym. To w\u0142a\u015bnie on odpowiada za prawid\u0142owe \u0142adowanie obraz\u00f3w w przegl\u0105darce u\u017cytkownika.<\/p>\n\n\n\n<p>Podstawowa sk\u0142adnia wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"nazwa-pliku-obrazka.jpg\" alt=\"Opis obrazka\"><\/code><\/pre>\n\n\n\n<p>W tym przyk\u0142adzie kluczowy jest atrybut<code>src<\/code>, poniewa\u017c to on definiuje lokalizacj\u0119 pliku graficznego. Je\u017celi chcesz wstawi\u0107 obrazek HTML z katalogu na serwerze, wystarczy poda\u0107 nazw\u0119 pliku obrazka wraz ze \u015bcie\u017ck\u0105. Mo\u017cesz r\u00f3wnie\u017c skorzysta\u0107 z pe\u0142nego adresu URL, aby osadzi\u0107 grafik\u0119 z zewn\u0119trznego \u017ar\u00f3d\u0142a.<\/p>\n\n\n\n<p>Przegl\u0105daj\u0105c kod, warto zwr\u00f3ci\u0107 uwag\u0119 na to, \u017ce atrybut img src mo\u017cna rozbudowa\u0107 o dodatkowe parametry, kt\u00f3re pomog\u0105 kontrolowa\u0107 spos\u00f3b wy\u015bwietlania grafiki. Przyk\u0142adowo, dodaj\u0105c <code>width<\/code> i <code>height<\/code>, okre\u015blisz rozmiar obrazka bez konieczno\u015bci edytowania go w programie graficznym. Dzi\u0119ki temu kod HTML staje si\u0119 elastyczny i pozwala na szybk\u0105 modyfikacj\u0119 wygl\u0105du strony.<\/p>\n\n\n\n<p>Dobr\u0105 praktyk\u0105 jest r\u00f3wnie\u017c u\u017cywa\u0107 atrybut\u00f3w src w po\u0142\u0105czeniu z <code>alt<\/code>, kt\u00f3ry pe\u0142ni rol\u0119 tekstu alternatywnego. To rozwi\u0105zanie szczeg\u00f3lnie wa\u017cne z punktu widzenia SEO oraz dost\u0119pno\u015bci \u2013 osoby korzystaj\u0105ce z czytnik\u00f3w ekranu otrzymuj\u0105 opis tre\u015bci graficznej, a wyszukiwarki mog\u0105 lepiej zrozumie\u0107, co przedstawia dana ilustracja.<\/p>\n\n\n\n<p>Warto pami\u0119ta\u0107, \u017ce <strong>poprawne wstawienie obrazka wymaga tak\u017ce odpowiedniego nazewnictwa plik\u00f3w<\/strong>. Zamiast stosowa\u0107 domy\u015blne nazwy typu <code>zdj123.jpg<\/code>, lepiej u\u017cy\u0107 opisowych, np. <code>buty-sportowe-nike.jpg<\/code>. Dzi\u0119ki temu nie tylko u\u0142atwisz organizacj\u0119 plik\u00f3w, ale te\u017c zwi\u0119kszysz szanse na lepsze pozycjonowanie w wynikach wyszukiwania.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Checklista_%E2%80%93_o_czym_nalezy_pamietac_wstawiajac_obrazek_na_strone_www\"><\/span>Checklista &#8211; o czym nale\u017cy pami\u0119ta\u0107, wstawiaj\u0105c obrazek na stron\u0119 www?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Podsumowuj\u0105c \u2013 <strong>aby prawid\u0142owo wstawi\u0107 zdj\u0119cie HTML, nale\u017cy<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wykorzysta\u0107 znacznik <code>img<\/code> i wskaza\u0107 \u017ar\u00f3d\u0142o grafiki za pomoc\u0105 atrybutu src,<\/li>\n\n\n\n<li>zadba\u0107 o poprawn\u0105 nazw\u0119 pliku obrazka,<\/li>\n\n\n\n<li>okre\u015bli\u0107 odpowiedni rozmiar obrazka,<\/li>\n\n\n\n<li>pami\u0119ta\u0107 o <code>alt<\/code> wspieraj\u0105cym SEO i dost\u0119pno\u015b\u0107,<\/li>\n\n\n\n<li>zoptymalizowa\u0107 pliki tak, by przyspieszy\u0107 \u0142adowanie obraz\u00f3w na stronie.<\/li>\n<\/ul>\n\n\n\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-4c898496-4ccb-49bb-ac4c-46d5c4408a32\"><span class=\"hs-cta-node hs-cta-4c898496-4ccb-49bb-ac4c-46d5c4408a32\" id=\"hs-cta-4c898496-4ccb-49bb-ac4c-46d5c4408a32\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/4c898496-4ccb-49bb-ac4c-46d5c4408a32\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-4c898496-4ccb-49bb-ac4c-46d5c4408a32\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/4c898496-4ccb-49bb-ac4c-46d5c4408a32.png\"  alt=\"Do\u0142\u0105cz do newslettera\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '4c898496-4ccb-49bb-ac4c-46d5c4408a32', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jak_dziala_atrybut_img_src\"><\/span>Jak dzia\u0142a atrybut <code>img src<\/code>?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Podstaw\u0105 ka\u017cdego znacznika <code>img<\/code> jest atrybut<code>img src<\/code>, kt\u00f3ry pe\u0142ni rol\u0119 mostu pomi\u0119dzy kodem strony a plikiem graficznym. To w\u0142a\u015bnie on decyduje o tym, jakie zdj\u0119cie lub grafika zostanie wy\u015bwietlona u\u017cytkownikowi w przegl\u0105darce. Je\u017celi chcesz wstawi\u0107 zdj\u0119cie HTML, musisz wskaza\u0107 w <code>src<\/code> dok\u0142adn\u0105 lokalizacj\u0119 pliku.<\/p>\n\n\n\n<p>Mo\u017cesz u\u017cywa\u0107 atrybut\u00f3w src na r\u00f3\u017cne sposoby, w zale\u017cno\u015bci od tego, gdzie przechowujesz obrazy:<\/p>\n\n\n\n<p>1. <strong>\u015acie\u017cka wzgl\u0119dna<\/strong> \u2013 odnosi si\u0119 do lokalizacji pliku wzgl\u0119dem dokumentu HTML.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"images\/produkt.jpg\" alt=\"Zdj\u0119cie produktu\"><\/code><\/pre>\n\n\n\n<p>Tutaj nazwa pliku obrazka jest poprzedzona katalogiem <code>images\/<\/code>, co pozwala na uporz\u0105dkowanie grafik na serwerze.<\/p>\n\n\n\n<p>2. <strong>\u015acie\u017cka absolutna<\/strong> \u2013 zawiera pe\u0142ny adres URL prowadz\u0105cy do pliku.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"https:\/\/example.com\/media\/produkt.jpg\" alt=\"Produkt online\"><\/code><\/pre>\n\n\n\n<p>To rozwi\u0105zanie sprawdza si\u0119 wtedy, gdy chcesz wstawi\u0107 obrazek HTML hostowany w innym miejscu ni\u017c Twoja strona.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wlasciwe_uzycie_atrybutu_src\"><\/span>W\u0142a\u015bciwe u\u017cycie atrybutu <code>src<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Bardzo wa\u017cne jest, aby pami\u0119ta\u0107 o poprawnym zapisie \u015bcie\u017cki.<strong> Ka\u017cdy b\u0142\u0105d w nazwie folderu czy liter\u00f3wka w nazwie pliku obrazka spowoduje, \u017ce grafika nie zostanie za\u0142adowana, a u\u017cytkownik zobaczy jedynie pusty obszar lub ikon\u0119 b\u0142\u0119du.<\/strong> Dlatego przed publikacj\u0105 strony warto zawsze przetestowa\u0107, czy wszystkie grafiki wy\u015bwietlaj\u0105 si\u0119 poprawnie.<\/p>\n\n\n\n<p>Dobr\u0105 praktyk\u0105 jest te\u017c dodanie atrybutu <code>alt<\/code>, dzi\u0119ki kt\u00f3remu, nawet gdy obraz nie zostanie pobrany, przegl\u0105darka wy\u015bwietli tekst alternatywny. W kontek\u015bcie SEO poprawne u\u017cywanie atrybut\u00f3w src wraz z <code>alt<\/code> i dobrze opisanymi nazwami plik\u00f3w pozwala zwi\u0119kszy\u0107 widoczno\u015b\u0107 strony w wynikach wyszukiwania grafik Google.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_src_a_ladowanie_obrazow\"><\/span>Atrybut <code>src<\/code> a \u0142adowanie obraz\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kolejn\u0105 kwesti\u0105 jest szybko\u015b\u0107 \u0142adowania obraz\u00f3w. Je\u015bli do <code>src<\/code> odwo\u0142ujesz si\u0119 do plik\u00f3w o du\u017cym rozmiarze, strona mo\u017ce dzia\u0142a\u0107 wolniej. <strong>Dlatego warto dba\u0107 o optymalny rozmiar obrazka i stosowa\u0107 nowoczesne formaty plik\u00f3w, takie jak WebP czy AVIF, kt\u00f3re zachowuj\u0105 wysok\u0105 jako\u015b\u0107 przy mniejszej wadze.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-9-16 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"WebP \u2013 format przysz\u0142o\u015bci, kt\u00f3ry powiniene\u015b zna\u0107\" width=\"563\" height=\"1000\" data-src=\"https:\/\/www.youtube.com\/embed\/p7DmoHZcJxw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Dzi\u0119ki odpowiedniemu zarz\u0105dzaniu atrybutem <code>img src<\/code> mo\u017cesz:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>precyzyjnie wskazywa\u0107 \u017ar\u00f3d\u0142o obraz\u00f3w,<\/li>\n\n\n\n<li>kontrolowa\u0107, jak szybko b\u0119d\u0105 si\u0119 wczytywa\u0107,<\/li>\n\n\n\n<li>poprawia\u0107 SEO strony poprzez przemy\u015blan\u0105 nazw\u0119 pliku obrazka i opis w <code>alt<\/code>.<\/li>\n<\/ul>\n\n\n\n<p>Dokumentacja <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/tag_img.asp?utm_source=chatgpt.com\">W3schools<\/a> szczeg\u00f3\u0142owo wyja\u015bnia, jak poprawnie wstawi\u0107 obrazek HTML i jakie dodatkowe mo\u017cliwo\u015bci daje atrybut <code>src<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wstawianie_obrazkow_a_wydajnosc_strony\"><\/span>Wstawianie obrazk\u00f3w a wydajno\u015b\u0107 strony<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dodanie grafiki na stron\u0119 to dopiero pierwszy krok. Prawdziwe wyzwanie zaczyna si\u0119 w momencie, gdy my\u015blimy o wydajno\u015bci i szybko\u015bci \u0142adowania obraz\u00f3w. Ka\u017cde zdj\u0119cie, kt\u00f3re umieszczasz za pomoc\u0105 znacznika <code>img<\/code> i atrybutu img src, musi zosta\u0107 pobrane z serwera i wy\u015bwietlone w przegl\u0105darce. Je\u015bli pliki s\u0105 zbyt du\u017ce albo \u017ale opisane, mog\u0105 spowodowa\u0107 spowolnienie dzia\u0142ania strony, a to negatywnie wp\u0142ynie zar\u00f3wno na u\u017cytkownik\u00f3w, jak i na pozycj\u0119 w Google.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dlaczego_optymalizacja_obrazow_jest_tak_wazna\"><\/span>Dlaczego optymalizacja obraz\u00f3w jest tak wa\u017cna?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Badania pokazuj\u0105, \u017ce a\u017c <strong>53% u\u017cytkownik\u00f3w rezygnuje z odwiedzania strony, je\u015bli jej \u0142adowanie trwa d\u0142u\u017cej ni\u017c 3 sekundy**<\/strong>. A jednym z najcz\u0119stszych powod\u00f3w wolnego dzia\u0142ania witryn jest w\u0142a\u015bnie nieoptymalne \u0142adowanie obraz\u00f3w. Je\u017celi chcesz skutecznie wstawi\u0107 obrazek HTML i nie zaszkodzi\u0107 swojej stronie, musisz zadba\u0107 o kilka aspekt\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jak_zoptymalizowac_rozmiar_obrazka\"><\/span>Jak zoptymalizowa\u0107 rozmiar obrazka?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zmniejsz wymiary grafiki<\/strong> \u2013 nie umieszczaj zdj\u0119cia w pe\u0142nej rozdzielczo\u015bci, je\u015bli w kodzie HTML i tak ustawiasz mniejsze wymiary za pomoc\u0105 <code>width<\/code> i <code>height<\/code>.<\/li>\n\n\n\n<li><strong>Kompresuj pliki<\/strong> \u2013 narz\u0119dzia takie jak TinyPNG czy Squoosh pozwalaj\u0105 zredukowa\u0107 wag\u0119 plik\u00f3w nawet o 70% bez zauwa\u017calnej utraty jako\u015bci.<\/li>\n\n\n\n<li><strong>U\u017cywaj nowoczesnych format\u00f3w<\/strong> \u2013 zamiast klasycznych JPG i PNG, wybieraj WebP lub AVIF, kt\u00f3re gwarantuj\u0105 mniejszy rozmiar pliku i szybsze \u0142adowanie obraz\u00f3w.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad: zamiast umieszcza\u0107 zdj\u0119cie o wadze 2 MB, mo\u017cesz je zoptymalizowa\u0107 do 200 KB \u2013 r\u00f3\u017cnica w pr\u0119dko\u015bci dzia\u0142ania strony b\u0119dzie ogromna.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lazy_loading_%E2%80%93_oszczednosc_zasobow\"><\/span>Lazy loading \u2013 oszcz\u0119dno\u015b\u0107 zasob\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kolejn\u0105 technik\u0105, kt\u00f3ra sprawia, \u017ce wstawienie obrazka HTML nie obci\u0105\u017ca strony, jest lazy loading. Dzi\u0119ki atrybutowi <code>loading=\"lazy\"<\/code> obrazek \u0142aduje si\u0119 dopiero wtedy, gdy u\u017cytkownik przewija stron\u0119 i faktycznie dochodzi do miejsca, gdzie grafika si\u0119 znajduje.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"baner.jpg\" alt=\"Baner promocyjny\" loading=\"lazy\"><\/code><\/pre>\n\n\n\n<p>To rozwi\u0105zanie szczeg\u00f3lnie przydatne na stronach e-commerce i blogach, gdzie wyst\u0119puje du\u017ca liczba grafik. Dzi\u0119ki temu przegl\u0105darka nie pobiera wszystkich plik\u00f3w od razu, co znacz\u0105co przyspiesza czas wczytywania.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Znaczenie_nazwy_pliku_obrazka_dla_SEO\"><\/span>Znaczenie nazwy pliku obrazka dla SEO<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kiedy m\u00f3wimy o wydajno\u015bci i pozycjonowaniu, nie mo\u017cemy pomin\u0105\u0107 aspektu, jakim jest nazwa pliku obrazka. Plik <code>zdj123.jpg<\/code> nie m\u00f3wi nic wyszukiwarce, podczas gdy <code>buty-sportowe-adidas.jpg<\/code> daje jasny sygna\u0142, co znajduje si\u0119 na zdj\u0119ciu. Po\u0142\u0105czenie poprawnie nadanej nazwy pliku, atrybutu src i alternatywnego tekstu <code>alt<\/code> znacz\u0105co zwi\u0119ksza szanse, \u017ce grafika pojawi si\u0119 w wynikach wyszukiwania Google Grafika.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Najlepsze_praktyki_dotyczace_wydajnosci\"><\/span>Najlepsze praktyki dotycz\u0105ce wydajno\u015bci<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Podsumowuj\u0105c, <strong>aby wstawi\u0107 zdj\u0119cie HTML w spos\u00f3b przyjazny dla u\u017cytkownika i wyszukiwarek, warto pami\u0119ta\u0107 o kilku prostych zasadach.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kompresuj grafiki przed umieszczeniem ich na stronie.<\/li>\n\n\n\n<li>Dostosuj rozmiar obrazka do faktycznych potrzeb.<\/li>\n\n\n\n<li>Korzystaj z <code>loading=\"lazy\"<\/code> dla oszcz\u0119dno\u015bci transferu.<\/li>\n\n\n\n<li>Zadbaj o czyteln\u0105 i opisow\u0105 nazw\u0119 pliku obrazka.<\/li>\n\n\n\n<li>Pami\u0119taj, aby zawsze u\u017cywa\u0107 atrybut\u00f3w src poprawnie i bez b\u0142\u0119d\u00f3w w \u015bcie\u017cce.<\/li>\n<\/ul>\n\n\n\n<p>Jak widzisz, samo wstawienie obrazka HTML to dopiero pocz\u0105tek \u2013 prawdziwa warto\u015b\u0107 pojawia si\u0119 wtedy, gdy grafika jest odpowiednio zoptymalizowana pod k\u0105tem wydajno\u015bci i SEO.<\/p>\n\n\n\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-71ba370a-ce42-4813-83d4-7e1e98e966fe\"><span class=\"hs-cta-node hs-cta-71ba370a-ce42-4813-83d4-7e1e98e966fe\" id=\"hs-cta-71ba370a-ce42-4813-83d4-7e1e98e966fe\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/71ba370a-ce42-4813-83d4-7e1e98e966fe\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-71ba370a-ce42-4813-83d4-7e1e98e966fe\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/71ba370a-ce42-4813-83d4-7e1e98e966fe.png\"  alt=\"Zr\u00f3b audyt SEO\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '71ba370a-ce42-4813-83d4-7e1e98e966fe', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybuty_ktore_warto_znac\"><\/span>Atrybuty, kt\u00f3re warto zna\u0107<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Samo u\u017cycie znacznika <code>img<\/code> pozwala szybko wstawi\u0107 zdj\u0119cie HTML, ale pe\u0142ni\u0119 mo\u017cliwo\u015bci zyskujemy dopiero wtedy, gdy zaczniemy \u015bwiadomie u\u017cywa\u0107 atrybut\u00f3w src i innych parametr\u00f3w. Dzi\u0119ki nim mo\u017cesz kontrolowa\u0107 wygl\u0105d, zachowanie i dost\u0119pno\u015b\u0107 grafik na stronie. Oto lista najwa\u017cniejszych atrybut\u00f3w wraz z praktycznym om\u00f3wieniem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_src_%E2%80%93_podstawa_osadzania_obrazow\"><\/span>Atrybut <code>src<\/code> \u2013 podstawa osadzania obraz\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To absolutna podstawa. <strong>Atrybut <\/strong><code>img src<\/code><strong> wskazuje przegl\u0105darce lokalizacj\u0119 pliku graficznego.<\/strong> Mo\u017ce to by\u0107 zar\u00f3wno \u015bcie\u017cka wzgl\u0119dna (<code>images\/foto.jpg<\/code>), jak i pe\u0142ny adres URL (<code>https:\/\/example.com\/foto.jpg<\/code>).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Poprawna nazwa pliku obrazka jest bardzo wa\u017cna \u2013 b\u0142\u0119dny zapis spowoduje, \u017ce grafika si\u0119 nie za\u0142aduje.<\/li>\n\n\n\n<li>Zawsze sprawdzaj poprawno\u015b\u0107 \u015bcie\u017cek, aby unikn\u0105\u0107 pustych p\u00f3l zamiast zdj\u0119\u0107.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"galeria\/kwiaty.jpg\" alt=\"Kolorowe kwiaty w ogrodzie\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_alt_%E2%80%93_alternatywny_opis\"><\/span>Atrybut <code>alt<\/code> \u2013 alternatywny opis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Cho\u0107 nie jest wymagany, w praktyce to jeden z najwa\u017cniejszych atrybut\u00f3w. Tekst alternatywny <code>alt<\/code> wy\u015bwietla si\u0119, gdy grafika nie mo\u017ce zosta\u0107 za\u0142adowana.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pomaga w dost\u0119pno\u015bci dla os\u00f3b niewidomych, korzystaj\u0105cych z czytnik\u00f3w ekranu.<\/li>\n\n\n\n<li>Wspiera SEO \u2013 wyszukiwarki analizuj\u0105 zawarto\u015b\u0107 atrybutu <code>alt<\/code>, aby lepiej zrozumie\u0107 tre\u015b\u0107 grafiki.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"buty-nike.jpg\" alt=\"Czarne buty sportowe Nike Air Max\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybuty_width_i_height_%E2%80%93_kontrola_rozmiaru_obrazka\"><\/span>Atrybuty <code>width<\/code> i <code>height<\/code> \u2013 kontrola rozmiaru obrazka<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dzi\u0119ki nim mo\u017cesz zdefiniowa\u0107, jak du\u017cy ma by\u0107 obraz na stronie. Parametry te przyjmuj\u0105 warto\u015bci w pikselach.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Skracaj\u0105 czas \u0142adowania obraz\u00f3w, bo przegl\u0105darka od razu wie, jak zarezerwowa\u0107 miejsce w uk\u0142adzie strony.<\/li>\n\n\n\n<li>Nie zast\u0119puj\u0105 kompresji \u2013 zawsze warto zoptymalizowa\u0107 realny rozmiar obrazka przed jego osadzeniem.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"logo.png\" alt=\"Logo firmy\" width=\"250\" height=\"80\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_title_%E2%80%93_podpowiedz_dla_uzytkownika\"><\/span>Atrybut <code>title<\/code> \u2013 podpowied\u017a dla u\u017cytkownika<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dodaj\u0105c <code>title<\/code>, zapewniasz dodatkow\u0105 informacj\u0119 wy\u015bwietlan\u0105 w formie dymka po najechaniu kursorem na obrazek.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u015awietnie sprawdza si\u0119 w przypadku ikon, przycisk\u00f3w czy logotyp\u00f3w.<\/li>\n\n\n\n<li>Nie nale\u017cy przesadza\u0107 z d\u0142ugo\u015bci\u0105 opisu \u2013 powinien by\u0107 kr\u00f3tki i rzeczowy.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"info.png\" alt=\"Ikona informacji\" title=\"Kliknij, aby dowiedzie\u0107 si\u0119 wi\u0119cej\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_loading_%E2%80%93_sterowanie_sposobem_ladowania_obrazow\"><\/span>Atrybut <code>loading<\/code> \u2013 sterowanie sposobem \u0142adowania obraz\u00f3w<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Nowoczesne przegl\u0105darki wspieraj\u0105 atrybut <code>loading<\/code>, kt\u00f3ry decyduje o tym, jak szybko obraz zostanie pobrany.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>loading=\"eager\"<\/code> \u2013 grafika \u0142aduje si\u0119 natychmiast.<\/li>\n\n\n\n<li><code>loading=\"lazy\"<\/code> \u2013 obraz \u0142aduje si\u0119 dopiero, gdy u\u017cytkownik zbli\u017cy si\u0119 do niego podczas przewijania strony.<\/li>\n<\/ul>\n\n\n\n<p>Ta druga opcja to must-have na stronach, gdzie chcesz wstawi\u0107 zdj\u0119cie HTML w du\u017cych ilo\u015bciach, np. w galeriach.<\/p>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"baner.jpg\" alt=\"Baner reklamowy\" loading=\"lazy\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Atrybut_srcset_%E2%80%93_grafika_responsywna\"><\/span>Atrybut <code>srcset<\/code> \u2013 grafika responsywna<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Je\u015bli chcesz, aby obrazki dobrze wygl\u0105da\u0142y na r\u00f3\u017cnych urz\u0105dzeniach, u\u017cyj <code>srcset<\/code>. Dzi\u0119ki niemu mo\u017cesz okre\u015bli\u0107 r\u00f3\u017cne pliki dla ekran\u00f3w o r\u00f3\u017cnej rozdzielczo\u015bci.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To \u015bwietne rozwi\u0105zanie w erze mobile-first.<\/li>\n\n\n\n<li>Zwi\u0119ksza komfort u\u017cytkownika i skraca czas \u0142adowania obraz\u00f3w.<\/li>\n<\/ul>\n\n\n\n<p>Przyk\u0142ad:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"zdjecie-800.jpg\" \n     srcset=\"zdjecie-400.jpg 400w, zdjecie-1200.jpg 1200w\" \n     alt=\"Panorama miasta\"><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jak_madrze_uzywac_atrybutow\"><\/span>Jak m\u0105drze u\u017cywa\u0107 atrybut\u00f3w?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Podsumowuj\u0105c, <strong>je\u015bli chcesz nie tylko wstawi\u0107 obrazek HTML, ale zrobi\u0107 to profesjonalnie, powiniene\u015b:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>zawsze dodawa\u0107 atrybut src i upewnia\u0107 si\u0119, \u017ce wskazuje poprawn\u0105 nazw\u0119 pliku obrazka,<\/li>\n\n\n\n<li>stosowa\u0107 <code>alt<\/code> dla SEO i dost\u0119pno\u015bci,<\/li>\n\n\n\n<li>kontrolowa\u0107 rozmiar obrazka za pomoc\u0105 <code>width<\/code> i <code>height<\/code>,<\/li>\n\n\n\n<li>korzysta\u0107 z <code>loading=\"lazy\"<\/code> przy du\u017cych kolekcjach zdj\u0119\u0107,<\/li>\n\n\n\n<li>wdra\u017ca\u0107 <code>srcset<\/code>, aby grafika by\u0142a responsywna.<\/li>\n<\/ul>\n\n\n\n<p>Dzi\u0119ki temu Twoja strona b\u0119dzie dzia\u0142a\u0142a szybciej, poprawi si\u0119 jej pozycja w wyszukiwarce, a u\u017cytkownicy otrzymaj\u0105 wygodne i atrakcyjne do\u015bwiadczenie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Praktyczne_przyklady_jak_wstawic_obrazek_HTML\"><\/span>Praktyczne przyk\u0142ady: jak wstawi\u0107 obrazek HTML?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Obraz_lokalny_z_poprawnym_alt_i_okreslonym_rozmiarem\"><\/span>Obraz lokalny z poprawnym alt i okre\u015blonym rozmiarem<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Najprostszy spos\u00f3b, by wstawi\u0107 obrazek HTML z katalogu projektu. Tu \u015bwiadomie ustawiamy rozmiar obrazka oraz opis alternatywny.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"images\/produkt.jpg\"\n     alt=\"Czerwone s\u0142uchawki bezprzewodowe z etui\"\n     width=\"600\" height=\"400\"><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kluczowy atrybut src wskazuje \u015bcie\u017ck\u0119 wzgl\u0119dn\u0105.<\/li>\n\n\n\n<li>Prawid\u0142owa nazwa pliku obrazka (<code>produkt.jpg<\/code>) i wymiary pomagaj\u0105 w stabilnym uk\u0142adzie strony oraz szybszym \u0142adowaniu obraz\u00f3w.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wstawienie_zdjecia_HTML_z_zewnetrznego_CDN\"><\/span>Wstawienie zdj\u0119cia HTML z zewn\u0119trznego CDN<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gdy plik hostujesz poza serwisem, atrybut img src przyjmuje pe\u0142ny URL.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"https:\/\/cdn.example.com\/media\/baner-summer.webp\"\n     alt=\"Baner kampanii Summer Sale 2025\"><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zewn\u0119trzne zasoby cz\u0119sto poprawiaj\u0105 \u0142adowanie obraz\u00f3w dzi\u0119ki cache\u2019owi CDN.<\/li>\n\n\n\n<li>Zwr\u00f3\u0107 uwag\u0119 na format WebP \u2013 zwykle mniejszy rozmiar obrazka przy tej samej jako\u015bci.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Obrazek_jako_link_klikalne_logo_miniatura\"><\/span>Obrazek jako link (klikalne logo \/ miniatura)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Cz\u0119sty wzorzec w nawigacji i listach produkt\u00f3w \u2014 najpierw wstawiamy obrazek, potem opakowujemy go linkiem.<\/p>\n\n\n\n<pre><code><&#8203;a href=\"\/oferta\/\">\n  <&#8203;img src=\"\/assets\/logo.png\"\n       alt=\"Logo marki AudioPro \u2014 przejd\u017a do oferty\"\n       width=\"180\" height=\"48\">\n<&#8203;\/a><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Po\u0142\u0105czenie <code>a<\/code> + <code>img<\/code> poprawia UX i CTR.<\/li>\n\n\n\n<li>Warto u\u017cywa\u0107 atrybut\u00f3w src z przemy\u015blan\u0105 \u015bcie\u017ck\u0105 i zwi\u0119z\u0142ym opisem.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lazy_loading_szybkie_ladowanie_dlugich_stron\"><\/span>Lazy loading: szybkie \u0142adowanie d\u0142ugich stron<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Atrybut <code>loading=\"lazy\"<\/code> op\u00f3\u017ania pobranie pliku do momentu, a\u017c u\u017cytkownik zbli\u017cy si\u0119 do grafiki w viewport.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"\/img\/galeria\/smartwatch-01.jpg\"\n     alt=\"Smartwatch z bia\u0142ym paskiem na nadgarstku\"\n     loading=\"lazy\" width=\"800\" height=\"533\">\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Znakomicie przyspiesza \u0142adowanie obraz\u00f3w w d\u0142ugich wpisach blogowych i na listingach.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Responsywne_obrazki_srcset_sizes\"><\/span>Responsywne obrazki: <code>srcset<\/code> + <code>sizes<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dopasowanie pliku do szeroko\u015bci ekranu \u2014 absolutna podstawa, gdy chcesz wstawi\u0107 zdj\u0119cie HTML dzia\u0142aj\u0105ce dobrze na mobile i desktop.<\/p>\n\n\n\n<pre><code><&#8203;img \n  src=\"\/img\/desk-800.jpg\" \n  srcset=\"\/img\/desk-400.jpg 400w, \/img\/desk-800.jpg 800w, \/img\/desk-1600.jpg 1600w\"\n  sizes=\"(max-width: 600px) 100vw, 600px\"\n  alt=\"Minimalistyczne biurko z laptopem i ro\u015blin\u0105\"\n  width=\"800\" height=\"533\">\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Przegl\u0105darka sama wybiera wariant, kt\u00f3ry ma najmniejszy rozmiar obrazka, a nadal wygl\u0105da ostro.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Art_direction_picture_z_WebP_JPG_fallback\"><\/span>Art direction: <code>picture<\/code> z WebP + JPG fallback<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Kiedy potrzebujesz r\u00f3\u017cnych kadr\u00f3w\/formatu dla mobile vs. desktop, u\u017cyj <code>picture<\/code>. To nadal \u201enormalne\u201d wstawienie obrazka HTML, ale z wi\u0119ksz\u0105 kontrol\u0105.<\/p>\n\n\n\n<pre><code><&#8203;picture>\n  <&#8203;source type=\"image\/avif\" srcset=\"\/img\/hero-1200.avif 1200w, \/img\/hero-1800.avif 1800w\">\n  <&#8203;source type=\"image\/webp\" srcset=\"\/img\/hero-1200.webp 1200w, \/img\/hero-1800.webp 1800w\">\n  <&#8203;img src=\"\/img\/hero-1800.jpg\"\n       alt=\"Panoramiczne zdj\u0119cie miasta o zachodzie s\u0142o\u0144ca\"\n       width=\"1800\" height=\"900\" loading=\"lazy\">\n<&#8203;\/picture><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>img src pozostaje ostatni\u0105 lini\u0105 obrony (fallback).<\/li>\n\n\n\n<li>Oszcz\u0119dzasz transfer i skracasz \u0142adowanie obraz\u00f3w na wolnych \u0142\u0105czach.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Obrazek_z_podpisem_figure_figcaption\"><\/span>Obrazek z podpisem: <code>figure<\/code> + <code>figcaption<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Semantyczna para, gdy chcesz doda\u0107 podpis (np. \u017ar\u00f3d\u0142o, autor, opis szczeg\u00f3\u0142owy).<\/p>\n\n\n\n<pre><code><&#8203;figure>\n  <&#8203;img src=\"\/media\/wykres-sprzedazy-2025.png\"\n       alt=\"Wykres wzrostu sprzeda\u017cy kwartalnej 2024\u20132025\"\n       width=\"960\" height=\"540\">\n  <&#8203;figcaption>Rys. 1. Sprzeda\u017c Q1\u2013Q2 2025. Dane: dzia\u0142 analityki.<\/figcaption>\n<&#8203;\/figure>\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lepsza dost\u0119pno\u015b\u0107 i czytelno\u015b\u0107 tre\u015bci ni\u017c \u201esurowe\u201d wstawienie obrazka bez podpisu.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Miniatury_listingu_kontrola_wymiarow_i_kompromis_jakosci\"><\/span>Miniatury listingu: kontrola wymiar\u00f3w i kompromis jako\u015bci<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gdy masz 100+ obrazk\u00f3w na li\u015bcie, liczy si\u0119 ka\u017cdy kilobajt i przewidywalny rozmiar obrazka.<\/p>\n\n\n\n<pre><code><&#8203;li class=\"product\">\n  <&#8203;a href=\"\/p\/sluchawki-x1\/\">\n    <&#8203;img src=\"\/thumbs\/sluchawki-x1-320.webp\"\n         alt=\"S\u0142uchawki X1 czarne \u2014 miniatura produktu\"\n         width=\"320\" height=\"320\" loading=\"lazy\" decoding=\"async\">\n  <&#8203;\/a>\n<&#8203;\/li>\n\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>decoding=\"async\"<\/code> mo\u017ce dodatkowo wyg\u0142adzi\u0107 odczuwalne \u0142adowanie obraz\u00f3w.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"SVG_inline_ikony_vs_bitmapy_zdjecia\"><\/span>SVG inline (ikony) vs. bitmapy (zdj\u0119cia)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>SVG warto osadza\u0107 inline, gdy potrzebujesz idealnie ostrej ikony i \u0142atwych modyfikacji CSS. Bitmap\u0119 wstawiamy obrazkiem przez atrybut img src.<\/p>\n\n\n\n<pre><code><&#8203;!-- Ikona SVG inline -->\n<&#8203;svg viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Ikona koszyka\">\n  <&#8203;path d=\"M3 6h18l-2 12H5z\"\/>\n<&#8203;\/svg>\n\n<&#8203;!-- Zdj\u0119cie produktowe (bitmapa) -->\n<&#8203;img src=\"\/img\/produkty\/koszyk.jpg\" alt=\"Koszyk na zakupy z produktami\">\n\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dwa r\u00f3\u017cne narz\u0119dzia do dw\u00f3ch r\u00f3\u017cnych zada\u0144.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dane_osadzone_Data_URI_%E2%80%94_mikro-grafiki_i_placeholdery\"><\/span>Dane osadzone (Data URI) \u2014 mikro-grafiki i placeholdery<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dla bardzo ma\u0142ych obrazk\u00f3w (np. 1\u00d71 px placeholder) mo\u017cesz wstawi\u0107 zdj\u0119cie HTML wprost w atrybucie:<\/p>\n\n\n\n<pre><code><&#8203;img src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACw=\" alt=\"\" width=\"1\" height=\"1\">\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Unikasz dodatkowego requestu, ale pami\u0119taj, by rozs\u0105dnie tego u\u017cywa\u0107.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Bledy_i_fallback_jak_nie_zaskoczyc_uzytkownika\"><\/span>B\u0142\u0119dy i fallback: jak nie zaskoczy\u0107 u\u017cytkownika<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dodaj CSS na wypadek nieudanego wczytania i waliduj nazw\u0119 pliku obrazka.<\/p>\n\n\n\n<pre><code><&#8203;img src=\"\/img\/nie-istnieje.jpg\" alt=\"Zdj\u0119cie niedost\u0119pne\" class=\"safe-img\">\n<&#8203;style>\n  .safe-img { background:#f3f4f6; display:inline-block; }\n<&#8203;\/style>\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Je\u015bli atrybut src wskazuje z\u0142\u0105 \u015bcie\u017ck\u0119, u\u017cytkownik i tak zobaczy czyteln\u0105, estetyczn\u0105 \u201eramk\u0119\u201d.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Checklista_jakosci_co_sprawdzic_przed_publikacja\"><\/span>Checklista jako\u015bci: co sprawdzi\u0107 przed publikacj\u0105?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Kr\u00f3tka lista, kt\u00f3ra pomo\u017ce konsekwentnie wstawi\u0107 zdj\u0119cie HTML w najwy\u017cszym standardzie:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Czy img src wskazuje w\u0142a\u015bciw\u0105 \u015bcie\u017ck\u0119 i poprawn\u0105 nazw\u0119 pliku obrazka?<\/li>\n\n\n\n<li>Czy plik ma zoptymalizowany rozmiar obrazka (kompresja, wymiary)?<\/li>\n\n\n\n<li>Czy tekst <code>alt<\/code> jest zwi\u0119z\u0142y, opisowy i zgodny z kontekstem?<\/li>\n\n\n\n<li>Czy u\u017cywasz <code>loading=\"lazy\"<\/code> tam, gdzie to mo\u017cliwe, aby przyspieszy\u0107 \u0142adowanie obraz\u00f3w?<\/li>\n\n\n\n<li>Czy w razie potrzeby stosujesz <code>srcset<\/code>\/<code>sizes<\/code> i <code>picture<\/code>?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Gdzie_doczytac_wiecej\"><\/span>Gdzie doczyta\u0107 wi\u0119cej?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pe\u0142n\u0105 list\u0119 atrybut\u00f3w i przyk\u0142ad\u00f3w znajdziesz w dokumentacji <a target=\"_blank\" rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/tag_img.asp?utm_source=chatgpt.com\">W3schools<\/a>. To dobre miejsce, \u017ceby szybko od\u015bwie\u017cy\u0107 sk\u0142adni\u0119 atrybutu img src i sprawdzi\u0107, jak jeszcze mo\u017cna u\u017cywa\u0107 atrybut\u00f3w src w codziennej pracy.<\/p>\n\n\n\n<p>\u0179r\u00f3d\u0142a:<br>*<a href=\"https:\/\/datareportal.com\/reports\/digital-2023-global-overview-report\" target=\"_blank\" rel=\"noreferrer noopener\">Digital 2023 Global Overview Report<\/a><\/p>\n\n\n\n<p>**<a href=\"https:\/\/siteqwality.com\/blog\/psychology-page-load-times-2025\/\">SiteQwality Blog<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQ_%E2%80%93_Pytania_i_odpowiedzi\"><\/span>FAQ &#8211; Pytania i odpowiedzi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div itemscope itemtype=\"https:\/\/schema.org\/FAQPage\">\n  <div itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\"><span class=\"ez-toc-section\" id=\"Czym_jest_atrybut_alt_i_dlaczego_jest_wazny\"><\/span>Czym jest atrybut alt i dlaczego jest wa\u017cny?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n    <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n      <p itemprop=\"text\">Atrybut alt to opis alternatywny obrazu w HTML. U\u0142atwia zrozumienie zawarto\u015bci grafiki osobom korzystaj\u0105cym z czytnik\u00f3w ekranowych, a gdy obraz si\u0119 nie wy\u015bwietli \u2013 pokazuje tekst. Jest te\u017c istotnym elementem SEO, bo pomaga Google zrozumie\u0107 kontekst strony i wp\u0142ywa na widoczno\u015b\u0107 w wyszukiwarce grafiki. \n<\/p>\n    <\/div>\n  <\/div>\n\n  <div itemprop=\"mainEntity\" itemscope itemtype=\"https:\/\/schema.org\/Question\">\n    <h3 itemprop=\"name\"><span class=\"ez-toc-section\" id=\"Jak_optymalizowac_obrazy_pod_katem_SEO\"><\/span>Jak optymalizowa\u0107 obrazy pod k\u0105tem SEO? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n    <div itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n      <p itemprop=\"text\">Stosuj opisowe nazwy plik\u00f3w, uzupe\u0142niaj atrybut alt s\u0142owami kluczowymi w naturalny spos\u00f3b, wybieraj odpowiednie formaty (np. WebP), kompresuj pliki, aby przyspieszy\u0107 \u0142adowanie strony, i korzystaj z responsywnych grafik dopasowanych do urz\u0105dze\u0144 mobilnych.<\/p><div class=\"udmgo69f48c54a84f0\" ><!-- Komunikacja z klientem -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-8265bd58-ea47-4c6a-9f25-dd290dd6f8c8\"><span class=\"hs-cta-node hs-cta-8265bd58-ea47-4c6a-9f25-dd290dd6f8c8\" id=\"hs-cta-8265bd58-ea47-4c6a-9f25-dd290dd6f8c8\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/8265bd58-ea47-4c6a-9f25-dd290dd6f8c8\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-8265bd58-ea47-4c6a-9f25-dd290dd6f8c8\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/8265bd58-ea47-4c6a-9f25-dd290dd6f8c8.png\"  alt=\"Nowe wezwanie do dzia\u0142ania\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '8265bd58-ea47-4c6a-9f25-dd290dd6f8c8', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.udmgo69f48c54a84f0 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.udmgo69f48c54a84f0 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.udmgo69f48c54a84f0 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.udmgo69f48c54a84f0 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.udmgo69f48c54a84f0 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"grxxz69f48c54a848e\" ><!-- Email Marketing -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-08eb5d7e-b5b4-457b-9ce5-ceff89d6b956\"><span class=\"hs-cta-node hs-cta-08eb5d7e-b5b4-457b-9ce5-ceff89d6b956\" id=\"hs-cta-08eb5d7e-b5b4-457b-9ce5-ceff89d6b956\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/08eb5d7e-b5b4-457b-9ce5-ceff89d6b956\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-08eb5d7e-b5b4-457b-9ce5-ceff89d6b956\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/08eb5d7e-b5b4-457b-9ce5-ceff89d6b956.png\"  alt=\"Nowe wezwanie do dzia\u0142ania\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '08eb5d7e-b5b4-457b-9ce5-ceff89d6b956', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.grxxz69f48c54a848e {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.grxxz69f48c54a848e {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.grxxz69f48c54a848e {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.grxxz69f48c54a848e {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.grxxz69f48c54a848e {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"bkoej69f48c54a8438\" ><!-- Zarz\u0105dzanie firm\u0105 -->\n\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d\"><span class=\"hs-cta-node hs-cta-64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d\" id=\"hs-cta-64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d.png\"  alt=\"e-book Dlaczego Twoja firma powinna by\u0107 obecna w Internecie\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '64d5a1d6-a25c-4d42-9cf0-0a4f91b5642d', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.bkoej69f48c54a8438 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.bkoej69f48c54a8438 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.bkoej69f48c54a8438 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.bkoej69f48c54a8438 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.bkoej69f48c54a8438 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"ohqqn69f48c54a83d7\" ><!-- Video -->\n\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-d5317067-b35b-4752-8a1e-3ef0d70566f6\"><span class=\"hs-cta-node hs-cta-d5317067-b35b-4752-8a1e-3ef0d70566f6\" id=\"hs-cta-d5317067-b35b-4752-8a1e-3ef0d70566f6\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/d5317067-b35b-4752-8a1e-3ef0d70566f6\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-d5317067-b35b-4752-8a1e-3ef0d70566f6\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/d5317067-b35b-4752-8a1e-3ef0d70566f6.png\"  alt=\"e-book 18 wskaz\u00f3wek, kt\u00f3re rozwin\u0105 Tw\u00f3j kana\u0142 na YouTube\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, 'd5317067-b35b-4752-8a1e-3ef0d70566f6', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.ohqqn69f48c54a83d7 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.ohqqn69f48c54a83d7 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.ohqqn69f48c54a83d7 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.ohqqn69f48c54a83d7 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.ohqqn69f48c54a83d7 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"xbbql69f48c54a8382\" ><!-- Tworzenie stron -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc\"><span class=\"hs-cta-node hs-cta-ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc\" id=\"hs-cta-ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc.png\"  alt=\"Nowe wezwanie do dzia\u0142ania\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, 'ef1529b5-b78c-4b0b-bf0b-4ecc75e0bafc', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.xbbql69f48c54a8382 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.xbbql69f48c54a8382 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.xbbql69f48c54a8382 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.xbbql69f48c54a8382 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.xbbql69f48c54a8382 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"gdeqt69f48c54a832d\" ><!-- Strategia marketingowa -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-9d4aa58d-1ab7-4301-b000-ac3d639abc98\"><span class=\"hs-cta-node hs-cta-9d4aa58d-1ab7-4301-b000-ac3d639abc98\" id=\"hs-cta-9d4aa58d-1ab7-4301-b000-ac3d639abc98\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/9d4aa58d-1ab7-4301-b000-ac3d639abc98\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-9d4aa58d-1ab7-4301-b000-ac3d639abc98\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/9d4aa58d-1ab7-4301-b000-ac3d639abc98.png\"  alt=\"Nowe wezwanie do dzia\u0142ania\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '9d4aa58d-1ab7-4301-b000-ac3d639abc98', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.gdeqt69f48c54a832d {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.gdeqt69f48c54a832d {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.gdeqt69f48c54a832d {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.gdeqt69f48c54a832d {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.gdeqt69f48c54a832d {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"xzrks69f48c54a82c5\" ><!-- Social Media -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-387c3571-1376-4b17-bb02-3ee7c0d54013\"><span class=\"hs-cta-node hs-cta-387c3571-1376-4b17-bb02-3ee7c0d54013\" id=\"hs-cta-387c3571-1376-4b17-bb02-3ee7c0d54013\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/387c3571-1376-4b17-bb02-3ee7c0d54013\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-387c3571-1376-4b17-bb02-3ee7c0d54013\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/387c3571-1376-4b17-bb02-3ee7c0d54013.png\"  alt=\"Nowe wezwanie do dzia\u0142ania\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '387c3571-1376-4b17-bb02-3ee7c0d54013', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.xzrks69f48c54a82c5 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.xzrks69f48c54a82c5 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.xzrks69f48c54a82c5 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.xzrks69f48c54a82c5 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.xzrks69f48c54a82c5 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"zhyve69f48c54a826b\" ><!-- Copywriting -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-0d4fb5f3-b88d-4456-a7be-207e7a27d1d8\"><span class=\"hs-cta-node hs-cta-0d4fb5f3-b88d-4456-a7be-207e7a27d1d8\" id=\"hs-cta-0d4fb5f3-b88d-4456-a7be-207e7a27d1d8\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/0d4fb5f3-b88d-4456-a7be-207e7a27d1d8\" target=\"_blank\" rel=\"noopener, nofollow\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-0d4fb5f3-b88d-4456-a7be-207e7a27d1d8\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/0d4fb5f3-b88d-4456-a7be-207e7a27d1d8.png\"  alt=\"e-book Jak tworzy\u0107 tre\u015bci, kt\u00f3re przyci\u0105gn\u0105 Twoich klient\u00f3w\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '0d4fb5f3-b88d-4456-a7be-207e7a27d1d8', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.zhyve69f48c54a826b {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.zhyve69f48c54a826b {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.zhyve69f48c54a826b {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.zhyve69f48c54a826b {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.zhyve69f48c54a826b {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"izpyr69f48c54a8204\" ><!-- SEO1 -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-2e440e3a-91d6-4b6d-8268-289ea3a8329b\"><span class=\"hs-cta-node hs-cta-2e440e3a-91d6-4b6d-8268-289ea3a8329b\" id=\"hs-cta-2e440e3a-91d6-4b6d-8268-289ea3a8329b\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/2e440e3a-91d6-4b6d-8268-289ea3a8329b\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-2e440e3a-91d6-4b6d-8268-289ea3a8329b\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/2e440e3a-91d6-4b6d-8268-289ea3a8329b.png\"  alt=\"e-book SEO lokalne od A do Z\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, '2e440e3a-91d6-4b6d-8268-289ea3a8329b', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.izpyr69f48c54a8204 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.izpyr69f48c54a8204 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.izpyr69f48c54a8204 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.izpyr69f48c54a8204 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.izpyr69f48c54a8204 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"wpadi69f48c54a81aa\" ><!-- SEM -->\n<!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-f76cfdbf-3591-4dda-828b-092125eedb42\"><span class=\"hs-cta-node hs-cta-f76cfdbf-3591-4dda-828b-092125eedb42\" id=\"hs-cta-f76cfdbf-3591-4dda-828b-092125eedb42\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/f76cfdbf-3591-4dda-828b-092125eedb42\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-f76cfdbf-3591-4dda-828b-092125eedb42\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/f76cfdbf-3591-4dda-828b-092125eedb42.png\"  alt=\"e-book Jak promowa\u0107 firm\u0119 na lokalnym rynku\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, 'f76cfdbf-3591-4dda-828b-092125eedb42', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n<\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.wpadi69f48c54a81aa {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.wpadi69f48c54a81aa {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.wpadi69f48c54a81aa {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.wpadi69f48c54a81aa {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.wpadi69f48c54a81aa {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n<div class=\"bsrqd69f48c54a8138\" ><div style=\"margin: 20px 0px;\">\n                <!--HubSpot Call-to-Action Code --><span class=\"hs-cta-wrapper\" id=\"hs-cta-wrapper-d24c93bc-7b60-4339-bff4-106b7c262800\"><span class=\"hs-cta-node hs-cta-d24c93bc-7b60-4339-bff4-106b7c262800\" id=\"hs-cta-d24c93bc-7b60-4339-bff4-106b7c262800\"><!--[if lte IE 8]><div id=\"hs-cta-ie-element\"><\/div><![endif]--><a href=\"https:\/\/hubspot-cta-redirect-eu1-prod.s3.amazonaws.com\/cta\/redirect\/25646044\/d24c93bc-7b60-4339-bff4-106b7c262800\" target=\"_blank\" rel=\"noopener\"><img class=\"hs-cta-img colorbox-12133 lazyload\" id=\"hs-cta-img-d24c93bc-7b60-4339-bff4-106b7c262800\" style=\"border-width:0px;\" data-src=\"https:\/\/hubspot-no-cache-eu1-prod.s3.amazonaws.com\/cta\/default\/25646044\/d24c93bc-7b60-4339-bff4-106b7c262800.png\"  alt=\"jak za\u0142o\u017cy\u0107 sklep internetowy - pobierz e-booka \" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js-eu1.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(25646044, 'd24c93bc-7b60-4339-bff4-106b7c262800', {\"useNewLoader\":\"true\",\"region\":\"eu1\"}); <\/script><\/span><!-- end HubSpot Call-to-Action Code -->\n            <\/div><\/div><style type=\"text\/css\">\r\n@media screen and (min-width: 1201px) {\r\n.bsrqd69f48c54a8138 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 993px) and (max-width: 1200px) {\r\n.bsrqd69f48c54a8138 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 769px) and (max-width: 992px) {\r\n.bsrqd69f48c54a8138 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (min-width: 768px) and (max-width: 768px) {\r\n.bsrqd69f48c54a8138 {\r\ndisplay: block;\r\n}\r\n}\r\n@media screen and (max-width: 767px) {\r\n.bsrqd69f48c54a8138 {\r\ndisplay: block;\r\n}\r\n}\r\n<\/style>\r\n\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12133&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;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;1&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;1\\\/5 - (1 ocena)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?&quot;,&quot;width&quot;:&quot;24.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} ocena)&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: 5px\">\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: 5px\">\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: 5px\">\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: 5px\">\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: 5px\">\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: 24.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\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            1\/5 - (1 ocena)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Czy wiesz, \u017ce ponad 60% internaut\u00f3w korzysta z wyszukiwania wizualnego i anga\u017cuje si\u0119 w tre\u015bci graficzne?* Obrazy nie tylko przyci\u0105gaj\u0105 uwag\u0119, ale te\u017c poprawiaj\u0105 do\u015bwiadczenie u\u017cytkownika i wspieraj\u0105 pozycjonowanie strony. Jednak, aby w pe\u0142ni wykorzysta\u0107 potencja\u0142 grafik, trzeba wiedzie\u0107, jak poprawnie wstawi\u0107 zdj\u0119cie HTML i jakie zasady obowi\u0105zuj\u0105 podczas dodawania plik\u00f3w graficznych do strony internetowej. [&hellip;]<\/p>\n","protected":false},"author":101041,"featured_media":12138,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-12133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-start"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107? - WeNet<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?\" \/>\n<meta property=\"og:description\" content=\"Czy wiesz, \u017ce ponad 60% internaut\u00f3w korzysta z wyszukiwania wizualnego i anga\u017cuje si\u0119 w tre\u015bci graficzne?* Obrazy nie tylko przyci\u0105gaj\u0105 uwag\u0119, ale te\u017c poprawiaj\u0105 do\u015bwiadczenie u\u017cytkownika i wspieraj\u0105 pozycjonowanie strony. Jednak, aby w pe\u0142ni wykorzysta\u0107 potencja\u0142 grafik, trzeba wiedzie\u0107, jak poprawnie wstawi\u0107 zdj\u0119cie HTML i jakie zasady obowi\u0105zuj\u0105 podczas dodawania plik\u00f3w graficznych do strony internetowej. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/\" \/>\n<meta property=\"og:site_name\" content=\"WeNet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WeNet.Group\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-04T14:21:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T09:00:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joanna Opala\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joanna Opala\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minut\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107? - WeNet","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/","og_locale":"pl_PL","og_type":"article","og_title":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?","og_description":"Czy wiesz, \u017ce ponad 60% internaut\u00f3w korzysta z wyszukiwania wizualnego i anga\u017cuje si\u0119 w tre\u015bci graficzne?* Obrazy nie tylko przyci\u0105gaj\u0105 uwag\u0119, ale te\u017c poprawiaj\u0105 do\u015bwiadczenie u\u017cytkownika i wspieraj\u0105 pozycjonowanie strony. Jednak, aby w pe\u0142ni wykorzysta\u0107 potencja\u0142 grafik, trzeba wiedzie\u0107, jak poprawnie wstawi\u0107 zdj\u0119cie HTML i jakie zasady obowi\u0105zuj\u0105 podczas dodawania plik\u00f3w graficznych do strony internetowej. [&hellip;]","og_url":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/","og_site_name":"WeNet","article_publisher":"https:\/\/www.facebook.com\/WeNet.Group\/","article_published_time":"2025-09-04T14:21:15+00:00","article_modified_time":"2026-04-28T09:00:20+00:00","og_image":[{"width":1080,"height":720,"url":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","type":"image\/jpeg"}],"author":"Joanna Opala","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"Joanna Opala","Szacowany czas czytania":"14 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#article","isPartOf":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/"},"author":{"name":"Joanna Opala","@id":"https:\/\/wenet.pl\/blog\/#\/schema\/person\/dffe60b08e87f8fcded8116e2ef3cae2"},"headline":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?","datePublished":"2025-09-04T14:21:15+00:00","dateModified":"2026-04-28T09:00:20+00:00","mainEntityOfPage":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/"},"wordCount":2548,"commentCount":0,"publisher":{"@id":"https:\/\/wenet.pl\/blog\/#organization"},"image":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#primaryimage"},"thumbnailUrl":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","articleSection":["Blog"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/","url":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/","name":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?","isPartOf":{"@id":"https:\/\/wenet.pl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#primaryimage"},"image":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#primaryimage"},"thumbnailUrl":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","datePublished":"2025-09-04T14:21:15+00:00","dateModified":"2026-04-28T09:00:20+00:00","breadcrumb":{"@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#primaryimage","url":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","contentUrl":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","width":1080,"height":720,"caption":"Jak wstawi\u0107 zdj\u0119cie krok po kroku"},{"@type":"BreadcrumbList","@id":"https:\/\/wenet.pl\/blog\/jak-wstawic-zdjecie-html-i-co-warto-o-tym-wiedziec\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/wenet.pl\/blog\/"},{"@type":"ListItem","position":2,"name":"Jak wstawi\u0107 zdj\u0119cie html i co warto o tym wiedzie\u0107?"}]},{"@type":"WebSite","@id":"https:\/\/wenet.pl\/blog\/#website","url":"https:\/\/wenet.pl\/blog\/","name":"WeNet","description":"","publisher":{"@id":"https:\/\/wenet.pl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wenet.pl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/wenet.pl\/blog\/#organization","name":"WeNet","url":"https:\/\/wenet.pl\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/wenet.pl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2021\/10\/logo-wenet-1.png","contentUrl":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2021\/10\/logo-wenet-1.png","width":234,"height":56,"caption":"WeNet"},"image":{"@id":"https:\/\/wenet.pl\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WeNet.Group\/"]},{"@type":"Person","@id":"https:\/\/wenet.pl\/blog\/#\/schema\/person\/dffe60b08e87f8fcded8116e2ef3cae2","name":"Joanna Opala","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/10\/wenet-blog.png","url":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/10\/wenet-blog.png","contentUrl":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/10\/wenet-blog.png","caption":"Joanna Opala"},"description":"Specjalistka ds. Contentu w WeNet. Do\u015bwiadczenie w pisaniu i redagowaniu tekst\u00f3w zdobywa\u0142a w redakcji portalu internetowego oraz magazynu. Jej zainteresowanie marketingiem internetowym rozpocz\u0119\u0142o si\u0119 podczas pracy w agencji marketingowej, a nast\u0119pnie nabra\u0142o tempa w firmie e-learningowej.","url":"https:\/\/wenet.pl\/blog\/author\/jopala\/"}]}},"jetpack_featured_media_url":"https:\/\/wenet.pl\/blog\/wp-content\/uploads\/2025\/09\/Jak-wstawic-obrazek_blog-WeNet-3.jpg","jetpack_shortlink":"https:\/\/wp.me\/p5muuP-39H","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/posts\/12133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/users\/101041"}],"replies":[{"embeddable":true,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/comments?post=12133"}],"version-history":[{"count":62,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/posts\/12133\/revisions"}],"predecessor-version":[{"id":13930,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/posts\/12133\/revisions\/13930"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/media\/12138"}],"wp:attachment":[{"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/media?parent=12133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/categories?post=12133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wenet.pl\/blog\/wp-json\/wp\/v2\/tags?post=12133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}