Możesz zadawać sobie pytanie, po co w ogóle optymalizować grafikę? A ja ci powiem, że bardzo prosty powód - szybsze ładowanie strony - powinno Ci wystarczyć :)

No, fajnie optymalizować grafikę. Tylko, o co tak do końca w tym chodzi? Mianowicie o to, aby zrobić tak, żeby przy jak najmniejszej stracie ( najlepiej bez strat ) na jakości zmniejszyć objętość naszych obrazków na stronie, choćby tych, które tworzą naszego layouta.

Jako pierwszą możliwość zmniejszenia objętości obrazka można przyjąć zapisanie go jako jpga lub gifa zamiast bmpa, który jest o wiele ( zazwyczaj ) większy a nie daje przy tym oszałamiających efektów. W znacznej mierze zamiana obrazków na jpg'i powinna mocno uszczuplić nasze obrazki.

Tylko dlaczego wymieniłem 2 rodzaje plików? Zrobiłem tak, bowiem jpg'i bardziej nadają się do obrazów, w których jest dużo kolorów, cieni itp. Natomiast gify lepsze są w zastosowaniu przy prostych obrazkach o niewielkiej liczbie barw z dużymi przestrzeniami w tym samym kolorze, ale nic nam nie szkodzi zapisać obrazka w obu formatach i porównać, prawda? Zastrzegam jednak przed próbą zmiany jedynie rozszerzenia pliku :), to na pewno nic nie da.

W niektórych programach graficznych przy wyżej wspomnianej zamianie możemy wskazać stopień kompresji, co daje nam jeszcze większe możliwości.

Nie jest to oczywiście jedyny sposób. Np. gdy chcemy wstawić na stronie obrazek, powiedzmy 400x300 px a obrazek, który wysyłamy na serva, jest o wymiarach np. 800x600, musimy to skorygować odpowiednimi parametrami taga. A nie lepiej byłoby to zrobić tak: potraktować obrazek jakimś programem graficznym i zmniejszyć go do pożądanych rozmiarów? Wtedy zyskamy podwójnie, bowiem mamy mniejszy rysunek, a zatem szybciej wyślemy go na serwer i nie musimy wstawiać wymiarów obrazka ( jednak zrobienie tego w niczym nie przeszkodzi ).

Załóżmy, że wszelkie dostępne kroki zostały wyczerpane, zaczynamy montować naszego designa ( to posłużę się takim przykładem, bowiem przy robieniu galerii raczej nie można z niego skorzystać ) wklejamy po kolei obrazki, udało nam się poskładać wszystkie części do kupy i jesteśmy zadowoleni. No tak, ale zastanów się, czy nie masz tam gdzieś jednolitych kolorystycznie obszarów. Dlaczego? Jeżeli masz dużo jednolitego koloru, zazwyczaj tło pod menu, zamiast stosować obrazek jako tło, wstaw jedynie kod potrzebnego koloru ( jeżeli go nie znasz możesz skorzystać np. z Paint Shop Pro ). Co do drugiej możliwości, możesz najpierw z tak dużego jednakowego elementu zrobić tło pod wstawioną odpowiednio tabelę. Mam nadzieję, że jak na razie kumasz. Jak nie, to spójrz:


Masz na przykład taki obrazek; jeżeli dałbyś go jako tło dla tabeli i dana tabela byłaby większa od obrazka, to obrazek zostanie skopiowany tak, aby zapełnić całą tabele. Tak samo stanie się z takim obrazkiem, który jest tylko malutkim wycinkiem tego powyżej:


Teraz czas na mały trik, zrobimy dwie tabele, których tłem będą kolejne pliki:

Oczywiście, nie są to jedyne możliwości zmniejszenia wielkości obrazków, ale sądzę, że te kilka przykładów powinno Wam wystarczyć, a jeżeli nie, to pamiętajcie, że zawsze można spytać kogoś, kto się na tym zna i będzie chciał pomóc.

Wszelkie uwagi i polemika mile widziana
Autor: zielony