Tutorial - Co powinnaś wiedzieć o obrazkach w internecie

Dzisiaj mam dla was bardzo podstawową ale też bardzo przydatną wiedzę odnośnie obrazków/grafik/zdjęć itp rzeczy, które znajdujemy w internecie lub je do internetu wrzucamy. Ten tutorial jest mi potrzebny też jako wprowadzenie dla początkujących gdyż jak tylko znajdę odpowiednią ilość czasu przygotuje pełną instrukcje jak zrobić sobie obrazkowe menu np pod banerem które będzie nam się zmieniało po najechaniu itp bajery. Zachęcam więc do zapoznania się z tym co dla was dzisiaj przygotowałam ^^.

Całość podzieliłam na punkty aby łatwiej można było się w tym odnaleźć.

1. Obrazek - Co to jest?

Nie będę wam tu wklejać formułek i tłumaczyć nie wiadomo czego. Obrazek jaki jest każdy widzi. Obrazkiem czy też grafiką jest zdjęcie, etykieta, baner i tak na prawdę każdy graficzny element  bloga. Na potrzeby tego tutorialu przygotowałam trzy różne grafiki.

Są to trzy najczęściej spotykane rodzaje pliku graficznego z jakimi się spotkacie.

Jaka jest między nimi różnica? 
Z daleka wyglądają praktycznie identycznie jeśli jednak klikniecie na nie aby zobaczyć je w oryginalnym rozmiarze zauważycie różnice.
Obrazek nr 1 to plik z końcówką .jpg . Grafika w takim formacie (czyli posiadająca końcówkę .jpg) jest dobrej jakości i nie zajmuje dużo miejsca (jakiego miejsca wytłumaczę zaraz). Będzie to prawdopodobnie najczęściej spotykany przez was rodzaj grafiki. Od obrazka nr 2 który ma końcówkę .png  różni go niewiele. Oba te formaty są tak samo popularne jednak .png daje nam możliwość uzyskania przezroczystego tła np przy napisach czy tworzonych przeze mnie etykietach (Jest to jednak kosztem zwiększenia przestrzeni zajmowanej przez taki obrazek).

Tłumacze to głównie dlatego, że nie raz spotkałam się z tym że ludzie przez przypadek próbując np dodać napis do etykiety która posiadała przezroczyste tło i była w formacie .png zapisywali zmienioną etykietę jako .jpg przez co tracili tą przezroczystość. Nie byli jednak tego świadomi i nie wiedzieli gdzie popełnili błąd.

Ostatni obrazkiem jest tutaj nr 3 z końcówką .gif . Grafiki w takim formacie potocznie zwane gifami spotyka się głównie przy animacjach. Gify mogą tak jak .png mieć przezroczyste tło i zajmują przy tym bardzo mało miejsca. Jednak jakość ich jest widocznie gorsza. W przypadku kiedy grafika nie jest animowana odradza się więc stosowania końcówki .gif.

2. Magia - czyli jak możemy umieścić obrazek w internecie i czy mamy jakieś limity.

Na pewno, każdy z was umieszcza jakieś obrazki na swoim blogu. Zdjęcia, banery i inne różności. Robicie to tak jak i ja używając bloggera który po prostu każe nam coś wybrać z dysku a potem w  magiczny sposób można tego użyć w poście. Jednak pytanie jest gdzie są trzymane te obrazki i ile ich tam wejdzie. 
Ponieważ blogger jest częścią googli to wrzucane grafiki trafiają do innego wytworu tej cudownej firmy czyli Picasa. Możemy je zobaczyć/usuwać/edytować wchodząc na www.google.pl i wybierając z górnej belki opcje zdjęcia. Może być ona u każdego w innym miejscu jednak zawsze na tej górnej belce.

Podczas pierwszego wejścia na Picase poza koniecznością zalogowania się (na te same dane co do bloggera) możliwe że dostaniemy parę dodatkowych pytań odnośnie naszego imienia/nazwiska. Po wypełnieniu koniecznych danych powinniśmy zobaczyć nasze obrazki posegregowane w katalogi nazwane tak jak nasze blogi jeśli mamy ich parę. Obsługi Picasy nie będę tutaj teraz rozpisywać gdyż wydaje mi się to dość intuicyjne i w dodatku po polsku. Jeśli jednak macie z tym problem to komentarze czekają :). Jeśli będą chętni to i do tego mogę zrobić instrukcję.

Czy możemy na Picasa wrzucać wszystko bez ograniczeń?

Tak i nie :). Możemy wrzucać co tylko zechcemy zarówno przez bloga jak i ręcznie przez Picase jednak mamy limit miejsca. Domyślnie każdy z nas ma do użycia 1024MB miejsca. Nie jest to jakoś specjalnie mało ale znam już ludzi, którym to w ogóle nie wystarcza. Nie musimy się znać na tych wszystkich MB i GB żeby sobie ogarnąć ile miejsca mamy już zajęte. Jeśli wejdziemy na Picase na samym dole zobaczymy taki (nie identyczny :)) napis:

Pokazuje on ile mamy już wykorzystane miejsca w MB i ile to jest w %. Jak widzicie ja zajmuje nie cały 1% a grafiki wrzucam cały czas :). Zawsze możemy też usunąć zbędne grafiki aby zwolnić trochę miejsca. Jeśli jednak to jest dla was za mało zawsze można kliknąć na powiększ przestrzeń. Zobaczymy wtedy jak prezentuje się nasz pakiet i jak możemy go zmienić. Takie powiększenie jednak kosztuje a nie każdy chce inwestować w swoją internetową działalność pieniądze.

Jak inaczej wrzucić obrazek do internetu?
Opcji jest na prawdę dużo. Możemy wkupić miejsce w internecie, czyli tzw. hosting. Mają one różne wielkości i parametry ale kosztują. Od 15 zł do nawet paru tysięcy rocznie.
Najłatwiejszą i darmową opcją jest skorzystanie z serwisów umożliwiających nam wrzucanie obrazków do internetu. Przykładam mogą być:

• http://tinypic.com/index.php - to używam i polecam
• http://imgur.com// - tego nie używam ale też wam polecę ^^
• http://www.imageshack.us/ - tego nie polecam bo psuje jakość obrazków.

Takich stron jest wiele. Są one po angielsku jednak ich obsługa jest kosmicznie prosta (ponownie, jeśli są problemy to czekam na komentarze). Wystarczy wybrać obraz z komputera i kliknąć Upload. Nie musimy nic zmieniać jeśli nie wiemy do czego pozostałe opcje służą. Po wrzuceniu pokaże nam się okno z kodem obrazka. Ważne aby używać kodu pod napisem 'Direct Link' czyli link bezpośredni. Taki link możemy użyć np podczas wrzucania obrazka przez blogger. Wybieramy wtedy ostatnią opcje 'Z adresu URL' (adres URL to jest to samo co link) i w oknie po prawej wklejamy link bezpośredni.

Minusy i plusy czyli zady i walety
PICASA

Obrazki są tam tak długo jak google istnieje. 

 Tylko 1024MB za darmo

WYKUPIONE MIEJSCE (hosting)
 Mamy kontrole nad obrazkami. Są tam tak długo jak opłacamy nasze miejsce
 Musimy płacić

STRONY TYPU TINYPIC.COM
 Nie musimy się rejestrować. Aktualnie to nic nie musimy i możemy wrzucać ile chcemy

 Obrazki gdzieś tam są ale nikt nie wie gdzie i zawsze mogą zniknąć :). Według wszystkowiedzącego internetu obrazki na takich stronach trzymane są różnie. Jeśli się zarejestrujemy (co w większości przypadków jest darmowe) to obrazki nigdy nam nie znikną. Tak samo jeśli są odwiedzane chociaż raz w roku an nie zarejestrowanych kontach. W innych przypadkach po roku wygasają. Zależy to jednak od strony. W regulaminie Tinypic.com pisze ze obrazki na niezarejestrowanych kontach które nie sa odwiedzane przez 90 dni mogą zostać usunięte

 Limity w wielkości obrazka. Jeśli wrzucamy obrazek za duży jest on automatycznie zmniejszany.

3. Kod - czyli jak to się dzieje, że internet wie jak wyświetlić obrazek

Ostatnia w tym tutorialu i chyba najważniejsza rzecz. Skoro wiemy już czego spodziewać się po końcówce pliku z obrazkiem oraz jak go wrzucić do internetu to warto jeszcze dowiedzieć się jak go wyświetlić. Blogger to bardzo mądra rzecz i jak chcemy wrzucić obrazek np na pasku bocznym naszego bloga wystarczy że dodamy gadżet 'zdjęcie'. Co jednak jeśli chcielibyśmy dodać np dwa obrazki obok siebie? Albo tekst z obrazkiem?
Ponieważ gadżet 'tekst' nie ma wbudowanego dodawania obrazków musimy nauczyć się jak internet widzi grafikę. Wszystko to zawarte jest w tej linijce kodu:

<img src="bezpośredni link do obrazka" />

Nie musicie jej zapamiętać, ważne żebyście umieli ją znaleźć i skojarzyć że odnosi się do grafiki.

Do czego się to może przydać?

Dzisiaj przedstawię jedynie prosty przykład, który będzie bazą do innych tutoriali. Wyobraźmy sobie, że chcemy w pasku bocznym bloga umieścić np

 Uwaga! Ważna informacja 

W tym celu musimy utworzyć gadżet tekst lub HTML/JavaScript. Te Gadżety działają wymiennie i odnoszą się do jednej rzeczy. Gdy utworzymy gadżet tekst okno będzie wyglądało tak:

Po kliknięciu w napis 'Edytuj kod HTML' okno będzie wyglądać tak samo ale zamiast napisu 'Edytuj kod HTML' będzie 'Tekst sformatowany'. Będzie to też gazet HTML/JavaScript zamiast zwykłego tekstu. Może się to wydawać skomplikowane ale musimy wyobrazić to sobie jako np telewizor (wiem trochę abstrakcyjnie). Obraz wyświetlany na ekranie to jest nasz gadżet tekst a wszystkie kable umożliwiające wyświetlanie tego konkretnego obrazu na ekranie to jest nasz gadżet HTML/JavaScript. Możemy więc napisać tekst i przełączyć widok żeby zobaczyć jak wygląda to co sprawia że wyświetla się on tak a nie inaczej. W uproszczonej wersji to co będziemy widzieli w gadżecie tekst w ten sposób:

 Uwaga! Ważna informacja 

Po kliknięciu 'Edytuj kod HTML' będzie wyglądało tak

<img src="http://tnij.org/srq9" /> Uwaga! Ważna informacja<img src="http://tnij.org/srq9" />

Gdzie: http://tnij.org/srq9 jest bezpośrednim adresem do obrazka. Można go skopiować i wkleić u góry przeglądarki a pokaże nam się ten obrazek.

Bezpośredni adres możemy zdobyć klikając prawym klawiszem myszy na obrazek i wybierając opcje kopiuj adres URL grafiki.

Możemy przeskakiwać z widoku sformatowanego do kodu HTML i oglądać jakie zmiany wprowadziliśmy. 

Mam nadzieję, że chociaż trochę przydatne będą dla was te informacje. Tak na prawdę temat grafiki w internecie można by opisywać godzinami. Ja chciałam wam tylko przedstawić najważniejsze rzeczy które są potrzebne aby coś tam działać z grafiką na blogu.