Piksel, Rozdzielczość HTML

Rozdzielczość

Jak już nam tak dobrze poszło ze zrozumieniem po co w ogóle mamy dokonywać zmniejszania rozmiaru zdjęcia, to oprócz kompresji jest jeszcze jedna kwestia z tym związana, mianowicie rozdzielczość. Rozdzielczość to nic innego jak rozmiar zdjęcia cyfrowego. Rozdzielczość podawana jest w pikselach, czyli takich małych kwadracikach pojawiających się na ekranie.

Piksel Pixel

Piksel jest to najmniejszy element wyświetlacza, tudzież ekranu, telewizora itd. Każdy piksel może posiadać tylko jeden kolor. Natomiast duże nagromadzenie różnorodnych pikseli daje nam obraz.

piksele

Co to jest rozdzielczość?

Rozdzielczość to stosunek szerokości do wysokości wyrażonej w pikselach. Ta, taka najbardziej znana chyba nam wszystkim rozdzielczość, o marketingowej nazwie HD (High Definition, czyli po prostu wysoka rozdzielczość) to 1920px na 1080px. Zapamiętajmy, że pierwszą wartością będzie zawsze szerokość, a drugą wysokość.

Megapiksele – MP

HD stosuje się raczej w telewizorach i monitorach, a my mieliśmy mówić o zdjęciach. Rozdzielczość zdjęć liczona jest zazwyczaj w Mega Pikselach. Cóż to są te magiczne Mega Piksele? To nic innego jak wynik mnożenia naszej rozdzielczości wyrażony w milionach pikseli.

Nasza rozdzielczość HD, skoro już o niej wspomnieliśmy, będzie miała tych pikseli 1920X1080=2’073’600, czyli w zaokrągleniu dwa megapiksele, a zapisujemy to, w ten sposób 2MP.

Wybór rozdzielczości strony

Do czego w zasadzie jest nam ta wiedza potrzebna? To nie jest przecież kurs o fotografii. Webdesign nieodłącznie wiąże się z grafiką, zdjęciami i innymi multimediami, dlatego musimy w tym świecie umieć się, choć trochę, poruszać. O megapikselach mówimy dlatego, bo współczesne aparaty mają tych MP kilkanaście, bądź kilkadziesiąt. Zdjęcie, w tak dużej rozdzielczości zajmuje od kilku do kilkunastu megabajtów. Tak duża rozdzielczość nie będzie nam potrzebna. Na stronach internetowych zazwyczaj maksymalną rozdzielczość jaką będziemy potrzebować to 2MP, czyli tyle ile wynosi rozdzielczość HD. Zdjęcia w większej rozdzielczości i tak zostaną dopasowane szerokością do zawartości naszej strony internetowej. Jak to działa?

Przypuśćmy, że piszemy bloga, którego szerokość artykułu to 600px. Cała treść łącznie z tekstem i zdjęciami, będzie zawierała się w takiej 600px kolumnie. Jeśli wstawimy zdjęcie, które będzie przekraczało 600px, do takiej kolumny zostanie ono przeskalowane do szerokości 600px. Skalowanie na stronie internetowej nie oznacza zmiany jego fizycznego rozmiaru. Jeśli wkleimy na stronę zdjęcie o szerokości 5000px i rozmiarze 10MB to pomimo, że zostanie ono przeskalowane do 600px to i tak będzie musieli pobrać całe zdjęcie, czyli całe 10MB. Przeskalowania zdjęć do odpowiedniego rozmiaru możemy dokonać w większości programów graficznych.

Myślę, że rozumiecie już różnicę i potrzebę dodawania zdjęć na stronę w odpowiednim rozmiarze i po zastosowaniu odpowiedniej kompresji.