{"id":532,"date":"2022-02-11T15:41:51","date_gmt":"2022-02-11T15:41:51","guid":{"rendered":"https:\/\/smultron.software\/optymalizacja-grafiki-na-strone-internetowa\/"},"modified":"2024-06-13T17:02:03","modified_gmt":"2024-06-13T17:02:03","slug":"optymalizacja-grafiki-na-strone-internetowa","status":"publish","type":"post","link":"https:\/\/smultron.software\/pl\/blog\/optymalizacja-grafiki-na-strone-internetowa","title":{"rendered":"Optymalizacja grafiki na stron\u0119 internetow\u0105"},"content":{"rendered":"\n

Zale\u017cy Ci na tym, aby Twoja strona zajmowa\u0142a wysok\u0105 pozycj\u0119 w wynikach wyszukiwania? Chcesz w jak najwi\u0119kszym stopniu wp\u0142yn\u0105\u0107 na pozytywny odbi\u00f3r tre\u015bci, kt\u00f3re na niej si\u0119 znajduj\u0105? Je\u015bli tak, zach\u0119cam Ci\u0119 do zapoznania si\u0119 z tre\u015bci\u0105 artyku\u0142u i tematem optymalizacji zdj\u0119\u0107 i grafik dodawanych do biblioteki medi\u00f3w w WordPressie.<\/p>\n\n\n\n

Umiej\u0119tne wykorzystanie fotografii czy ilustracji na stronie mo\u017ce przynie\u015b\u0107 wiele korzy\u015bci. Opr\u00f3cz oczywistego aspektu wizualnego i urozmaicenia tre\u015bci tekstowych, grafiki daj\u0105 jeszcze jedn\u0105 korzy\u015b\u0107. Mog\u0105 zach\u0119ci\u0107 nowych u\u017cytkownik\u00f3w przegl\u0105daj\u0105cych wyszukiwark\u0119 Google Grafika do zapoznania si\u0119 z nasz\u0105 stron\u0105. <\/p>\n\n\n\n

Autorskie fotografie, zdj\u0119cia wykonane podczas sesji zdj\u0119ciowej czy grafiki tworzone specjalnie dla zilustrowania Twojego artyku\u0142u spotkaj\u0105 si\u0119 prawdopodobnie z lepszym odbiorem ni\u017c fotografie z bank\u00f3w zdj\u0119\u0107 stockowych. A to mi\u0119dzy innymi dlatego, \u017ce nie mamy pe\u0142nej \u015bwiadomo\u015bci ile os\u00f3b i w jakim kontek\u015bcie wykorzysta\u0142o t\u0105 sam\u0105 fotografi\u0119, jak\u0105 pobrali\u015bmy, aby doda\u0107 na swojej stronie. <\/p>\n\n\n\n

Jednak niezale\u017cnie od tego czy kupimy zdj\u0119cie, skorzystamy z darmowej bazy grafik czy wykorzystamy autorskie zdj\u0119cia warto pozna\u0107 metody ich optymalizacji.<\/p>\n\n\n\n

Czym jest optymalizacja grafiki?<\/h2>\n\n\n\n

Zacznijmy od wyja\u015bnienia samego terminu. Szeroko rozumiana optymalizacja s\u0142u\u017cy usprawnieniu procesu, aby uzyska\u0107 mo\u017cliwie najkorzystniejszy wynik. W kontek\u015bcie zdj\u0119\u0107 lub grafik przygotowywanych dla internetu, oznacza mi\u0119dzy innymi zmniejszenie wagi plik\u00f3w bez znacznego wp\u0142ywu na jako\u015b\u0107 zdj\u0119\u0107. Dodawanie ogromnych plik\u00f3w wprost z aparatu lub pe\u0142nowymiarowych fotografii z bank\u00f3w zdj\u0119\u0107 nie s\u0142u\u017cy Twojej stronie. Znacznie j\u0105 przeci\u0105\u017ca i spowalnia.<\/p>\n\n\n\n

Wyobra\u017amy sobie, \u017ce jeste\u015bmy w\u0142a\u015bcicielami sklepu internetowego, w kt\u00f3rym ka\u017cdy produkt jest zilustrowany kilkoma zdj\u0119ciami w pe\u0142nej rozdzielczo\u015bci. Nasza oferta si\u0119 powi\u0119ksza i szybko przybywa produkt\u00f3w, a my dodajemy kolejne zdj\u0119cia produktowe bez uprzedniej optymalizacji. Poszczeg\u00f3lne podstrony d\u0142ugo si\u0119 wczytuj\u0105, a nasz sklep zamiast zach\u0119ca\u0107, zniech\u0119ca u\u017cytkownik\u00f3w przebywaj\u0105cych na stronie. Co r\u00f3wnie\u017c istotne, pr\u0119dko\u015b\u0107 \u0142adowania si\u0119 strony jest jednym z istotniejszych czynnik\u00f3w, kt\u00f3re wp\u0142ywaj\u0105 na pozycj\u0119 w rankingu wyszukiwarki Google.<\/p>\n\n\n\n

Jednak nie na tym ko\u0144czy si\u0119 Twoje zadanie. Opr\u00f3cz odpowiedniego przygotowania plik\u00f3w graficznych, optymalizacj\u0105 nazywamy r\u00f3wnie\u017c szereg dzia\u0142a\u0144, kt\u00f3re nast\u0105pi\u0105 tu\u017c po wgraniu zdj\u0119cia do biblioteki medi\u00f3w w WordPressie. O tym za moment. Zacznijmy od pocz\u0105tku.<\/p>\n\n\n\n

Optymalizacja rozmiaru pliku<\/h2>\n\n\n\n

Niezale\u017cnie od tego czy posiadamy profesjonalny program graficzny do obr\u00f3bki zdj\u0119\u0107 czy korzystamy z darmowych narz\u0119dzi online, w obu przypadkach mo\u017cemy zmniejszy\u0107 wymiary plik\u00f3w. Skalowanie lub kadrowanie s\u0105 prostymi, a zarazem skutecznymi sposobami na zmniejszenie wagi pliku.<\/p>\n\n\n\n

Je\u017celi zastanawiasz si\u0119 jak\u0105 zasad\u0119 przyj\u0105\u0107, warto sprawdzi\u0107 jakie wymiary s\u0105 przewidziane dla zdj\u0119cia, kt\u00f3re docelowo ma si\u0119 wy\u015bwietli\u0107 na stronie. Wystarczy je\u015bli dodamy zdj\u0119cie w wielko\u015bci jaka pojawi si\u0119 na monitorze Full HD.<\/p>\n\n\n\n

Skaluj\u0105c zdj\u0119cia, pami\u0119taj o zachowaniu proporcji orygina\u0142u. Natomiast, je\u015bli zale\u017cy Ci na konkretnym stosunku szeroko\u015bci do wysoko\u015bci zdj\u0119cia lub cz\u0119\u015b\u0107 grafiki nie jest istotna i chcesz pokaza\u0107 tylko jej fragment, zdecyduj si\u0119 na kadrowanie. W obu przypadkach polecam zachowa\u0107 oryginalny plik, aby w razie czego m\u00f3c do niego wr\u00f3ci\u0107.<\/p>\n\n\n\n

Optymalizacja formatu grafiki<\/h2>\n\n\n\n

Nadszed\u0142 czas na wyb\u00f3r formatu. Najcz\u0119\u015bciej spotykanymi plikami graficznymi w internecie s\u0105 pliki w formacie .JPG i .PNG. Opr\u00f3cz nich na stronach r\u00f3wnie\u017c mo\u017cemy spotka\u0107 pliki o rozszerzeniu GIF, SVG i WEBP. <\/p>\n\n\n\n

Jaki format wi\u0119c wybra\u0107?<\/p>\n\n\n\n

JPG<\/strong> idealnie sprawdzi si\u0119 w przypadku zdj\u0119\u0107. <\/p>\n\n\n\n

PNG<\/strong>, podobnie jak JPG, jest formatem plik\u00f3w rastrowych, jednak jego przeznaczeniem s\u0105 wszelkiego rodzaju grafiki cyfrowe, wykresy, zrzuty ekranu lub te\u017c pliki posiadaj\u0105ce transparentno\u015b\u0107. <\/p>\n\n\n\n

Format GIF<\/strong> b\u0119dzie odpowiedni do prezentacji prostych sekwencji obraz\u00f3w. <\/p>\n\n\n\n

Skalowalny plik wektorowy SVG<\/strong> jest znacznie l\u017cejszy od pozosta\u0142ych. Wykorzystuje si\u0119 go do zapisu ikon, logotyp\u00f3w czy ilustracji wektorowych. <\/p>\n\n\n\n

WEBP<\/strong> jest formatem nowej generacji, rozwijanym przez Google. Stanowi konkurencj\u0119 dla dobrze nam znanych format\u00f3w grafiki rastrowej, o kt\u00f3rych wspomnia\u0142am wcze\u015bniej czyli JPG, PNG oraz GIF. Jest wi\u0119c uniwersalny, poniewa\u017c obs\u0142uguje zar\u00f3wno transparentno\u015b\u0107, jak i animacje. G\u0142\u00f3wn\u0105 korzy\u015bci\u0105 u\u017cycia tego formatu jest r\u00f3wnie\u017c wysoka kompresja grafik.<\/p>\n\n\n\n

Kompresja obraz\u00f3w<\/h2>\n\n\n\n

Kompresja obrazu oznacza zmniejszenie jego obj\u0119to\u015bci, a tym samym wagi pliku. Istniej\u0105 dwa rodzaje kompresji: bezstratna i stratna.<\/p>\n\n\n\n

Kompresja stratna<\/h3>\n\n\n\n

Jest to nieodwracalna metoda kompresji, kt\u00f3ra polega na usuni\u0119ciu cz\u0119\u015bci danych, przy jednoczesnym zachowaniu przyzwoitej jako\u015bci zdj\u0119cia. Inaczej m\u00f3wi\u0105c kompresja stratna pogarsza jako\u015b\u0107 zdj\u0119cia po to, by zmniejszy\u0107 jego wag\u0119. Natomiast przy niewielkim stopniu kompresji stratnej jeste\u015bmy w stanie uzyska\u0107 w dalszym ci\u0105gu dobrej jako\u015bci grafik\u0119. Formatami kompresji stratnej s\u0105 pliki jpg oraz webP (te ostatnie jednocze\u015bnie obs\u0142uguj\u0105 kompresj\u0119 bezstratn\u0105).<\/p>\n\n\n\n

Kompresja bezstratna<\/h3>\n\n\n\n

W odr\u00f3\u017cnieniu od kompresji stratnej ta metoda polega na zmniejszeniu rozmiaru pliku bez utraty jako\u015bci obrazu. Zwykle usuwane s\u0105 jednak metadane pliku. Formatami kompresji bezstratnej s\u0105 pliki png oraz webP.<\/p>\n\n\n\n

Optymalizacja nazwy grafiki<\/h2>\n\n\n\n

Zastan\u00f3wmy si\u0119 przez chwil\u0119 nad nazw\u0105 pliku. To pozornie b\u0142ahe zadanie ma du\u017ce znaczenie w kontek\u015bcie optymalizacji i indeksowania si\u0119 wyniku w wyszukiwarce. Prawid\u0142owa nazwa pliku powinna by\u0107 kr\u00f3tka, ale opisowa. Nie stosuj polskich znak\u00f3w diakrytycznych. Natomiast poszczeg\u00f3lne s\u0142owa oddziel my\u015blnikiem \u201c-\u201d. Jak to wygl\u0105da w praktyce? Zobaczmy na przyk\u0142adzie zaprojektowanej przeze mnie ilustracji.<\/p>\n\n\n\n

\"\"
Tutaj wy\u015bwietla si\u0119 podpis grafiki<\/figcaption><\/figure>\n\n\n\n

Powy\u017csz\u0105 grafik\u0119 zapisa\u0142am w formacie PNG. A tytu\u0142 pliku ilustracja-programisty.png<\/strong> w zaledwie dw\u00f3ch s\u0142owach oddzielonych my\u015blnikiem odzwierciedla tre\u015b\u0107 ilustracji. Pami\u0119taj, aby poszczeg\u00f3lnych s\u0142\u00f3w nie oddziela\u0107 spacj\u0105 ani podkre\u015blnikiem \u201c_\u201d.<\/p>\n\n\n\n

Je\u015bli chodzi o zdj\u0119cia, ich oryginalne nazwy cz\u0119sto opieraj\u0105 si\u0119 o ci\u0105g cyfr, na przyk\u0142ad: IMG_2124.jpg. Zastan\u00f3wmy si\u0119 nad kontekstem artyku\u0142u oraz fotografii i dobierzmy kr\u00f3tk\u0105 i tre\u015bciw\u0105 nazw\u0119, je\u015bli to mo\u017cliwe dodajmy r\u00f3wnie\u017c pasuj\u0105ce s\u0142owa kluczowe. Przyk\u0142ad nazwy fotografii zrobionej na krakowskim rynku mo\u017ce brzmie\u0107: rynek-krakowski-widok-na-sukiennice.jpg.<\/p>\n\n\n\n

\n\t
\n\t\t
\n\t\t\tSzukasz do\u015bwiadczonego zespo\u0142u programistycznego? Porozmawiajmy o konkretach.\t\t<\/div>\n\t\t
\n\t\t\t\n
\n\t
\n\t\t\t\t\t\n\t\t\t<\/div>\n\t
\n\t\t
\n\t\t\t\n\t\t\t\thello@smultron.pl\t\t\t<\/a>\n\t\t<\/div>\n\t\t
\n\t\t\t\n\t\t\t\t+48 791 991 797\t\t\t<\/a>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n

Image SEO (Search engine optimization)<\/h2>\n\n\n\n

Doszli\u015bmy do momentu, kiedy nasz plik graficzny mo\u017ce zosta\u0107 wgrany do biblioteki medi\u00f3w w WordPressie. Ma odpowiedni rozmiar, wag\u0119, format oraz adekwatn\u0105 nazw\u0119. Przed nami kolejne zadanie, a mianowicie optymalizacja grafiki pod SEO (image SEO).<\/p>\n\n\n\n

Wspomnia\u0142am wcze\u015bniej o poprawnym zapisie pliku graficznego. Tu\u017c po wgraniu naszej grafiki do WordPress powinni\u015bmy wype\u0142ni\u0107 znajduj\u0105ce si\u0119 tam pola, przede wszystkim: Tekst alternatywny oraz tytu\u0142 obrazu.<\/p>\n\n\n\n

\"\"
Biblioteka medi\u00f3w w WordPressie z wype\u0142nionymi danymi na temat ilustracji<\/figcaption><\/figure>\n\n\n\n

Tekst alternatywny\/ Atrybut alt<\/h3>\n\n\n\n

Zacznijmy od najwa\u017cniejszego pola, jakim jest tekst alternatywny. Jest to tekst opisuj\u0105cy tre\u015b\u0107 grafiki. Wype\u0142nione pole jest po\u017cyteczne z paru wzgl\u0119d\u00f3w:<\/p>\n\n\n\n