DPI zdjęcia na strony WWW

W Internecie są setki, tysiące artykułów o tworzeniu zdjęć / obrazów dla strony www. Założę się, że dużo słyszałeś o 72dpi. Coś w stylu, obrazy dla Internetu powinny mieć 72 DPI, a obrazy do druku co najmniej 300 DPI. I pewnie w to uwierzyłeś.

72 DPI to mit

Moi drodzy, czas najwyższy zakończyć dyskusje o 72 DPI. Być może jeszcze główkujesz co to jest DPI lub czy DPI to to samo co PPI…

DPI to “kropki na cal”, a PPI to “piksele na cal”. Termin DPI jest zwykle używany do drukowanych obrazów, ponieważ obrazy drukowane składają się z “małych kropek”, a PPI jest używany głównie w odniesieniu do ekranów, ponieważ ekrany zawierają piksele.

Oba terminy są dość podobne i ludzie często używają ich zamiennie, co jest trochę mylące, więc na razie tym się nie martw. Dlaczego 72 DPI to mit? Zobacz poniżej. Przygotowałem cztery zdjęcia poniżej, abyś lepiej to zrozumiał. Jedno ma 10 DPI, następne 72 DPI, 300 DPI i ostatnie 1000 DPI:

Oczywiście, jeżeli mi nie wierzysz, to pobierz te zdjęcia i otwórz w Photoshop na swoim komputerze. Ich rozmiar jest identyczny (1.1MB). A jednak różne DPI. Na ekranie wyglądają identycznie – “jakość” ta sama prawda?

Jak to możliwe?

Otóż, spójrz wstecz na to, co faktycznie oznacza akronim: piksele / punkty na cal. Odnosi się to do liczby pikseli / punktów ściśniętych w jednym calu drukowanej strony. Dwa obrazy o tej samej wartości piksela (w tym przykładzie 2500 pikseli) zostaną wydrukowane w bardzo różnych rozmiarach w zależności od ustawionego DPI. Ten obraz przy 72 DPI będzie miał szerokość 34,72 cala, podczas gdy ten sam obraz przy 300 DPI będzie miał szerokość 8,33 cala.

To tylko podstawowa matematyka. Jedyne, co robi DPI, to określenie, ile pikseli Twojego wydruku zmieści się w jednym calu miejsca na stronie. Dlatego obraz o wyższej rozdzielczości wygląda lepiej niż obraz o niższej rozdzielczości – im więcej pikseli zostanie ściśniętych w małym obszarze, tym drobniejsze szczegóły drukowanego obrazu.

Te obrazy co widziałeś wyżej o różnych wartościach DPI na stronie internetowej wyglądają identycznie (rozmiar pliku jest również ten sam). Zobacz jak wyglądają na wydruku:

Podsumowując, DPI obrazu ma znaczenie tylko wtedy, gdy go drukujesz.

Jakie DPI dla obrazów w Internecie?

A więc, jak DPI odnosi się do obrazów, które umieszczasz na stronie internetowej? DPI nie ma żadnego znaczenia dla obrazów na stronie internetowej. Serio. Spójrz ponownie na cztery zdjęcia z początku artykułu. Ich rozmiar nie zmienia się na ekranie, ponieważ ekran rozpoznaje jeden pomiar. Są to piksele. Piksele to wszystko, o czym musisz pomyśleć. Aby określić, jak duży obraz powinien być na Twojej stronie www, musisz wiedzieć, jaki rozmiar w pikselach musi ją wypełnić.

Docelowo rozmiar obrazu zależy od rozmiaru kontenera, który musi wypełnić, a ten różni się w zależności od witryny internetowej (lub nawet od sekcji tej samej witryny). W moim przypadku post, który właśnie czytasz, to kontener o szerokości 910px. A więc ja, przygotowuję zdjęcia na moją stronę o szerokości 910px. DPI nie ma tu znaczenia, liczą się tylko piksele.

A co z ekranami Retina?

Monitory czy też ekrany Retina, znane również jako wyświetlacze „o wysokiej rozdzielczości”, są niesamowite, ponieważ umieszczają na swoich ekranach więcej pikseli niż standardowe wyświetlacze. Oznacza to, że każdy pojedynczy piksel jest jeszcze mniejszy, dzięki czemu otrzymujesz znacznie ostrzejszy obraz niż na standardowym ekranie. Czy zatem DPI obrazu nie ma teraz znaczenia?

Nadal odpowiedź brzmi NIE. Jeżeli optymalizujesz obrazy pod Retinę, jedyne co musisz zrobić, to podwoić piksele obrazu, aby nadal wyglądał “ostro”. A więc jak masz zdjęcie o szerokości 900 pikseli powinno być zapisane w rozmiarze 1800 pikseli. Następnie, gdy ten obraz zostanie wyświetlony w rozdzielczości 900 pikseli, zgodnie z pierwotnym zamysłem, będzie wyglądał ładnie i ostro na ekranach Retina, ponieważ obraz ma podwójną liczbę pikseli, podobnie jak ekran. Ustawienie DPI / PPI jest nadal nieistotne, ponieważ nie drukujesz obrazu.

Warto w tym miejscu na chwilę chwilę zatrzymać się i pomyśleć. Retina to wspaniały wyświetlacz, ale idąc tym torem za chwilę będziesz wgrywać na swoją stronę www zdjęcia o szerokości 5000 pikseli. To doprowadzi do problemów z optymalizacją, a więc warto przemyśleć sprawę i wprowadzić trochę logiki. Po części WordPress zrobił to za nas ustawiając maksymalną szerokość obrazu jaki możesz wgrać na 2500 pikseli. I tego się trzymaj.