Jednym z przełomowych wydarzeń w świecie tworzenia stron internetowych to moment, od którego na stronie www można umieszczać pliki graficzne.Umieszczanie grafiki na stronie internetowej umożliwiło tworzenie ciekawszych witryn od strony wizualnej. Wcześniej strony składały się z tekstu pisanego, stosowano różnego rodzaju listy, które dodawały jako takiego efektu. Z czasem kiedy wprowadzono możliwość umieszczania plików graficznych sieć internetowa była za bardzo obciążona. Strony internetowe stawały się coraz bogatsze w grafikę, co spowodowało konieczność modernizacji usług sieciowych, które po prostu były za mało wydajne. Kiedy uporano się z wydajnością sieci internetowej grafika na stronach stała się chlebem codziennym.
Najczęstszymi formatami jakie umieszczane są na serwer są to: JPG, gif oraz png. W celu umieszczenia grafiki na stronie należy zastosować znacznik <img>. Przykładowy kod html umieszczający plik graficzny na stronie wygląda następująco:
<img src=”adres źródłowy pliku graficznego” alt=”tekst alternatywny w przypadku błędu w wyświetlaniu pliku graficznego”>
Umieszczenie pliku graficznego na stronie jest jednym z prostszych umiejętności więc nie powinno przysparzać większych problemów. Bardzo ważnym elementem podczas umieszczania grafiki na stronie jest atrybut alt. Atrybut ten informuje użytkownika strony internetowej w przypadku niewyświetlenia obrazka, że w tym miejscu występuje plik graficzny. Innym powodem dla którego nie powinno zapominać się o atrybucie alt to użytkownicy wyłączający ładowanie plików graficznych. Jeśli nie umieścimy atrybutu użytkownik z wyłączoną obsługą plików graficznych nie zobaczy po prostu nic. Kolejnym atrybutami, które można umieścić wewnątrz znacznika <img> jest to width oraz height. Należy jednak pamiętać, że nadanie plikowi większych rozmiarów aniżeli ma on w rzeczywistości spowoduje pogorszenie jego jakości podczas wyświetlania. Dobrym rozwiązaniem jest wcześniejsze przygotowanie pliku graficznego. W przypadku kiedy plik nie może zostać zmodyfikowany w aplikacji graficznej dopuszczalnym rozwiązaniem jest zastosowanie samego atrybutu width. Spowoduje to ustalenie szerokości jakiej oczekujemy oraz automatyczne przeskalowanie wysokości obrazka, dzięki temu nie straci on proporcji i będzie wyglądał tak samo jak przed zmniejszeniem bądź powiększeniem. Atrybut src wskazuje na źródło pliku graficznego na serwerze lub dysku lokalnym.
Warto również wspomnieć o nazwach plików graficznych. Nazwy plików graficznych powinny składać się z cyferek i literek w dowolnej kombinacji. Powinno unikać się stosowania polskich znaków językowych oraz spacji. Zamiast spacji lepiej użyć znaku podkreślenia _. Używanie dużych lub małych liter w większości przypadków nie ma znaczenia, ale lepiej i tutaj zwrócić uwagę gdyż systemy unixowe rozróżniają wielkości liter, co nie ma miejsca w systemach z rodziny Windows.
Zupełnie inną kwestią jest dostosowanie plików graficznych przed umieszczeniem ich na stronie internetowej. Jedną z podstawowych zasad jakie powinno się stosować jest odpowiednia kompresja pliku graficznego. Jeżeli plik graficzny, który chcemy umieścić na stronie jest zdjęciem najlepszym rozwiązaniem będzie zapisanie go w formacie JPG. W przypadku kiedy plik graficzny to logo zawierające podstawowe kolory bez różnego rodzaju przejść między kolorami należy zastosować format GIF. Współczesne narzędzia do tworzenia grafiki na potrzeby stron internetowych udostępniają tzw. podgląd wspomagający wybór odpowiedniego formatu kompresji.
Nie stosowanie się do tych podstawowych metod kompresji może spowodować brak zainteresowania ze strony użytkowników wchodzących na stronę (wiadomo przecież, że nikt nie lubi długo czekać) kiedy ładuje się ona minutami.
Używanie czystego htmla do formatowania plików graficznych na stronie ma pewne ograniczenia dlatego warto zastosować kaskadowe arkusze stylów.