Jeśli chcesz przeczytać artykuły z innej kategorii, kliknij w wybrane przez siebie pole:
Jak zrobić stronę internetową?
Obierz zniżkę - 30%
w WebWave
Pierwsza strona internetowa w historii wyglądała dosyć surowo. To był sam tekst i linki. Chociaż spełniała swoją rolę, to dziś taka strona w przeglądarce sugeruje, że coś poszło nie tak. Bo nie ma żadnej grafiki. W czasach, gdy internet był bardzo wolny (pamiętasz modemy?), najszybciej wczytywał się tekst. Więc żeby strona jakoś działała, był na niej tylko on. Zdjęcia, ikony, filmy? Zapomnij. Tylko linki, tekst i… tyle! Zobacz jak dużo się zmieniło!
Od tamtego czasu internet poszedł mocno do przodu i teraz każda strona potrzebuje jakiejś grafiki. Dlatego warto je dobrze dobrać do projektu. Muszą pasować do strony (czyli jednorożce na tęczy na stronie zakładu kamieniarskiego mogą być trochę zbyt odważne), a do tego być ładne. O ile to drugie jest względne, to spójność grafik i strony jest bardzo ważna z perspektywy użytkownika. Więc warto o tym pamiętać.
Dobrze jeśli są w odpowiedniej rozdzielczości, czyli nie widać na nich pikseli. Dobrze też nie przesadzić w drugą stronę i nie wrzucać na stronę wielkich zdjęć, które zajmują bardzo dużo miejsca. Nie powinno Cię dziwić, że grafiki większe niż 1920x1280 rzadko pojawiają się w internecie.
Większość ekranów jest dalej mniejsza, a nieoficjalnym standardem szerokości strony na komputerach jest 1200 pikseli, to okazuje się że nawet 1200 x 820 to dużo. Tak, mówimy o internecie, nie o druku zdjęć ;). Pamiętaj o tym. Do tego dochodzi Mobile First, czyli zmiana w wyszukiwaniu, która będzie faworyzowała szybsze i lżejsze strony. Czyli też… strony z mniejszymi grafikami.
Dlaczego rozmiar zdjęć jest tak ważny? Duże zdjęcia powoli się ładują, nawet na bardzo szybkich łączach. Szybsze strony lepiej się pozycjonują, mniej wkurzają użytkowników, więc… chyba lepiej iść tą drogą. Jeśli masz grafiki, których potrzebujesz na stronie, to pamiętaj, żeby nie przesadzać z jakością. 1200 pikseli szerokości wystarczy w 99% przypadków. Nawet na sliderach. Ale nie zawsze piksele są tak ważne. Bo jest jeszcze format.
Pst – nie ma takiego. No prawie nie ma, ale raczej nie ma niż jest ;). Ale po kolei.
Pewnie wiesz, że jest kilka formatów zapisu zdjęć. Najpopularniejsze obecnie to .png, .jpg i .gif. Najczęściej spotkasz je w internecie i można powiedzieć, że są standardem. Za optymalny uchodzi .jpg, bo pozwala bardzo zmniejszyć wagę grafik (głównie dzięki zmianom jakości grafiki i stopnia kompresji). Pliki .png mogą nie mieć tła (dlatego dobrze sprawdzają się do zapisywania loga), a .gif – mogą być ruchome.
W internecie im mniejszy plik tym lepiej, więc .jpg jest najpopularniejszym formatem. Nie ma co się dziwić, bo to naprawdę fajny i praktyczny format. Nie jest idealny, ale ma więcej zalet niż wad. Jednak w internecie przewyższa go inny format. Też – nie bez wad.
Chodzi oczywiście o .svg. Czym jest format .svg? To grafika wektorowa w zgrabnym opakowaniu. Ten format nie zapisuje obrazu jako pikseli (nie ma tego ograniczenia, że w pewnym momencie widać piksele, a nie okrąg), ale jako krzywe, czyli ciągi cyfr, które odczytuje przeglądarka i pokazuje grafikę. Co oznacza, że nie widać żadnych pikseli. A do tego pliki .svg zajmują niewiele miejsca. Gdyby nie to, że nie da się zapisać w tym formacie zdjęć, to byłby to ideał. Ale i tak sprawdza się świetnie do wrzucania na stronę ilustracji, wzorów (na przykład tła) i na loga. Do tego rośnie jego popularność – w dużej mierze dzięki temu, że faktycznie sprawdza się w internecie.
Innymi słowy: potrzebujesz grafik bez tła lub jednokolorowych elementów o konkretnej wielkości? Format .png jest dla Ciebie. Wrzucasz zdjęcia w większej rozdzielczości? Pamiętaj o formacie .jpg i możliwości zmniejszenia jego wielkości. Lubi grafiki z biegającymi kotami lub pokrewne? .gif jest tym, czego potrzebujesz. Szybki format graficzny do internetu, ale raczej nie do zdjęć? No to będzie .svg. Tak to wygląda w skrócie :).
Wbrew pozorom to ma dużo sensu. Roboty Google’a lubią strony, które szybko się ładują. Im więcej grafik w wysokiej rozdzielczości, tym strona działa wolniej, bo przeglądarka musi pobrać te dane. Więc to całe „może nieco mniejszą grafikę” na sporo sensu.
Zwłaszcza że to nie wszystko. Grafiki muszą mieć dodane atrybuty, czyli nazwę i opis. Bez nich roboty Google’a nie będą wiedziały, czy na zdjęciu jest pingwin królewski czy kolczatka australijska. Pamiętaj też o zapisywaniu grafik nie jako asdkjlsda.jpg, ale w sposób bardziej… przyjazny przeglądarkom. Nawet „baner.jpg” jest OK. Więc – czemu nie zrobić tych kilku rzeczy, które mogą znacznie poprawić pozycjonowanie Twojej strony?
No, to grząski temat. Musisz mieć prawa do grafik, które umieszczasz na stronie. Po prostu. A kiedy umieszczanie zdjęcia na stronie to kradzież? Prawie w każej innej sytuacji. Jest w polskim prawie coś, co nazywa się dozwolonym użytkiem, ale to na tyle grząski temat, że lepiej nie bawić się w takie „użytkowanie”. Wszelkie wrzucanie rzeczy na zasadzie „źródło Pinterest” można włożyć między bajki.
Więc jeśli nie wiesz, czy możesz wykorzystać tę grafikę, to po prostu jej nie wykorzystuj. Nie chodzi tylko o kłopoty prawne lub kradzież czyjejś własności intelektualnej (bo tak prawo nazywa publikowanie grafik, do których nie ma się prawa). Po prostu to nie fair. Więc lepiej uważaj na to i… zajrzyj do drugiej części, w której zobaczysz skąd brać zdjęcia i dlaczego akurat stamtąd warto ;).