{"id":226895,"date":"2022-09-14T10:54:00","date_gmt":"2022-09-14T07:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226895"},"modified":"2022-11-08T12:25:56","modified_gmt":"2022-11-08T09:25:56","slug":"jak-wyswietlac-skalowane-obrazy-w-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/jak-wyswietlac-skalowane-obrazy-w-wordpress\/","title":{"rendered":"Jak wy\u015bwietla\u0107 skalowane obrazy w WordPress"},"content":{"rendered":"\n

To oczywiste, \u017ce zdj\u0119cia s\u0105 integraln\u0105 cz\u0119\u015bci\u0105 naszego \u017cycia. W zwi\u0105zku z tym trudno wyobrazi\u0107 sobie stron\u0119 internetow\u0105 bez zdj\u0119\u0107. Zdj\u0119cia przyci\u0105gaj\u0105<\/strong> wzrok odwiedzaj\u0105cych i pomagaj\u0105 uporz\u0105dkowa\u0107 zawarto\u015b\u0107 strony. Obrazy sprawiaj\u0105, \u017ce strona jest interesuj\u0105ca, bogata w informacje i poprawia wra\u017cenia u\u017cytkownika.<\/p>\n

Obrazy o zbyt du\u017cym rozmiarze maj\u0105 negatywny wp\u0142yw na wydajno\u015b\u0107 witryny<\/strong> i powinny by\u0107 skalowane zgodnie z aktywnym motywem. S\u0105 wa\u017cnymi elementami na stronie internetowej i zas\u0142uguj\u0105 na to, by pokaza\u0107 je w najlepszy mo\u017cliwy spos\u00f3b. Bardzo wa\u017cne jest, aby wy\u015bwietla\u0107 przeskalowane obrazy w witrynie WordPress.<\/p>\n

Rozmiary przeskalowanych obraz\u00f3w dopasowuj\u0105 si\u0119 do odpowiednich rozmiar\u00f3w zgodnie z tymi zdefiniowanymi w HTML i CSS. Jednak niewielu webmaster\u00f3w zwraca uwag\u0119 na ten wa\u017cny szczeg\u00f3\u0142 projektu. We\u017a przyk\u0142ad obrazu o wymiarach 500 x 500 pikseli dla miniatury 50 x 50. Przegl\u0105darka internetowa musi pobra\u0107 obraz i przeskalowa\u0107 go, aby mo\u017cna go by\u0142o wy\u015bwietli\u0107 odwiedzaj\u0105cemu. Oczywi\u015bcie jest to nieefektywne i spowolni<\/strong> dzia\u0142anie witryny.<\/p>\n

R\u00f3\u017cnica w rozdzielczo\u015bci nie jest widoczna i st\u0105d cz\u0119sto nie zauwa\u017ca si\u0119 wagi, jak\u0105 nios\u0105 ze sob\u0105 du\u017ce obrazy. Wi\u0119kszo\u015b\u0107 ludzi nawet nie zdaje sobie sprawy, \u017ce ta przesadna rozdzielczo\u015b\u0107 powoduje problemy, a problem pozostaje nierozwi\u0105zany. Pozostawiaj\u0105 problem przegl\u0105darce.<\/p>\n

Dlaczego warto wy\u015bwietla\u0107 skalowane obrazy w witrynie WordPress?<\/h2>\n

\"Jak<\/a><\/p>\n

G\u0142\u00f3wnym powodem wy\u015bwietlania przeskalowanych obraz\u00f3w jest to, \u017ce obrazy o pe\u0142nej rozdzielczo\u015bci spowalniaj\u0105<\/strong> witryn\u0119 i wyd\u0142u\u017caj\u0105 czas \u0142adowania<\/strong>. Powolna strona prowadzi do s\u0142abego do\u015bwiadczenia u\u017cytkownika<\/strong> i zamiast zosta\u0107 i wr\u00f3ci\u0107, odejdzie i trzyma si\u0119 z daleka. Statystyki Kissmetrics pokazuj\u0105, \u017ce strony, kt\u00f3re \u0142aduj\u0105 si\u0119 d\u0142u\u017cej ni\u017c trzy sekundy, b\u0119d\u0105 mia\u0142y wy\u017cszy wsp\u00f3\u0142czynnik odrzuce\u0144<\/strong>.<\/p>\n

Dzi\u0119ki zoptymalizowanym rozmiarom obraz\u00f3w w witrynie czas \u0142adowania b\u0119dzie kr\u00f3tszy<\/strong>. Ludzie ch\u0119tniej zostaj\u0105 d\u0142u\u017cej<\/strong> na stronie i wracaj\u0105<\/strong> p\u00f3\u017aniej. Poprawia to pozycjonowanie<\/strong> i podnosi pozycj\u0119 witryny<\/strong>.<\/p>\n

Du\u017ce obrazy powoduj\u0105 r\u00f3\u017cne problemy<\/h3>\n
    \n
  1. Zwi\u0119ksza nacisk na wydajno\u015b\u0107 przegl\u0105darki<\/strong>. Przegl\u0105darka b\u0119dzie musia\u0142a wykona\u0107 dodatkowe \u017c\u0105dania serwera. Nie mo\u017ce szybko wy\u015bwietli\u0107 obrazu, ale zamiast tego zajmie czas i zasoby, aby zmieni\u0107 rozmiar obrazu. Strony internetowe z ci\u0119\u017ckimi obrazami \u0142aduj\u0105 si\u0119 d\u0142u\u017cej.<\/li>\n
  2. Je\u015bli du\u017ce obrazy o wysokiej rozdzielczo\u015bci s\u0105 wy\u015bwietlane w ma\u0142ych rozmiarach na stronie internetowej, marnuj\u0105 czas i pobieraj\u0105 dane<\/strong>. Dzieje si\u0119 tak na przyk\u0142ad, gdy selfie z telefonu kom\u00f3rkowego jest u\u017cywane w stanie nieprzetworzonym przez male\u0144kiego Gravatara.<\/li>\n<\/ol>\n

    Jak skalowa\u0107 obrazy w witrynach WordPress<\/h2>\n

    R\u0119cznie<\/h3>\n

    \"Jak<\/a><\/p>\n

    Aby zacz\u0105\u0107 od pocz\u0105tku, przeanalizuj obrazy<\/strong> na stronie za pomoc\u0105 narz\u0119dzia takiego jak GTMetrix. GTMetrix to narz\u0119dzie do analizy wydajno\u015bci, zaprojektowane przez GT.net. Firma ta s\u0142ynie z monitorowania i optymalizacji pr\u0119dko\u015bci oraz Pingdom. Po przeanalizowaniu strony przez GTMetrics, generuje raport. Pokazuje, jakie problemy<\/strong> zosta\u0142y znalezione i jakie ulepszenia<\/strong> zaleca.<\/p>\n

    Przegl\u0105daj\u0105c raport, zwr\u00f3\u0107 szczeg\u00f3ln\u0105 uwag\u0119 na zak\u0142adk\u0119 Struktura<\/strong>. Na tej karcie kliknij Obrazy o odpowiedniej wielko\u015bci. Wy\u015bwietli list\u0119 obraz\u00f3w, kt\u00f3re nie maj\u0105 prawid\u0142owego rozmiaru.<\/p>\n

    WordPress nie zmniejsza automatycznie obraz\u00f3w, je\u015bli to mo\u017cliwe, ale dodaje je do witryny bez przetwarzania. Aby rozwi\u0105za\u0107 ten problem, istniej\u0105 dwie opcje.<\/p>\n

    Nawet je\u015bli korzystanie z wtyczek nie jest po\u017c\u0105danym sposobem, istniej\u0105 inne opcje. Pierwszym sposobem skalowania obraz\u00f3w jest r\u0119czne dostosowanie rozmiaru ka\u017cdego z nich za pomoc\u0105 edytora zdj\u0119\u0107, takiego jak Photoshop<\/strong>. Mo\u017ce si\u0119 wydawa\u0107, \u017ce ta metoda jest nieefektywna, ale w rzeczywisto\u015bci tak nie jest.<\/p>\n

    \"Jak<\/a><\/p>\n

    W Photoshopie jest wi\u0119cej opcji opr\u00f3cz dostosowania wysoko\u015bci i szeroko\u015bci<\/strong> obrazu. Kolejn\u0105 rzecz\u0105 do sprawdzenia jest rozdzielczo\u015b\u0107<\/strong> obrazu. W wi\u0119kszo\u015bci przypadk\u00f3w, w przypadku aplikacji internetowych, 72 PPI wystarcza do dobrego ogl\u0105dania.<\/p>\n

    Drugim jest u\u017cycie wtyczki<\/strong> do skalowania obraz\u00f3w. Ta opcja jest \u0142atwa i szybka. WordPress ma do tego w\u0142asn\u0105 funkcj\u0119, srcset<\/strong>. To narz\u0119dzie mo\u017ce konwertowa\u0107 grafik\u0119, tak\u0105 jak obrazy, na responsywne pliki<\/strong>. Responsywne obrazy s\u0105 automatycznie dostosowywane do r\u00f3\u017cnych urz\u0105dze\u0144 i rozmiar\u00f3w ekranu. Poni\u017cej znajduje si\u0119 kilka innych wtyczek, kt\u00f3re \u015bwietnie sprawdzaj\u0105 si\u0119 przy zmniejszaniu rozmiar\u00f3w obraz\u00f3w.<\/p>\n

    Optimole<\/h3>\n

    \"Jak<\/a><\/p>\n

    Doskona\u0142ym narz\u0119dziem do obs\u0142ugi przeskalowanych obraz\u00f3w jest Optimole<\/strong>. Jest to wtyczka WordPress, kt\u00f3ra mo\u017ce zmienia\u0107 rozmiar obraz\u00f3w dla r\u00f3\u017cnych urz\u0105dze\u0144. Automatycznie zmienia rozmiar do optymalnego rozmiaru obrazu na podstawie r\u00f3\u017cnych typ\u00f3w urz\u0105dze\u0144. Wynikiem s\u0105 wysokiej jako\u015bci przeskalowane obrazy<\/strong>.<\/p>\n

    Oto niekt\u00f3re z cech, kt\u00f3re sprawiaj\u0105, \u017ce Optimole jest interesuj\u0105cym wyborem:<\/p>\n