Zdjęcia są nierozłącznym elementem profesjonalnych stron internetowych. Mogą świetnie uzupełniać treść strony lub artykułu. Prawidłowo dobrana grafika w znaczący sposób przyciąga uwagę Użytkowników i w ten sposób wydłuża czas przebywania ich na witrynie. Skutkiem tego może być sprzedanie produktu lub kontakt. Źle Zagadnienie przygotowania obrazów multimedialnych na witrynę internetową, zapewne musi być dobrze przemyślane. Osoba, która tworzy stronę www lub bloger piszący artykuł powinien mieć podstawową wiedzę na temat opracowania grafiki.

Przygotowanie obrazów dla witryny. 

Estetyczny kontent, przyciągający wzrok. Poprawnie zoptymalizowane zdjęcia dla przeglądarek i urządzeń mobilnych.

Oddanie treści. 1 fotografia znaczy 1000 słów.

Fotografia musi nawiązywać do treści strony, artykułu czy bloga. Najlepiej jakby dokładnie oddawała  istotę publikacji. Następnie powinna być umieszczona we właściwym miejscu kontentu czyli treści. Byle gdzie i byle jakie wstawki pogorszą odbiór pisanego słowa.

Rozmiar obrazu lub fotografii.

Dziś monitory, telewizory oraz wyświetlacze smartfonów Full HD to norma. Coraz rzadziej spotyka się mniejsze ekrany. Jednak takie są również w użyciu i dlatego obrazy multimedialne muszą być zoptymalizowane pod wiele ekranów (rozdzielczości) tych mniejszych również. Przygotowując stronę internetową należy dążyć do kompromisu pomiędzy jakością zdjęcia, a jego objętością lub inaczej wagą podaną w kilobajtach (Kb) lub megabajtach (Mb). Współczesne aparaty i smartfony zapisują fotografie od kilku do kilkudziesięciu Mb! Takie wielkości są dobre do obróbki w profesjonalnych programach graficznych i na wydruki. Na dobrą stronę internetową się nie nadają, ponieważ posiadają ogromną objętość i bardzo spowolniły by wczytywanie witryny internetowej przez przeglądarkę. Nikt nie lubi długo czekać na otwieranie strony, więc prawdopodobnie zrezygnuje i będzie szukał informacji gdzieś indziej. W tej sytuacji są dwie opcje. Twórca strony sam pomniejsza i kompresuje odpowiednio obrazy w programie graficznym lub specjalnej witrynie internetowej lub robi to za niego odpowiedni skrypt wbudowany np. w CMS WordPress. Oczywiście najlepszym sposobem będzie wykonanie samemu takiej optymalizacji fotografii. Czyli ustawieniu odpowiedniej wysokości i szerokości (podanej w pikselach czyli px) oraz skadrowania zdjęcia.

Rozdzielczości zdjęcia na stronę www.

Na tą chwilę nie ma sensu dodawać w większej niż rozdzielczość Full HD czyli 1920 x 1080px. Będą to tła lub fotografie na cały ekran. Jeśli potrzebujemy wstawić zdjęcie w dany obszar treści strony to powinno być ono odpowiednio zmniejszone i wykadrowane np. do rozdzielczości 600x400px. Takie zdjęcie znacznie szybciej zostanie wyświetlone przez przeglądarkę i nie spowoduje zamulenia. Mogą się przydać mniejsze obrazy jak ikony, które wystarczy zoptymalizować do rozdzielczości np. 64x64px. Dodatkowo ważnym elementem wpływającym na wagę obrazu jest ustawienie gęstości pikseli. Dla Internetu jest to 72dpi/cal. 
Poniżej zdjęcie pierścienia w rozdzielczości 1800x1200px, 1200x800px, 600x400px, 200x133px. Zdjęcia w proporcji 3:2. Jak widać różnica jest spora ze względu na wagę i wielkość zdjęć. Szczególnie dla szybkości ładowania strony przez przeglądarkę. Dodam, że fotografia oryginalnie waży 3,73Mb (3466x2311px) i bez sensu było by zawalić takim dużym plikiem serwer.

Format zdjęcia na profesjonalną stronę internetową.

Istnieje wiele formatów zapisu zdjęć. Najbardziej popularne i wykorzystywane w tworzeniu stron internetowych to JPG, PNG, SVG, GIForaz WebP. Formaty grafiki rastrowej z kompresją bezstratną to GIF i coraz bardziej popularny PNG. Grafika rastrowa z kompresją stratną to JPG. Formaty grafiki rastrowej bez kompresji to np: BMP, PSD czy RAW z aparatu fotograficznego. Formaty grafiki wektorowej: SVG lub bardziej znany PSD. Najmniej „ważącymi” plikami i najczęściej wykorzystywanymi do stron www będą te z formatem JPG. Najczęściej używa się go do kompresji zdjęć i fotografii. Zaznaczyć należy tutaj, że im większa kompresja zdjęcia tym gorsza jakość i mniejsza ilość szczegółów. To logiczne. Tutaj przychodzi dylemat jakości i rozdzielczości fotografii lub grafiki. Trzeba znaleźć kompromis. Obrazy JPG nie posiadają przeźroczystości. Obrazy GIF są starym formatem. Pozwalają animować grafikę i wykorzystują przeźroczystość, przeważnie ważą więcej niż JPG i PNG. Format PNG to następca GIFu. Obsługuje stopniowaną przeźroczystość, co jest często wykorzystywane. Zapisane obrazy są wysokiej jakości, ale też więcej zajmują miejsca niż JPG chyba, że posiadają sporo miejsca transparentnego. Używa się go do grafiki z logiem, tekstem i przeźroczystością. Format WebP jest następcą JPG, PNG oraz GIF. Co ważne można go stosować do grafiki statycznej, animowanej oraz poziadającej przeźroczystość. Stosuje kompresję stratną i bezstratną. Pliki zajmują mniej niż JPG czy PNG. Obrazy w formacie SVG służą do przedstawiania dwuwymiarowej grafiki wektorowej. Można w nich wykorzystać animację. Zajmują mało miejsca.

Waga zdjęcia na dobrą i lekką stronę www.

Wpływa bezpośrednio na szybkość ładowania się strony. Ogólnie przyjmuje się, że maksymalnie obraz lub cała strona powinna zajmować do 1 Mb czy 1024Kb. Jeśli chodzi o jeden lub dwa obrazy to nadal za wiele. A jeśli będzie na stronie internetowej kilka takich fotografii? W sumie będzie bardzo dużo zajmowało miejsca a strona będzie wolniej się wczytywać. Większe grafiki nie powinny zajmować więcej niż 500Kb. Obrazy średnie np. o rozdzielczości 800x600px do 200Kb. A małe jak np. 200x133px max. 50Kb. W przypadku wielu zdjęć, np. galerii fotograficznej można użyć miniatur zdjęć. Zmniejszy to znacząco wagę strony i przyspieszy ładowanie. Należy tutaj zastosować zewnętrze hiperłącze do większego obrazu.

Nazwa zdjęcia dla witryny www.

Nie warto wrzucać na stronę zdjęć bez odpowiedniej nazwy. Może okazać się to pomocne dla Użytkownika, a dla wyszukiwarki jest niezmiernie ważne. Algorytmy wyszukiwarek promują poprawnie opisane grafiki multimedialne. Jeśli np. przy fotografii z suknią ślubną będzie napis suknia-slubna.jpg, a nie IMG123456.jpg to dla odbiorcy będzie to znacznie lepiej razem wyglądało i będzie bardziej zrozumiałe. Tekst alternatywny obrazu również jest ważnym elementem. W przypadku kiedy przeglądarka nie pokazuje obrazu, wyświetlony zostaje tzw. tekst alternatywny zdjęcia (atrybut ALT), który umieszczony jest z znaczniku IMG czyli <img src=”suknia-slubna-w-kolorze-bialym.jpg” alt=”Suknia ślubna w kolorze białym”>.

Szybkość ładowania strony www przez przeglądarkę.

To bardzo istotny czynnik wpływający na pozycjonowanie strony w wynikach wyszukiwania. Krótko wczytująca się witryna internetowa ma wyższą lokatę w wyszukiwarkach internetowych w tym w najważniejszej – Google. Ogromne znaczenie ma czynnik szybkości wgrywania się strony na urządzeniach mobilnych.

Powyższe objaśnienie świadczy o tym, iż należy starannie przygotowywać grafikę na ładną stronę www. Zawsze należy zoptymalizować obrazy przed wgraniem ich na serwer. Dla Użytkowników ważne jest aby strona była ładna, czytelna i błyskawicznie się wgrywała. Wyszukiwarka internetowa bierze pod uwagę między innymi szybkość ładowania strony oraz czytelność. Następnie biorąc te i inne czynniki wstawia witrynę w odpowiedniej kolejności do wyników wyszukiwania. Zastosowanie opisanych wskazówek poprawi pozycję strony w rankingach, przyspieszy wczytywanie strony i przede wszystkim nasza strona internetowa będzie estetyczna i czytelna.