05 stycznia 2019
Znasz Aleo.com ? To platforma zakupów dla firm będąca częścią projektu Usługi dla biznesu ING Banku Śląskiego - miejsce do prowadzenia biznesu i działań marketingowych firmy. Nowy rok rozpoczęłam od
27 grudnia 2018
Nie ulega wątpliwości, że wartościowy content stanowi o sile wielu portali i blogów. Trochę mniej osób pamięta o tym, że content nie musi ograniczać się wyłącznie do treści tekstowych. W
29 lipca 2018
Pozyskiwanie linków może wydatnie podnieść pozycję strony w wyszukiwarce (SEO). Chcesz przez link building poprawić widoczność strony w internecie? Sprawdź, jakie masz możliwości. Pozyskiwanie linków - jak to działa? Serfując
14 lipca 2018
  Misja firmy – jedno lub kilka krótkich, lecz kluczowych zdań, które konkretyzują dalekosiężne cele i aspiracje przedsiębiorstwa. Od misji uzależniona jest strategia i kierunek rozwoju firmy, dlatego warto poświęcić jej

Przeczytaj też:

Dodaj komentarz

5 sekund potrzebuje użytkownik sieci, by zainteresować się stroną internetową lub ją odrzucić. Tylko tę krótką chwilę mamy, by przekonać go, że warto z nami pozostać! Niewiele, prawda? Aby zmieścić się w czasie, dodajemy na stronę grafikę, która przekazuje w 1/10 sekundy to, co tekst w minutę. Musimy jednak pamiętać, że grafika obciąża stronę i znacznie opóźnia jej ładowanie. Jak optymalizować obrazy na stronę internetową, by nie stracić czytelników, zanim nas odwiedzą?

 

 

 

Jak optymalizować obrazy - krok po kroku

 

Jaki rozmiar powinny mieć obrazy na stronie internetowej?  W dużym uproszczeniu można powiedzieć, że optymalna wielkość pliku z grafiką to nie więcej niż 200 - 300 KB.

 

A co, jeśli nie chcemy upraszczać? O tym, czy nasze obrazy mają odpowiednią wagę, przekonamy się przeprowadzając testy strony. Zanim jednak przejdziemy do weryfikacji grafiki, popracujmy nad tym, by była ona jak najwyżej oceniona.

 

 

 

Krok I - skalowanie obrazu

 

Złą praktyką jest zamieszczanie na stronie obrazów w ich oryginalnej rozdzielczości. Warto zmniejszyć rozmiary grafiki do tej, która będzie rzeczywiście wyświetlana na ekranach (w przypadku stron responsywnych ładujemy obraz w rozmiarach odpowiednich dla  desktopa, a następnie dostosowujemy go do rozmiarów urządzeń mobilnych ).

 

Jak skalować obraz? Wystarczy obróbka w popularnych programach graficznych: Photoshop, bezpłatny Gimp (polecam), czy bezpłatny program online Pixlr editor (również godny polecenia ze względu na praktyczne filtry i spore możliwości korekty zdjęć). 

 

 

 

Krok II - kompresja obrazów

 

Kompresja w programach do obróbki grafiki często powoduje znaczną utratę jakości obrazu, dlatego dużo korzystniejsze jest zmniejszanie rozmiarów obrazów w kompresorze online - TinyPNG. To darmowe narzędzie zmniejsza pliki w formacie JPEG oraz PNG, pozostawiając jakość obrazów w niemal nienaruszonym stanie.

 

 

 

 

 

Krok III - nazwa pliku, tytuł i  meta opis obrazu

 

Aby obraz był dobrze zoptymalizowany pod wyszukiwarkę graficzną należy nadać odpowiednie opisy:

  • nazwę pliku z obrazem, 

  • tytuł obrazu,

  • opis alt obrazu.

 

Nazwa pliku graficznego

Zamiast wgrywać na stronę plik o nazwie np. IMG_0435.JPG, nadajemy mu logiczną nazwę (najlepiej taką, która zawiera słowo kluczowe), np. pokoje-klasy-biznes.jpg.

 

Tytuł obrazu

Obraz powinien mieć nadany tytuł, który także zawiera słowo kluczowe. Tytuł powinien przybrać inne brzmienie niż nazwa pliku, np. Pokoje klasy biznes z widokiem na morze.

 

Opis alt obrazu

Opis alt jest też inaczej określany jako opis obrazu dla osób niewidomych i niedowidzących. On również zawiera słowo kluczowe, np. Luksusowe pokoje klasy biznes.

 

Cały zapis dotyczący obrazu będzie wyglądał następująco:

<img src="http://nazwadomeny/pokoje-klasy-biznes.jpg" alt="Luksusowe pokoje klasy biznes" title="Pokoje klasy biznes z widokiem na morze"/>.

 

 

 

Krok IV - dane strukturalne

 

Obrazy mogą być również opisane za pomocą danych strukturalnych. W ten sposób można skuteczniej i ciekawiej pozycjonować się w wyszukiwarce, np. dodać logo do opisu firmy. 

 

 

 

Aby uzyskać taki efekt należy odpowiednio oznaczyć grafikę z logo. W tym celu należy dodać do kodu strony taki fragment:

 

  <script type="application/ld+json">   

      {     

      "@context": "http://schema.org",

      "@type": "Organization",

      "url": "http://www.example.com",

      "logo": "http://www.example.com/images/logo.png"

    }

</script>

 

Poprawność kodu możemy sprawdzić na stronie udostępnionej przez Google: 

 https://search.google.com/structured-data/testing-tool

 

 

 

Więcej na ten temat danych strukturalnych można przeczytać na stronie http://schema.org/docs/schemas.html

 

 

Dla użytkowników jednego z najpopularniejszych cms-ów, Wordpressa, mam dobrą wiadomość - do dyspozycji jest kilka wtyczek, które umożliwiają wprowadzenie danych strukturalnych bez znajomości kodu html, np. WP SEO Structured Data Schema. 

 

 

Ważne: dodanie danych strukturalnych do pliku nie gwarantuje wykorzystania ich przez Google. O tym, czy uzyskamy pożądany efekt decydują algorytmy wyszukiwarki.

 

 

 

Test optymalizacji obrazów

 

Kiedy już wdrożymy konieczne zmiany w plikach graficznych, możemy sprawdzić, czy optymalizacja obrazów jest wystarczająca. Jednym z narzędzi, które umożliwia weryfikację jest Page Speed Insights.

 

Pożądany wynik w zakładce "Już zastosowane rozwiązania optymalizujące", pod hasłem "Zoptymalizuj obrazy" to: Grafiki są zoptymalizowane.

 

 

 

 

Inny test to Pingdom:

 

 

 

Dane dotyczące rozmiarów obrazów, przy jednoczesnym dobrym wyniku ładowania strony pozwalają ocenić optymalizację jako udaną.

 

Ostatnie narzędzie, które chcę tu wymienić to Test My Site. Test weryfikuje prędkość ładowania się strony mobilnej dla internetu w technologii 3G. W tym przypadku wynik nie jest już tak satysfakcjonujący. Przy prędkości 6 sek. (ocenianej jako średnią - poprawną (ale bez szału), wskazania do poprawy to m.in.: optymalizacja obrazów. 

 

 

 

A więc... Do pracy!  :)

 

 

 

Pozycjonowanie lokalne Ania Nowak dla Aleo
01 maja 2018
Jak optymalizować obrazy na stronę internetową

Cześć, nazywam się Ania Nowak! 

 

Pomagam lubuskim firmom 

skutecznie działać w internecie.

Ten blog powstał w oparciu o nasze wspólne doświadczenia.

 

Znajdziesz tu informacje o narzędziach marketingu internetowego i wpisy o dobrych praktykach w marketingu online. 

 

Prowadzisz przedsiębiorstwo na terenie woj. lubuskiego? Chcesz, by Twoja firma była dobrze widoczna w internecie?

 

Zapisz się do projektu

Google Internetowe Rewolucje dla Firm

i działajmy!

 

Skontaktuj się

ze mną

Image by rawpixel.com

 

Jeśli szukasz zdjęć lub grafik na swoją stronę internetową, zajrzyj na rawpixel.com.

 

Spora baza darmowych obrazów.

 

Polecam :)

Jeśli chcesz tworzyć samodzielnie strony internetowe bez kodowania, to koniecznie zapoznaj się z aplikacją WebWave.

 

W WebWave  stworzysz stronę internetową z dokładnością co do 1px, na zasadzie drag&drop, czyli przeciągnij i upuść.

 

Masz dostęp do bezpłatnej bazy zdjęć, możesz tworzyć wiele interesujących animacji, dzięki temu twoja strona będzie żyła.

 

Aby dołączyć do "wyznawców" Webwave, kliknij w poniższy link:

Webwave.com

Wszystko o pozycjonowaniu lokalnym

w moim gościnnym wpisie na

https://aleo.com/pl/blog/pozycjonowanie-lokalne-w-google

anianowak.pl

 

E-mail: biuro@anianowak.pl

Tel: +48 512 264 372

 

Doradca w projekcie

Google Internetowe Rewolucje

 

E-mail: a.nowak@internetowerewolucje.pl

Tel: +48 532 852 443

Wizytówka QR Code

kod QR Ania Nowak kontakt

Wszystkie prawa zastrzeżone © anianowak.pl

Stronę stworzono wykorzystując cms WebWave

anianowak.pl

Prezent do pobrania content planner

Pobierz narzędzia!