HTML & CSS dla początkujących (Część 09): Grafiki dla internetu (01)

Gdy zapisujesz obrazy w programie graficznym, oferowane są różne formaty graficzne. Który z nich jednak wybrać, jeśli chodzi o dodanie obrazka na stronę internetową?



Chcąc przedstawić obrazek na swojej stronie internetowej, masz do wyboru trzy formaty.

• GIF

• JPEG

• PNG

Jednak jaki format wybrać do jakiego zastosowania? Czy lepiej użyć GIF czy PNG do zdjęć? Najpierw krótka analiza możliwości poszczególnych formatów.

Ta mała analiza pokazuje już różnice między formatami. Nic więc dziwnego, że pewne formaty lepiej nadają się do konkretnych zastosowań niż inne. Dokładnie na tym etapie zaczyna się kolejny rozdział. Tam będzie pokazane, kiedy najlepiej użyć danego formatu.

Zdjęcia

Nie ma wątpliwości, że do zdjęć używa się formatu JPEG. Tutaj obrazy mogą być bardzo dobrze skompresowane, przy zachowaniu zmiennej jakości. Znajduje się tu odpowiednia równowaga między jakością a stopniem kompresji.

Zrzuty ekranu/Diagramy

Najlepiej nadaje się do tego format PNG. PNG jest również interesujący dla rysunków technicznych, planów itp. PNG można także używać do obrazów, w których występują obszary transparentne.

Czcionki/Loga

Jeśli w swoim logo macie tekst lub chcecie przedstawić tekst w ogóle, powinniście użyć GIF lub PNG. Ze względu na lepszą wydajność zazwyczaj sięgamy jednak po PNG. JPEG jest w każdym razie nieodpowiedni do prezentacji tekstu, ponieważ krawędzie są wyświetlane nieczyście.

Przejrzystość

Jeśli chodzi o wyświetlanie obszarów transparentnych, JPEG od razu odpada. Pozostają więc GIF i PNG. Ale który z tych formatów wybrać, jeśli zależy nam na przejrzystości? Mimo że GIF jest w zasadzie zdolny obsłużyć przezroczystość, wyniki są zazwyczaj nieczyste. Piksel w formacie GIF może być albo w pełni widoczny, albo w pełni przezroczysty. W przypadku PNG ten problem nie występuje. Ten format posiada dodatkowy kanał alfa, dzięki któremu uzyskuje się bardziej precyzyjne efekty przejrzystości.

Dodawanie obrazów

Grafiki można dołączyć za pomocą elementu img. (Proszę pamiętać, że obrazy są obecnie bardzo często dodawane za pomocą CSS. Szczegółowe informacje na temat CSS zostaną podane wkrótce. Pokazana metoda HTML jest jednak w pełni zgodna ze standardem i może być bezpiecznie używana w HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Element img to element samodzielny. Przez odpowiednie atrybuty można bliżej opisać obrazek. Najważniejszym atrybutem jest w tym przypadku src. Dzięki niemu można określić obraz, który ma być dołączony. W przykładzie zakładam, że grafika logo.png znajduje się w tym samym katalogu co plik HTML, w którym zdefiniowany został element img.

Aby obrazy faktycznie się wyświetlały, należy poprawnie podać ich ścieżkę. HTML oferuje różne możliwości odniesienia się do obrazów.

• Ścieżki bezwzględne

• Ścieżki bezwzględne względem adresu bazowego

• Ścieżki względne względem adresu bazowego

Najpierw o ścieżkach bezwzględnych. To rozwiązanie używane jest zazwyczaj wtedy, gdy obraz nie znajduje się na własnym serwerze. Zakładając, że chcecie dodać w swojej witrynie znanego z PSD-Tutorials.de motyla, to teoretycznie moglibyście go bezpośrednio wczytać z serwera, na którym leży. Na początek należy ustalić ścieżkę obrazu. Najprościej jest to zrobić, klikając prawym przyciskiem myszy na obrazie w przeglądarce i wybierając następnie kopiuj adres obrazu.

To, co zostaje zapisane do schowka, powinno ostatecznie wyglądać tak:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

To pełny adres obrazu. Te informacje są wystarczające do dołączenia obrazu.

<img src="http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Przypisuje się pełną ścieżkę do obrazu do atrybutu src.

Problem z tymi ścieżkami bezwzględnymi polega na tym, że nie ma się rzeczywistej kontroli nad osadzoną zawartością. Jeśli grafika, do której się odwołaliście, zostanie usunięta z serwera lub przeniesiona do innego katalogu, może dojść do błędu wyświetlania.





Dlatego korzystanie z tego rodzaju odwołań bezwzględnych powinno być wyjątkiem.

Absolutne adresy URL względem podstawowego adresu

Ta wersja jest zawsze preferowana, gdy obrazek znajduje się na tym samym komputerze/serwerze co plik HTML i jest osiągalny za pomocą aktualnego protokołu. Brzmi to skomplikowanie, ale w rzeczywistości to proste.

Przykład:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

To jest pełny adres. Następna część to bezwzględna ścieżka.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Ta bezwzględna ścieżka odnosi się względem podstawowego adresu http://4eck-media.de.

Adresy URL względne względem podstawowego adresu

Ten sposób jest zdecydowanie najbardziej powszechny. Zawsze uwzględniany jest aktualny katalog jako punkt odniesienia, z którego ostatecznie następuje adresacja. Przykłady:

Przyjmijmy, że istnieje plik index.htm, do którego chcecie osadzić obrazek. Dodatkowo na tym samym poziomie istnieje katalog images, w którym znajduje się wspomniany obrazek.

index.htm
images
--logo.png

Wywołanie atrybutu src w tym przypadku wyglądałoby tak:

src="images/logo.png"

Jak to będzie wyglądać, gdy obrazek znajduje się w katalogu ponad plikiem HTML?

projekt
--images
-----logo.png
--archiv
-----index.htm

W tym przypadku plik index.htm znajduje się w katalogu poniżej obrazka logo.png.

src="../images/logo.png"

Składnia ta oznacza: Przejdź jeden poziom wyżej, przejdź do katalogu images i pokaż logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

W tym przypadku składnia wygląda jak:

src="../../images/logo.png"

Obrazek logo.png znajduje się w tym przypadku dwa poziomy powyżej index.htm w katalogu images.

Zaletą adresów URL względnych jest ich elastyczność. Możecie na przykład rozwijać projekt lokalnie, a następnie skopiować go na "rzeczywisty" serwer. Ścieżki pozostaną niezmienione.