{"id":1922,"date":"2015-02-26T15:00:36","date_gmt":"2015-02-26T14:00:36","guid":{"rendered":"https:\/\/lsbeta.szmigiel.design\/?p=1922"},"modified":"2018-01-11T15:40:19","modified_gmt":"2018-01-11T14:40:19","slug":"jak-zoptymalizowac-duze-fotografie-na-stronie-internetowej","status":"publish","type":"post","link":"https:\/\/retro.szmigiel.design\/pl\/blog\/jak-zoptymalizowac-duze-fotografie-na-stronie-internetowej\/","title":{"rendered":"Jak zoptymalizowa\u0107 du\u017ce fotografie na stronie internetowej?"},"content":{"rendered":"
\n

Fotografie i grafiki pe\u0142noekranowe<\/h2>\n

Od dobrych kilkunastu miesi\u0119cy mo\u017cna obserwowa\u0107 rosn\u0105ce zainteresowanie pe\u0142nowymiarowymi fotografiami umieszczanymi na stronach internetowych w formie t\u0142a dla nag\u0142\u00f3wk\u00f3w lub ca\u0142ych sekcji. Odpowiedni dob\u00f3r fotografii w po\u0142\u0105czeniu z tak\u0105 form\u0105 ich prezentacji pozwala \u0142atwo zbudowa\u0107 odpowiedni\u0105 atmosfer\u0119 i bardzo dobrze wygl\u0105da na du\u017cych ekranach.<\/p>\n

Wykorzystanie obraz\u00f3w rozci\u0105gni\u0119tych na ca\u0142\u0105 szeroko\u015b\u0107 przegl\u0105darki pozwala r\u00f3wnie\u017c na szybkie zaprojektowanie i wdro\u017cenie stron typu landing page, gdzie niewielka ilo\u015b\u0107 tekstu nie pozwala na kreacj\u0119 skomplikowanych layout\u00f3w zach\u0119caj\u0105cych u\u017cytkownik\u00f3w do podejmowania konkretnych dzia\u0142a\u0144.<\/p>\n

Jak skr\u00f3ci\u0107 czas \u0142adowania strony z du\u017cymi zdj\u0119ciami?<\/h2>\n

Du\u017ce fotografie maj\u0105 jednak to do siebie, \u017ce opr\u00f3cz swoich poka\u017anych rozmiar\u00f3w na ekranie zajmuj\u0105 r\u00f3wnie\u017c odpowiednio du\u017co miejsca na dysku. O ile w dobie hosting\u00f3w chmurowych oferuj\u0105cych du\u017c\u0105 powierzchni\u0119 dyskow\u0105 oraz nielimitowany transfer (jak np. dhosting<\/a>, z kt\u00f3rego korzystam i szczerze polecam) magazynowanie zdj\u0119\u0107 nie powinno by\u0107 problemem, o tyle pr\u0119dko\u015b\u0107 \u0142adowania strony mo\u017ce mie\u0107 wp\u0142yw na czytelno\u015b\u0107 oraz og\u00f3ln\u0105 u\u017cyteczno\u015b\u0107 strony.<\/p>\n

Jeste\u015bmy wygodni. Do naszej dyspozycji trafiaj\u0105 coraz szybsze urz\u0105dzenia i coraz wyra\u017aniejsze ekrany. Chcemy podziwia\u0107 ostre, inspiruj\u0105ce i kolorowe zdj\u0119cia – ale nie chcemy czeka\u0107 kilka sekund na za\u0142adowanie wszystkich danych. Chcemy konsumowa\u0107 zawarto\u015b\u0107 od razu po klikni\u0119ciu w link.<\/p>\n

Czy mo\u017cemy zatem nakarmi\u0107 wilka, nie zabijaj\u0105c jednocze\u015bnie owcy?\n<\/p><\/div>\n

\"\"
\nOptymalizacja fotografii opublikowanych na blogu pozwala zaoszcz\u0119dzi\u0107 sporo miejsca na serwerze. Zoptymalizowane zdj\u0119cia na stronie doceni\u0105 r\u00f3wnie\u017c posiadacze urz\u0105dze\u0144 mobilnych. Pami\u0119taj, \u017ce nie ka\u017cdy dysponuje pakietem danych pozwalaj\u0105cym na pobieranie gigabajt\u00f3w i nie zawsze znajduje si\u0119 w pobli\u017cu szybkiej sieci LTE.<\/em><\/p>\n

\n

Narz\u0119dzia do optymalizacji i kompresji obraz\u00f3w<\/h2>\n

Przede wszystkim mo\u017cemy wzi\u0105\u0107 sprawy w swoje r\u0119ce i nie karmi\u0107 wilka wypasionymi owcami, ale serwowa\u0107 mu tylko tyle, ile potrzebuje.<\/p>\n

1. Zmniejsz obrazy<\/h4>\n

Co prawda telewizory 8k s\u0105 ju\u017c w sprzeda\u017cy, ale przyznaj szczerze – jak wiele os\u00f3b b\u0119dzie ogl\u0105da\u0107 zdj\u0119cie twojego kota w rozdzielczo\u015bci kilkunastu milion\u00f3w pikseli? Zamiast umieszcza\u0107 na blogu zdj\u0119cia prosto z aparatu fotograficznego lub smartfona, zdecydowanie lepiej b\u0119dzie je najpierw zmniejszy\u0107. W wi\u0119kszo\u015bci przypadk\u00f3w rozdzielczo\u015b\u0107 1920 x 1080 pikseli zadowoli nawet najbardziej wybrednych wielbicieli futrzak\u00f3w.<\/p>\n

Na marginesie warto zauwa\u017cy\u0107, \u017ce do wydrukowania fotografii w wysokiej jako\u015bci w rozmiarze kartki formatu A4 wystarczy zdj\u0119cie o rozdzielczo\u015bci nie przekraczaj\u0105cej 9 milion\u00f3w pikseli. Tym samym warto zastanowi\u0107 si\u0119, czy magazynowanie zdj\u0119\u0107 w bardzo wysokiej rozdzielczo\u015bci ma jakikolwiek sens.<\/p>\n

2. Skorzystaj z mocniejszej kompresji JPEG<\/h4>\n

Mo\u017cesz zapisa\u0107 zdj\u0119cie w ni\u017cszej jako\u015bci, je\u017celi nie publikujesz na swojej stronie fotografii, kt\u00f3rych g\u0142\u00f3wnym przeznaczeniem jest wygranie Pultizera. Powa\u017cnie, zmniejszenie jako\u015bci zdj\u0119cia z 90% do 60% przy jego zapisie do formatu JPEG pozwala zmniejszy\u0107 rozmiar nawet o po\u0142ow\u0119. Zdecydowanie lepiej obejrze\u0107 galeri\u0119 nieco bardziej skompresowanych fotografii ni\u017c nie zobaczy\u0107 ich wcale. Nie zapominaj, \u017ce wiele os\u00f3b zrezygnuje z oczekiwania na za\u0142adowanie strony, je\u017celi b\u0119d\u0105 musia\u0142y czeka\u0107 d\u0142u\u017cej ni\u017c 3 – 5 sekund.<\/p>\n

3. Podziel galeri\u0119 na strony lub skorzystaj z rozwi\u0105za\u0144 opartych o AJAX<\/h4>\n

Je\u017celi na jednej stronie publikujesz kilkana\u015bcie fotografii, rozwa\u017c ich rozdzielenie na kilka podstron. Alternatyw\u0105 mo\u017ce okaza\u0107 si\u0119 modu\u0142 galerii lub suwak (slider) oparty o technologi\u0119 AJAX i skrypt lazy load<\/em>, co umo\u017cliwi do\u0142adowanie kolejnych zdj\u0119\u0107 bez konieczno\u015bci prze\u0142adowania ca\u0142ej strony. Dzi\u0119ki temu nie b\u0119dziesz skazywa\u0142 odwiedzaj\u0105cych na d\u0142ugi czas oczekiwania na za\u0142adowanie wszystkich materia\u0142\u00f3w graficznych – zostan\u0105 one pobrane przez przegl\u0105dark\u0119 dopiero, gdy b\u0119d\u0105 potrzebne.<\/p>\n

4. Wybierz tylko najlepsze zdj\u0119cia<\/h4>\n

Warto pokaza\u0107 szeroki asortyment produkt\u00f3w albo pochwali\u0107 si\u0119 ciekawymi miejscami odwiedzonymi w ostatnie wakacje. Zdob\u0105d\u017a si\u0119 jednak na odrobin\u0119 szczero\u015bci i przyznaj, \u017ce te 500 zdj\u0119\u0107 to spora przesada. By\u0107 mo\u017ce zamiast 30 zdj\u0119\u0107, przypadaj\u0105cych na jeden produkt, zrobionych z ka\u017cdej mo\u017cliwej perspektywy, wystarcz\u0105 dwa podkre\u015blaj\u0105ce jego jako\u015b\u0107?<\/p>\n

5. Zoptymalizuj zdj\u0119cia opublikowane na stronie<\/h4>\n

Optymalizacja fotografii w ramach dzia\u0142aj\u0105cej strony mo\u017ce okaza\u0107 si\u0119 problematyczna. By\u0107 mo\u017ce konieczne b\u0119dzie zgranie wszystkich zdj\u0119\u0107 na dysk, ich zoptymalizowanie przy wykorzystaniu odpowiedniego oprogramowania i podmiana na serwerze. Nie musi to by\u0107 jednak problem, je\u017celi prowadzisz bloga lub stron\u0119 firmow\u0105 opart\u0105 o CMS WordPress. Istnieje bowiem kilka wtyczek, kt\u00f3re dzi\u0119ki wsp\u00f3\u0142pracy z zewn\u0119trznymi serwisami, pozwalaj\u0105 na hurtow\u0105 optymalizacj\u0119 fotografii i innych grafik publikowanych na stronie.<\/p>\n

Na uwag\u0119 zas\u0142uguje plugin WP Smush-It<\/a> oraz opublikowana niedawno wtyczka WP Image Shrinker<\/a>. Pierwszy z wymienionych do optymalizacji korzysta z serwisu Yahoo udost\u0119pnionego pod tak\u0105 sam\u0105 nazw\u0105, natomiast drugi wspierany jest przez serwis TinyPNG (oraz bli\u017aniaczy TinyJPG). Obydwie wtyczki dzia\u0142aj\u0105 w oparciu o r\u00f3\u017cne progi kompresji dla r\u00f3\u017cnych obszar\u00f3w kompresowanego obrazka oraz dodatkowe techniki pozwalaj\u0105ce zmniejszy\u0107 rozmiar pliku bez negatywnego wp\u0142ywu na postrzegan\u0105 jako\u015b\u0107.<\/p>\n

Autorzy serwisu TinyJPG<\/a> przekonuj\u0105, \u017ce ich technologia pozwala zmniejszy\u0107 rozmiar plik\u00f3w graficznych nawet o 70% przy zachowaniu ich oryginalnej jako\u015bci. Oferuj\u0105 nawet por\u00f3wnanie w formie interaktywnego suwaka dzi\u0119ki czemu mo\u017cemy przekona\u0107 si\u0119 na w\u0142asne oczy, czy taka optymalizacja nie spowoduje spadku jako\u015bci publikowanych zdj\u0119\u0107.<\/p>\n

Do dyspozycji u\u017cytkownik\u00f3w TinyJPG, autorzy serwisu oddaj\u0105 r\u00f3wnie\u017c swoj\u0105 w\u0142asn\u0105 wtyczk\u0119 – Compress JPEG & PNG images<\/a>. Jej dzia\u0142anie jest identyczne z WP Image Shrinker, jednak\u017ce rozwi\u0105zania te r\u00f3\u017cni\u0105 si\u0119 interfejsem. Warto zatem spr\u00f3bowa\u0107 obydwu rozwi\u0105za\u0144 i wybra\u0107 najwygodniejsze dla siebie.\n<\/div>\n

\"\"
\nPanda radzi: Automatyczna optymalizacja plik\u00f3w JPG oraz PNG to dobry spos\u00f3b na zmniejszenie czasu \u0142adowania strony a nawet poprawienie wynik\u00f3w SEO.<\/em><\/p>\n

\n

Czy warto optymalizowa\u0107 zdj\u0119cia na stronach internetowych?<\/h2>\n

Zmniejszanie rozmiar\u00f3w oraz optymalizacja plik\u00f3w graficznych publikowanych w Internecie nie wymaga olbrzymich nak\u0142ad\u00f3w pracy lub posiadania specjalistycznej wiedzy. Bior\u0105c jednak pod uwag\u0119, \u017ce tekst umieszczony na stronie zajmuje nierzadko u\u0142amek wielko\u015bci jednego du\u017cego obrazka, warto upewni\u0107 si\u0119, \u017ce zdj\u0119cia, kt\u00f3re przesy\u0142amy s\u0105 przygotowane do publikowania w Internecie. Zmniejszy to og\u00f3lny czas potrzebny na za\u0142adowanie i wy\u015bwietlenie strony, a tym samym dost\u0119p zar\u00f3wno do tekstu, jak i fotografii.<\/p>\n

Do\u015bwiadczenie to przyda si\u0119 r\u00f3wnie\u017c podczas wysy\u0142ania zdj\u0119\u0107 na profile spo\u0142eczno\u015bciowe oraz w e-mailach. Co prawda ka\u017cdy szanuj\u0105cy si\u0119 serwis spo\u0142eczno\u015bciowy oraz system zarz\u0105dzania tre\u015bci\u0105 posiada funkcjonalno\u015b\u0107 odpowiedzialn\u0105 za automatyczne zmniejszanie zdj\u0119\u0107, ale systemy te najcz\u0119\u015bciej dzia\u0142aj\u0105 po stronie serwera. Oznacza to, \u017ce aby zmniejszy\u0107 zdj\u0119cie, orygina\u0142 musi zosta\u0107 najpierw przes\u0142any na serwer, co z kolei zajmuje nasz czas.<\/p>\n

Warto skorzysta\u0107 z dost\u0119pnych narz\u0119dzi oraz wyrobi\u0107 sobie nawyk zmniejszania rozmiaru grafik przed ich publikacj\u0105 w Internecie. Doceni\u0105 to zar\u00f3wno u\u017cytkownicy urz\u0105dze\u0144 przeno\u015bnych, jak i wielkich, stacjonarnych ekran\u00f3w. Przygotowanie odpowiednich grafik to uk\u0142on w stron\u0119 odbiorc\u00f3w, kt\u00f3rzy doceni\u0105 dba\u0142o\u015b\u0107 o lepsz\u0105 dost\u0119pno\u015b\u0107 do tre\u015bci. Przesy\u0142anie du\u017cych plik\u00f3w graficznych nie ma bowiem sensu, je\u017celi ich rozmiar w pami\u0119ci nie przek\u0142ada si\u0119 na wyra\u017ane zwi\u0119kszenie jako\u015bci obrazu.<\/p>\n

Co jeszcze mog\u0119 zrobi\u0107 \u017ceby moja strona \u0142adowa\u0142a si\u0119 szybciej?<\/h2>\n

Dobrym sposobem b\u0119dzie uruchomienie pami\u0119ci podr\u0119cznej dla Twojej strony internetowej. Je\u017celi korzystasz z CMS WordPress, zapoznaj si\u0119 z innym wpisem, gdzie pisz\u0119 na ten temat.<\/p>\n<\/i><\/span>Najlepsza wtyczka cache dla WordPress<\/span><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Gar\u015b\u0107 prostych sposob\u00f3w na szybsz\u0105 i bardziej dost\u0119pn\u0105 stron\u0119 internetow\u0105 dzi\u0119ki optymalizacji plik\u00f3w graficznych.<\/p>\n","protected":false},"author":3,"featured_media":1941,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[112],"tags":[29,95],"class_list":["post-1922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-strony-internetowe","tag-fotografia-2","tag-strony-internetowe"],"_links":{"self":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/1922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/comments?post=1922"}],"version-history":[{"count":0,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/posts\/1922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media\/1941"}],"wp:attachment":[{"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/media?parent=1922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/categories?post=1922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/retro.szmigiel.design\/pl\/wp-json\/wp\/v2\/tags?post=1922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}