Wszystkie prawa zastrzeżone © anianowak.pl
Doradca w projekcie
Google Internetowe Rewolucje
E-mail: a.nowak@internetowerewolucje.pl
Tel: +48 532 852 443
MARKETING INTERNETOWY
Ten blog powstał w oparciu o wspólne doświadczenia moje i przedsiębiorców z woj. lubuskiego.
Znajdziesz tu informacje o narzędziach marketingu internetowego i wpisy o dobrych praktykach w marketingu online.
Chcesz, by Twoja firma była widoczna w internecie? Potrzebujesz planu działania, strony internetowej lub tekstów skrojonych pod SEO?
Cześć, nazywam się Ania Nowak!
Na co dzień pomagam lubuskim firmom skutecznie działać w internecie. Wcześniej robiłam to jako doradca Google Internetowe Rewolucje. Dziś działam na własny rachunek :)
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?
Dołącz do Papugarni
Zyskasz dostęp do moich niepublikowanych treści pomocnych w budowie biznesu online
Zapisz się do newlettera
Jak optymalizować obrazy na stronę internetową
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! :)
Zapisz się do newlettera
Zyskasz dostęp do moich niepublikowanych treści pomocnych w budowie biznesu online
Przeczytaj też:
