Zapisz się!
Zapisz się!
Udało się!
Podaj e-mail!

Blog

Tu dowiesz się, jak zrobić stronę internetową.

Chcesz być na bieżąco?

Tworząc i prowadząc stronę internetową powinniśmy przykładać uwagę do wszystkich elementów - od szablonu i funkcjonalności, po zawartość. Nie mamy tutaj na myśli tylko tekstu dostosowanego dla czytelników i wyszukiwarek, ale także i zdjęć, które dzisiaj są zamieszczane niemal na wszystkich witrynach. W poniższym tekście zebraliśmy kilka najważniejszych uwag dotyczących optymalizacji zdjęć na stronie www.

Nie wszyscy wiedzą, że złe grafiki mogą negatywnie pływać na naszą stronę internetową powodując jej powolne ładowanie zniechęcając tym samym odwiedzających. Dlatego ważne jest by prawidłowo formatować i optymalizować zdjęcia, które dodajemy. Najważniejsze czynniki, na które powinniśmy zwrócić uwagę, to rozmiar, format i nazwa. Przeczytaj artykuł i dowiedz się jak zrobić stronę internetową o optymalnej szybkości wczytywania.

 

Jak duże powinny być zdjęcia na stronie internetowej?

Wielkość plików graficznych może być bardzo różna i niewątpliwie jest to najważniejszy czynnik wpływający na szybkość ładowania się naszej strony internetowej. Zaawansowane aparaty czy kamery cyfrowe mogą zapisywać obrazy w bardzo dużej rozdzielczości, co przekłada się na znaczną wagę plików, nawet po kilka megabajtów. Powinniśmy jednak dążyć do tego by jak najbardziej je uszczuplić, bowiem grafiki przesyłane na naszą stronę nie powinny przekraczać:

  • 120 kilobajtów dla dużych,

  • 60 kilobajtów dla średnich,

  • 30 kilobajtów dla małych rozdzielczości.

 

O tym jak ważna jest szybkość ładowania się strony www przeczytacie w tekście „Szybkość ma znaczenie czyli jak długo ładuje się moja strona”.

Dołącz do 100 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania

Zbuduj własną stronę www. Zacznij od pustego projektu lub wybierz
jeden z kilkudziesięciu darmowych szablonów. 


STWÓRZ SWOJĄ STRONĘ ZA DARMO 

Najpopularniejsze formaty zdjęć

Do najważniejszych typów plików graficznych zaliczamy JPG, PNG oraz GIF, które mają swoje wady i zalety i powinny być wykorzystywane w różnych sytuacjach. Programiści i projektanci bardzo często błędnie korzystają tylko z jednego rozszerzenia na stronie internetowej. Przy wyborze formatu dla obrazu należy pamiętać do czego nasz plik będzie wykorzystywany i jakie będzie miał zastosowanie.

 

.jpg

Pliki JPG (znane także jako JPEG) są najpopularniejszymi formatami używanymi w Internecie i powszechnie wykorzystuje się je dla zdjęć produktów, fotografii czy banerów. Nadają się one do takich prac, ponieważ obsługują bardzo dużą paletę kolorów. Pliki JPG możemy zapisywać w wysokiej, jak i niskiej jakości, co umożliwia nam balans między wagą, a jakością. Istnieje jednak możliwość kompresji JPGa w stosunku 10:1 bez znacznej utraty jakości obrazu.

 

.png

Najważniejszym aspektem PNG jest możliwość przezroczystego tła, którego nie uzyskamy za pomocą JPG. Rozszerzenie PNG wykorzystywane jest głównie dla wektorów i obrazów zawierających tekst lub ilustracje bez gradientów lub tekstur. Umożliwia również bezstratną kompresję, co oznacza, że dane nie są utracone, gdy plik jest skompresowany.

 

.gif

Chociaż GIF stracił już taką popularność w Internecie jaką miał kiedyś, nadal bywa wykorzystywany do zdjęć o małej różnorodności kolorów. Format ten może zawierać więcej niż jedną klatkę dlatego najczęściej używany jest do krótkich animacji.

Jest również format .svg, o którym przeczytasz więcej tu.

Darmowe narzędzia do optymalizacji zdjęć

Istnieje wiele narzędzi, płatnych i bezpłatnych, dzięki którym zoptymalizujemy swoje zdjęcia. Poniżej prezentujemy naszym zdaniem bardzo dobre i co najważniejsze darmowe rozwiązania.

 

TinyPNG - tinypng.com

Chociaż nazwa może być nieco myląca, TinyPNG umożliwia optymalizację zarówno plików .png jak i .jpg. Wystarczy załadować pliki z naszego dysku, a aplikacja automatycznie skompresuje nasze zdjęcia. Możemy jednorazowo dodać do 20 zdjęć o wadze do 5 mb każdy.

 

Optimizilla - optimizilla.com

Optimizilla, podobnie jak poprzednie narzędzie, pozwala na dodanie na raz kilku obrazów PNG i JPG. Po przesłaniu plików z naszego dysku i automatycznej optymalizacji, możemy pobrać nowe pliki. Aplikacja udostępnia użytkownikom podgląd oryginalnego obrazu i jego nowej skompresowanej wersji, dzięki czemu możemy sprawdzić nie utraciliśmy zbyt dużo na jakości.

 

Ezgif - ezgif.com

W przypadku plików GIF polecamy Ezgif, które również umożliwia nam na kompresję PNG i JPG.

tinypng - optymalizacja zdjęć na stronie

 

Zdjęcia na stronie www, a SEO

Jeśli już jesteśmy przy temacie osadzania zdjęć na stronie internetowej, warto dodać kilka wskazówek dla SEO. Niewiele osób zdaje sobie sprawę, że poprawnie nazwane i opisane zdjęcia mogą poprawić naszą pozycję w wyszukiwarkach. Na co powinniśmy zwrócić uwagę?

Większość osób nie dba o nazewnictwo swoich plików, dlatego wiele z nich nazywa się „Zdjecie1” czy „123”, a to błąd. Roboty Google skanując stronę internetową mogą przeczytać tekst, ale nie widzą obrazów. Nazwa naszego pliku zawiera informacje o zawartości obrazka, by Google mógł prawidłowo go interpretować, dlatego powinniśmy nazwać nasz plik np. „palac-kultury.jpg” zamiast „DSC123.jpg”. Ze względu na spójność nazwy powinniśmy korzystać z małych liter i cyfer od 0 do 9, a także unikać spacji i interpunkcji. Zaleca się również korzystanie z myślników zamiast podkreślników.

Z tego samego powodu powinniśmy uzupełniać tagi alt, zwane także alternatywnym tekstem. Nie są one widoczne dla przeciętnego użytkownika naszej strony, ale dają wyszukiwarkom podstawowe informacje o naszym obrazie. Umieszczając plik graficzny w witrynie powinniśmy także uzupełnić tekst alternatywny frazą opisującą zdjęcie, najlepiej z użyciem słowa kluczowego.

Alternatywny tekst zwiększa również dostępność naszej witryny i pozwala niewidomym osobom poruszać się po naszej witrynie za pomocą specjalnego oprogramowania. Więcej o stworzeniu strony www o wysokim stopniu dostępności przeczytacie w tym miejscu.

Nazwy plików i tekst alternatywny są szczególnie istotne dla pozycjonowania w przypadku stron ecommerce zawierających produkty. Jeżeli istnieje możliwość, powinniśmy dodać także podpis czy nagłówek dla naszych zdjęć, bowiem ludzie zwracają na nie uwagę.

 

Podsumowanie

Optymalizacja zdjęć jest jednym z najprostszych czynników pozwalających na zwiększenie szybkości ładowania się naszej strony internetowej. Jak dodamy do tego poprawne nazewnictwo plików i ich opisy, możemy znacznie wpłynąć na user experience i pozycję w wyszukiwarkach. Jeżeli macie głosy, że Wasza strona ładuje się zbyt długo, powinniście skorzystać z naszych podpowiedzi.

 

Czy zawsze wrzucacie skompresowane pliki graficzne na Waszą stronę? Czy dbacie o odpowiednie nazwy plików i uzupełniacie alt tagi? Zapraszamy do dyskusji w komentarzach.

 

Chcesz dowiedzieć się więcej o optymalizacji zdjęć na stronie www? Koniecznie przeczytaj te teksty:

Autor: Paweł Krzywina

 

Co to SEO i co to SEM
28 września 2017

Blog

Darmowe szkolenie z tworzenia stron internetowych 

WYPRÓBUJ ZA DARMO

Wypróbuj nasz kreator stron internetowych i uzyskaj dostęp do darmowego szkolenia. Po rejestracji wyślemy Ci e-maila z linkiem do zapisu na szkolenie on-line. Na godzinnym szkoleniu dowiesz się jak samodzielnie stworzyć swoją stronę internetową!

Jak zoptymalizować zdjęcia na stronie internetowej?

 

Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona internetowa za darmo? To łatwe - zacznij już teraz.

Panel webmastera

KONTAKT

contact@webwavecms.com
tel. +48 731 395 898

KREATOR

OFERTA

DLA KLIENTÓW

WEBWAVE

MATERIAŁY

Ta strona została stworzona w całości przy użyciu naszego kreatora stron www WebWave. Na tej stronie wykorzystujemy ciasteczka. Dowiedz się więcej.

PL

EN

POZNAJ NAS BLIŻEJ W SIECI

Zacznij Teraz

RO

Porozmawiaj z nami na czacie.

ZACZNIJ TERAZ

PANEL WEBMASTERA

Logowanie