Jak zamieszczamy grafikę:
<img src="gif/zdjecie.gif" alt="Zdjęcie autorki strony" height="36" width="201" align=”right” hspace="45" vspace="20" border="2">

gdzie:
src: ścieżka dostępu do pliku graficznego
alt: opis zawartości
height: wysokość ilustracji
width: szerokość ilustracji
align: umiejscowienie ilustracji – right (po prawej), left (po lewej), center (na środku)
hspace (horizontal space): odległość (w poziomie) między grafiką a otaczającym ją tekstem
vspace (vertical space): odległość (w pionie) między grafiką a otaczającym ją tekstem
border: grubość ramki

• zawsze używaj podpisu obrazka ALT=”moje zdjęcie”. Dzięki temu przed załadowaniem grafiki użytkownik będzie wiedział co ilustracja przedstawia. Szczególnie istotne jest to wtedy, gdy stosujesz graficzne menu ponieważ nie zmuszasz nikogo do czekania aż załaduje się ono do końca – użytkownik może od razu przejść na stronę, która go interesuje ponieważ wie jaki ma wybór
• zawsze wpisuj rozmiary obrazka czyli HEIGHT (wysokość) i WIDTH (szerokość) podawaną w pikselach. Dzięki temu przeglądarka wie ile dana grafika zajmie miejsca na stronie i pozostałe elementy zostaną od razu prawidłowo rozmieszczone, a cała strona będzie szybciej widoczna.
• nie umieszczaj wiecej niż 40 Kb grafiki na głównej stronie oraz 30 Kb na pozostałych stronach
• jeżeli zamieszczasz kolekcję zdjęć, zawsze ostrzeż oglądającego, że strona może się długo ładować. Dodatkowo w tym przypadku dobrze jest zamieścić miniaturki zdjęć oraz odnośniki do pełnowymiarowych fotografii – dzieki temu użytkownik zorientuje się co zdjęcie przedstawia i jeżeli będzie chciał je oglądnąć to sam o tym zadecyduje (zdając sobie sprawę, że zaczekanie na załadowanie się grafiki chwilę potrwa).
• tam gdzie jest to możliwe używaj tekstu zamiast grafiki, dzięki temu strona będzie się szybciej ładować
• używaj kolorow z rozwagą – staraj się, aby strona była stonowana, nadużywanie kolorów męczy wzrok oglądającego i rozprasza jego uwagę
• nigdy nie zamieszczaj grafiki, ktora znajduje się na innym serwerze
• postaraj się powstrzymać od używania animacji oraz map graficznych,
• nie stosuj tła, które ma dużą objętość – staraj się, by wielkość pliku nie była większa niż 5Kb
• nie stosuj tła, na którym tekst będzie nieczytelny (kolorowe, graficzne tła) – tekst i tło powinny ze sobą kontrastować (jasny tekst na ciemnym tle i vice versa)
• postaraj się używać tych samych ilustracji na wszystkich stronach, gdyż wtedy przeglądarka ściąga je na twardy dysk i kolejne strony szybciej się ładują
• jeżeli używasz ikonek postaraj się, by były one czytelne
• nie używaj niepotrzebnych graficznych ozdobników
• w miarę możliwości stosuj bezpieczną paletę 216 kolorów
• pamietaj o prawach autorskich – uszanuj czyjąś pracę – nie kopiuj pomysłów ani grafiki

Na internecie funkcjonują dwa podstawowe formaty graficzne GIF (Graphic Interchange Format) oraz JPG (Joint Photographic Expert Group). Poniżej przedstawiam w skrócie kiedy, który z nich należy stosować:

Zastosowanie formatu GIF:

• grafika o wyraźnie zaznaczonych (dobrze konstrastujących) krawędziach
• grafika o dużych powierzchniach o tym samym kolorze
• napisy (szczególnie z cieniem, gdzie można zastosować format przezroczystego GIF’a)
• grafika z przezroczystym tłem
• proste obrazki
• ikony, znaczki nawigacyjne
• znaki firmowe
• pomniejszone fotografie (miniaturki)

Format GIF może zapisać maksymalnie 256 kolorów, za to jego kompresja jest bezstratna.

Zastosowanie formatu JPG:

• fotografie oraz ilustracje wielobarwne, szczególnie te, które charakteryzują się subtelnym przechodzeniem kolorów.
• grafika o dużej palecie kolorów, ponieważ możemy zastosować pełną gamę kolorów
• JPG dużo lepiej niż GIF nadaje się do zapisu ilustracji czarno-białych

Format JPG może zapisać 16 milionów kolorów, gdy jednak go skompresujemy bezpowrotnie stracimy pierwotne dane.

Zawsze używaj programu graficznego do zmieniania rozmiarów ilustracji, nie zaś parametrów hight i width, ponieważ w ten sposób nie zmniejszysz jej objętości. Ilustracja zajmująca 25 Kb z parametrami hight=2 i width=2 nadal będzie mieć 25 Kb i ładować się tak samo długo.

Stosuj skompresowaną grafikę – dobry program do kompresji potrafi zmniejszyć objętość odbrazka nawet o 80% z niedużą stratą jego jakości.

Tworząc grafikę w programie graficznym zawsze zachowuj sobie kopię w oryginalnym, bezstratnym formacie – ułatwi Ci to jej modyfikację. Jeżeli używasz programu, w którym masz do dyspozycji warstwy -nigdy nie “spłaszczaj” (flatten image) obrazka przed jego zapisaniem

Nigdy nie zmieniaj formatu graficznego - nie zapisuj GIFa jako JPG i vice versa.

Agnieszka Richter

Artykuł został napisany dla Optimus Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu jest zabronione bez zgody właściciela.