Polskie Forum Użytkowników GIMP-a

Tutoriale => Edycja fotografii => Wątek zaczęty przez: kaef on 14.12.2010, 20:53:29



Tytuł: Przygotowanie fotografii do publikacji w sieci
Wiadomość wysłana przez: kaef on 14.12.2010, 20:53:29
Przygotowanie fotografii do publikacji w sieci
Poradnik

Opracowanie: KaeF

(http://www.gimpuj.info/gallery/33382_14_12_10_10_17_51_4.jpg)




Wstęp:

TEORIA I FILOZOFIA
Publikacja zdjęcia w Internecie jest jak przekazywanie komuś odbitki papierowego zdjęcia - do oceny, do albumu, na pamiątkę. Gdy od tej strony rozpatrzymy sprawę, będzie łatwiej. Czy dajemy komuś zdjęcie o wielkości 2x2cm? Nie, bo nic na nim nie widać. Czy dajemy komuś zdjęcie o wielkości 50x75cm, największy wydruk jaki można zrobić, podczas gdy ten ktoś posiada ramkę 10x15cm? Nie!

Analogicznie jest w sieci. Nie umieszczamy miniatur, bo nic na nich nie widać. Tak wiem, powiesz, że "można w miniaturkę kliknąć". Oczywiście, że tak. Ale chciałbym zobaczyć jak oglądasz reportaż złożony z dwudziestu zdjęć. Wszystkie miniatury otwierasz w nowych kartach? A może w nowych oknach? Powoduje to tylko i wyłącznie chaos, marnowanie czasu na skakanie pomiędzy okienkami, kartami. Jeśli jesteś świadomym internautą, to na pewno nie raz złapałeś się na tym, że pracujesz w chaosie i masowo wyłączałeś wszystkie niepotrzebne karty, prawda? Właśnie przed tym chcę Cię uchronić. Szanuj swój czas, szanuj czas innych.

PRAKTYKA I MATEMATYKA
A teraz zastanów się... Jeśli Twój monitor ma ustawioną rozdzielczość 1280x800px, to jaki jest sens publikowania zdjęcia prosto z aparatu z matrycą 10Mpx (3872x2592px)?

Tak wygląda stosunek wymiarów zdjęcia 10Mpx do wymiarów monitora o rozdzielczości 1280x800px:

(http://www.gimpuj.info/gallery/33382_14_12_10_9_13_45.png) (http://www.gimpuj.info/)


Powiedz mi, czy chcesz oglądać zdjęcie, czy szczegóły poszczególnego piksela? Zamierzasz objąć wzrokiem całość i zrozumieć temat, co autor chciał przekazać, czy może wolisz przewijać w pionie i w poziomie starając się w wyobraźni złożyć całość do kupy? Ja nie zamierzam oglądać pikseli, niepotrzebne mi tak wielkie zdjęcia. Teraz zapewne powiesz: "przecież mogę kliknąć na zdjęciu i obraz dostosuje się do wielkości okna". Oczywiście, że możesz. Nie ma sprawy. Ale czy nie przyszło Ci nigdy do głowy, że przeglądarka internetowa nie jest programem graficznym? Głównym zadaniem przeglądarki jest interpretacja tekstu i bloków, a nie obsługa grafiki! Przeglądarki nie korzystają z najlepszego algorytmu zmniejszania, tylko najszybszego. W związku z tym od razu widać artefakty - nadmierne wyostrzenie lub odwrotnie - rozmycie, zlewanie i utrata detali, pikseloza. A spróbujmy przeprowadzić sobie małe obliczenia. Jedno zdjęcie 3872x2592px w wysokiej jakości zajmuje średnio 8MB. Wyobraź sobie, że otwierasz stronę, która zawiera 20 reportażowych zdjęć...
Kod:
8MB * 20 = 160MB
Ile danych do ściągnięcia! Ile to trwa? Przyjmijmy download o średniej prędkości 500kb/s:
Kod:
160MB * 1024 = 163840kB
163840kB ÷ 500kb/s = 327,68s
327,68s ÷ 60 = ~5,5min (sic!)
Pięć i pół minuty! Dość czasu, żeby zrobić sobie herbatę i kanapkę. Na te zdjęcia i tak później klikniesz, żeby pokazały się dostosowane do wielkości okna. Swoją drogą, to naprawdę muszą być bardzo dobre zdjęcia, skoro ktoś oczekuje, że użytkownik będzie tyle czasu czekał na ich zobaczenie.

A teraz: zdjęcie zmniejszone do rozmiaru 1280x800 zajmuje średnio 500kB. I nie musisz w nie klikać później, bo już są dostosowane do Twojej rozdzielczości. Otwierasz stronę, która zawiera 20 reportażowych zdjęć:
Kod:
500kb * 20 = 10.000kB
10.000kB ÷ 1024 = ~9,7MB
Dużo mniej. Sto sześćdziesiąt razy mniej! Ile nam zajmie władowanie tych zdjęć?:
Cytuj
10.000kb ÷ 500kb/s = 20s

Teraz chyba widać, które zdjęcia szybciej się załadują, prawda?

FUZJA, czyli teoria w praktyce i filozofia w matematyce
W przygotowaniu zdjęć chodzi o to, żeby zrobić perfekcyjną technicznie odbitkę, która będzie podobała się innym, nie zmuszała do nadmiernego klikania, przewijania okna przeglądarki. Przeglądarka może to zrobić na szybko za Ciebie... Ale Ty masz GIMP-a! Masz władzę nad plikiem!!! Masz dużo większe możliwości utrzymania bardzo wysokiej jakości, detali, aniżeli to co zaoferuje Ci przeglądarka internetowa swoim standardowym zmniejszaniem. Możesz wyostrzyć tylko interesujące fragmenty zdjęcia, a resztę zostawić ładnie rozmytą. Możesz delikatnie zdjęcie odszumić, czego przeglądarka na pewno nie zrobi i nie będzie robiła przez najbliższych kilka lat. Dodatkowo przyczyniasz się do dużo szybszego ładowania zdjęć na stronie, co na pewno zachęci potencjalnych przeglądających Twoją galerię.

W związku z dynamicznym rozwojem i popularnością fotografii cyfrowej, w sieci pojawiły się standardy publikowanych zdjęć. Mają one za zadanie uwolnić internautę od przedstawionych problemów - otwierania nowych okienek, przewijania, skalowania i długiego czasu ładowania wielkich zdjęć. W naszym dziale na sztywno określone są maksymalne rozmiary plików: szerokość: 800px, wysokość: 700px, wielkość: 400kB. Dla zdjęć pionowych wysokość jest dostosowana do możliwości obejrzenia całego zdjęcia w trybie fullscreen [F11], natomiast szerokość dla zdjęć poziomych jest wartością zoptymalizowaną pod kątem szkieletu forum, tj. nie pojawia się poziomy pasek przewijania. Wielkość pliku pozwala na zachowanie możliwie wysokiej jakości.

Poniżej przedstawiłem poszczególne kroki przygotowania zdjęcia do publikacji wg standardów aktualnych w sieci. A więc do dzieła!

Tutorial napisany w wersji GIMP 2.6.8. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



[lp] Zaczynamy

[lp] 1. Wybieramy zdjęcie i otwieramy je w programie GIMP. W tym przypadku nie musimy nic więcej w zdjęciu poprawiać. Jeśli jednak Twoje zdjęcie jest przykładowo krzywo skadrowane, powinieneś je wyprostować. Pamiętaj, aby wszelkie operacje mające na celu poprawienie zdjęcia wykonywać przed skalowaniem.

(http://www.gimpuj.info/gallery/33382_14_12_10_10_17_51_0.png)


[lp] 2. Sprawdzamy treść regulaminu (http://www.gimpuj.info/index.php/topic,48736.msg236619/topicseen.html#msg236619) pod kątem dopuszczalnych rozmiarów publikacji i widzimy:
Cytuj
a) Szerokość - 800px (włącznie z ramką)
b) Wysokość - 700px (włącznie z ramką)
c) Wielkość  - 400kB

Otwieramy Menu -> Obraz -> Skaluj obraz i zmieniamy wartość wysokość na 700px.

(http://www.gimpuj.info/gallery/33382_14_12_10_10_17_51_1.png)


[lp] 3. Zmniejszone zdjęcie zawsze traci ostrość. Wyobraź sobie, że z obrazu 100px musimy zrobić ten sam obraz 50px. Połowa pikseli musi zniknąć, ale obraz musi pozostać ten sam, więc znikają detale. Na szczęście mamy narzędzie, które wyostrzy nasz przeskalowany obraz. Wchodzimy w Filtry -> Uwydatnienie -> Wyostrzanie. W widocznym oknie możemy ustawić wartość wyostrzenia. Im większa, tym bardziej agresywne wyostrzanie. Spróbuj dla testu ustawić kilka różnych wartości z całego zakresu, a na podglądzie zobaczysz jak to działa. Proste, nie? Wracamy do naszego pliku. Najczęściej korzysta się wartości 7-8. Jest to zależne jednak od zdjęcia. Zaczynając od niskiej wartości, np. 3 zwiększaj ją, bacznie obserwując podgląd zdjęcia w newralgicznych miejscach. Takimi czułymi miejscami są m.in. cienie, kontrastowe krawędzie. Jak tylko zobaczysz powstające artefakty, nadmierne wyostrzenie, to zatrzymaj proces i dla pewności zmniejsz o jeden punkt. Podgląd jest oparty na 100% wielkości pliku, a więc jeśli w tym momencie zobaczysz niechciane artefakty, to późniejszy oglądający zapewne też.

Ja ustawiłem Ostrość: 16. Dosyć mocno, ale nie przesadnie.

(http://www.gimpuj.info/gallery/33382_14_12_10_10_17_51_2.png)


Możesz też skorzystać z narzędzia Maska wyostrzająca. Działa ona na zasadzie zwiększania kontrastu na krawędziach, co daje efekt ostrości. Pamiętaj, aby nie przesadzić z wartościami i obserwować jak zmienia się Twój obraz.

Ciekawostka: Jeśli chcesz być dokładny i mieć większy wpływ na końcowy wynik pliku, możesz skorzystać z metody wyostrzania Marca Adamusa (http://www.gimpuj.info/index.php/topic,46423.0.html). Jest ona trochę pracochłonna, ale masz wpływ na ostateczny efekt i wprowadzane w trakcie zmiany.

[lp] 4. Nasz plik ma poprawny rozmiar. Możemy go zapisać. Otwieramy lik -> Zapisz jako...

(http://www.gimpuj.info/gallery/33382_14_12_10_10_17_51_3.png)


Pożądanym formatem zapisu zdjęć jest format JPG. Pozwala on na zmniejszenie wagi pliku i kontrolę ubytku jakości. Postępujemy analogicznie jak w przypadku wyostrzania. Ustawiamy jakość na 100, zaznaczamy opcję Podgląd w oknie obrazu i stopniowo zmniejszamy wartość, obserwując przy tym nasz obraz, aby nie stworzyć niepotrzebnych artefaktów. Jeśli zależy Ci na bardzo wysokiej jakości, zmniejsz jakość tylko do momentu osiągnięcia granicy wielkości ustanowionej w regulaminie (400kB). Poniżej mamy zakładkę Ustawienia zaawansowane. Tam możemy spokojnie odznaczyć opcję Zapisz dane EXIF (chyba, że zależy nam na tym aby inni mogli zobaczyć na jakich ustawieniach i w jakich warunkach zostało zrobione zdjęcie). Odznaczamy też Zapisz miniaturę, jest ona nieprzydatna przy publikacji w sieci, a zajmuje sporo miejsca. Podpróbkowanie mam domyślnie ustawione na 1x1,1x1,1x1 (najlepsza jakość), ponieważ wieki temu wyczytałem, że na innych ustawieniach GIMP może sobie nie radzić z poprawnym zapisem kanału czerwonego. Nie wnikałem w to czy to prawda, a ustawienia pozostały. Moje zdjęcie udało się zmniejszyć do 182kB bez widocznej straty jakości. Polecam takie optymalizowanie, ponieważ każdy kB danych w sieci jest cenny. Po opublikowaniu tysięcznego zdjęcia sam to zauważysz.

[lp] 5. Nasze zdjęcie jest zapisane i gotowe do publikacji. Najpierw musimy plik wrzucić do sieci, aby móc później na różnych forach, serwisach, odwoływać się do jednego tego samego adresu pliku. Mamy do wyboru setki możliwości: możemy wrzucić plik na własny serwer FTP, możemy skorzystać z usług hostingu multimediów, przykładowo www.imageshack.us (http://www.imageshack.us). Ponieważ znajdujemy się na Polskim Forum Użytkowników GIMP-a i mamy możliwość korzystania z galerii obrazów, polecam korzystać z tego sposobu.

[lp] 6. Przejdź na górę strony. Jeśli jesteś zarejestrowany i zalogowany, to zobaczysz skrócony panel użytkownika, kliknij w Zarządzaj galerią

(http://www.gimpuj.info/gallery/33382_14_12_10_11_44_44.png)


Postępuj zgodnie z instrukcjami i dodaj swój obraz do galerii.

[lp] 7. Kliknij miniaturę dodanego obrazu, a następnie Kody dla podlinkowania obrazka. Stamtąd skopiuj adres oznaczony Bezpośredni link. To jest bezpośredni adres Twojego zdjęcia. Teraz możesz je publikować gdzie chcesz.

Aby opublikować na forum, użyj BBCode:
Kod:
[img]twój_bezpośredni_adres[/img]

Aby opublikować na stronie internetowej, użyj HTML:
Kod:
<IMG src="twój_bezpośredni_adres">

[lp] 8. Publikując na forum zwróć uwagę, że gdy wycentrujesz obrazek, wygląda to schludniej, niż standardowo zepchnięty do lewej. Jeśli to możliwe, staraj się umieszczać obraz w znaczniku CENTER.

[lp] Koniec



OD AUTORA:
Tutorial został stworzony na potrzeby działu Fotografia i obróbka zdjęć (http://www.gimpuj.info/index.php#13), w celu rozwiania wszelkich wątpliwości w jaki sposób publikować swoje prace w tym dziale. Proszę nie stawiać zarzutów, że opisuje on podstawowe podstawy, pojęcia blokowe, ponieważ na pewno trafią tu nowi użytkownicy, którym te rady się przydadzą.

Pamiętaj, Moderator też człowiek!

PS: Wykorzystane zdjęcie jest mojego autorstwa, opublikowane na licencji CC-NC-BY-SA.