Wikipedia:Uwagi o wstawianiu obrazków
Z Wikipedii
| :: Formatowanie artykułów | ||||||||
|
|
||||||||
| :: Ilustrowanie - podstawy | ||||||||
|
||||||||
| :: Kwestie administracyjne | ||||||||
| :: Prawo | ||||||||
| :: Formaty plików | ||||||||
|
||||||||
| :: Ilustrowanie - projekt |
Ze względu na to, że czasami zdarzają się różne problemy przy wstawianiu obrazka do artykułu, polecamy zapoznanie się z poniższymi uwagami:
Spis treści |
[edytuj] Podstawy
W celu umieszczenia własnego obrazka należy go przesłać na serwer Wikimedia Commons lub ew. na serwer Wikipedii za pomocą opcji z bocznego menu (Prześlij plik). Preferowane jest przesyłanie na Commons, ponieważ i tak wszystkie grafiki są tam z Wikipedii przesyłane. Szczegółowa instrukcja znajduje się w artykule Wikipedia:Instrukcja przesyłania plików graficznych. Przed wyprodukowaniem lub przesłaniem własnego obrazka warto jednak sprawdzić, czy podobny obrazek już nie istnieje na serwerze Commons lub samej Wikipedii. Wysyłanie plików do Commons ma tę zaletę, że będą z niego mogli też skorzystać wikipedyści z innych mutacji językowych Wikipedii.
[edytuj] Umieszczanie grafik na stronie
Następnie, niezależnie od tego, czy obrazek został przesłany na Commons czy do naszej Wikipedii można go zlinkować w tekście artykułu, wpisując:
[[Grafika:Nazwa pliku]]
Do tak linkowanych obrazków można dodawać komentarz, który pokaże się w "chmurce" w momencie najechania znacznikiem myszki na ten obrazek:
[[Grafika:Redrose.jpg|Kwiat róży]]
Używanie takich komentarzy jest ogólnie dobrym obyczajem. Zastosowanie powyższego kodu da taki efekt:
UWAGA: Jeżeli jednak przed słowem Grafika dasz dwukropek, obrazek nie będzie się wyświetlać, a pojawi się jedynie link do strony tej grafiki: Kwiat róży
Preferowane w Wikiepdii jest jednak stosowanie kodu, który pozwoli na to, by obrazek znajdował się przy tekście, który go opływa, był podpisany - nie tylko, gdy się na niego najedzie myszką i żeby jego wielkość była odpowiednia w stosunku do tekstu. Oczywiście w tekście, który znajduje się pod grafika mogą znajdowac się linki do innych artykułów. Poniżej szerzej opisane zostały problemy ze stosowaniem kodu przy wstawianiu grafiki.
Żeby grafika wywołana została z podpisem, w takim rozmiarze w jakim jest po prawej stronie, użyty został bardziej rozbudowany kod:
[[Grafika:Redrose.jpg|thumb|Kwiat [[Róża (krzew)|róży]]]]
Poniżej szerzej jest on opisany. Teraz tylko krótka charakterystyka, by łatwiej było zapamiętać:
- [[ ]] klamry linku sa stosowane tak samo jak w przypadku linków do artykułów.
- Grafika: (lub Image:) - odnosi się do przestrzeni nazw, w której są grafiki, to wyrażenie automatycznie jest dodawane do nazwy grafiki, gdy jest ona ładowana do Wikipedii (Grafika:) lub do Commons (Image:).
- Redrose - to nazwa grafiki, ze względu na to, że grafika jest załadowana na commons, jest ona w języku angielskim - szerzej o tym, jak należy nazywać grafiki: commons:Commons:Języki
- .jpg - JPG to format pliku, w tym przypadku format, w jakim zostało zapisane zdjęcie. Ten format stosujemy w przypadku przesyłania zdjęć. Zobacz więcej na temat używanych formatów.
- |thumb - po "|" użyte zostało wyrażenie "thumb" - dzięki niemu tworzy się wokół grafiki ramka oraz możliwe jest umieszczanie podpisu pod obrazkiem. Więcej na ten temat poniżej.
- |Kwiat [[Róża (krzew)|róży]] - na końcu kodu znajduje się opis zdjęcia, który pojawia się w ramce pod grafiką. dobrze jest pamiętać, że jeśli linkowany jest ostatni wyraz należy go zamknąć klamrą oraz grafikę, stąd w tym przypadku cztery klamry na końcu kodu.
[edytuj] Ramka i podpis pod obrazkiem (thumb, frame)
[edytuj] "Thumb" i automatyczne skalowanie
Przy stosowaniu w linkach opcji "thumb" obrazek jest automatycznie zmniejszany do 150 px. Wielkość tą można zmienić w preferencjach, od 120 px do 300 px, dzięki czemu każdy może dostosować wielkość grafiki do używanej wielkości okna przeglądarki. Po kliknięciu na grafikę można zobaczyć jej pełną wersją. Poza tym opcja ta powoduje, że obrazek pojawia się automatycznie po prawej, a nie po lewej stronie tekstu. Dzięki tej opcji można też obrazek podpisać.
Przykładowy kod:
[[Grafika:Trex1.png|thumb|Dinozaur]]
co da taki efekt, jak w przypadku grafiki po prawej stronie:
Jak widać przy okazji tego przykładu w linkach wyświetlających obrazki można z sobą mieszać kilka opcji na raz - co często daje ciekawe rezultaty, które inaczej trzeba by osiągać przez dość złożony kod HTML.
[edytuj] Obrazki z ramką bez skalowania (frame)
Ramkę wokół obrazka podobną jak w przypadku opcji "thumb" można uzyskać stosując opcję "frame". W tym przypadku także widoczny będzie podpis po obrazkiem.
[[Grafika:Trex1.png|frame|Dinozaur]]
co da efekt taki jak na ilustracji obok:
Jest to rozwiązanie wygodniejsze przy ilustrowaniu artykułów małymi obrazkami, których nie trzeba zmniejszać lub po zmniejszeniu tracą na jakości.
Jednakże ze względu na to, że można skalowac także obrazki za pomoca ustalania ich wielkości w pikselach, o czym niżej, parametr "frame" jest rzadko używany. Wynika to także z tego, że grafiki ładowane do commons mają coraz większe rozdzielczości i uzywanie tej opcji w wiekszości przypadków powodowałoby, że obrazki "zalewałyby" cały ekran.
[edytuj] Obrazki o zadanej wielkości z ramką
Możliwa jest zmiana wielkości obrazka i pozostawienia go w ramce. Stosuje się tu również opcję "thumb" i dodaje żądaną wielkość.
Przykładowy kod (środkowy ma automatyczną wielkość 150px lub inną, w zalezności od wybranych preferencji):
[[Grafika:Tatra mountains western side 2.jpg|thumb|75px|Tatry Zachodnie]] [[Grafika:Tatra mountains western side 2.jpg|thumb|Tatry Zachodnie]] [[Grafika:Tatra mountains western side 2.jpg|thumb|300px|Tatry Zachodnie]]
co daje taki efekt, jak w przypadku grafik zamieszczonych obok.
Uwaga! Nie ma możliwości powiększania obrazków ponad ich oryginalną wielkość.
Obrazki z ramką układają się jeden pod drugim w po prawej stronie, a nie jak w przypadku grafik bez ramki, po lewej.
W przypadku umieszczania grafik w tekście należy zwrócić uwagę na to, by rozmiar grafik był do siebie przystający. Inaczej tworzyć będą się schodki, jak w przypadku tu prezentowanym.
Dobrze jest dostosować wielkość grafik do grafiki, która jest w wersji oryginalnej z najmniejszą rozdzielczością, bo nie da się jej rozciągnąć.
Jeżeli wielkość grafiki jest zbyt mała, to większa ilość tekstu w opisie w opisie będzie powodowała, że ramka będzie się zbytnio rozciągać w pionie.
[edytuj] Zagnieżdżenie linku w podpisie
Podpis pod obrazkiem stanowi dodatkową informację, którą również można "wyposażyć" w link, używając zagnieżdżonych znaczków (jeden w drugim), np.:
[[Grafika:Padalec3.jpg|thumb|[[Padalec zwyczajny]]]]
efekt, jak na ilustracji po prawej stronie:
UWAGA Podpisy pod ilustracjami powinny w sposób zwięzły opisywać to, co znajduje się na ilustracji. Jednakże w przypadku urządzeń czy map można oczywiście użyć bardzo szerokiego opisu. W dobrym zwyczaju jest umieszczanie też opisu takiej grafiki na commons. Jest to lepsze,niż robienie legendy na grafice, ponieważ może być ona wówczas także w pełni wykorzystana w innych wersjach językowych Wikipedii i jej siostrzanych projektów.
[edytuj] Wielkość obrazka
Opływanie obrazków przez tekst - jakkolwiek przy sprzyjających okolicznościach wygląda ładnie, jest zawsze trochę ryzykowne, gdyż niektóre przeglądarki mają z tym pewne problemy i trzeba zawsze obejrzeć jak taka strona będzie się zachowywała przy mniejszych rozdzielczościach (rozmiarach) ekranu. Często bowiem zdarza się, że to co wygląda ładnie przy rozdzielczości (rozmiarze) 1024 × 768 wygląda znacznie gorzej przy 800 × 600. Jeśli akurat oglądasz tą stronę przy tej rozdzielczości (rozmiarze) to od razu zrozumiesz w czym rzecz, bo została ona celowo napisana tak, żeby nie za dobrze wyglądać w tych warunkach.
Wg statystyk obecnie (listopad 2006) rozdzielczości (rozmiaru) 800 × 600 używa ok. 12% internautów, nie można więc faktu nieładnego wyglądu strony przy tej rozdzielczości (rozmiarze) zignorować.
Należy się też liczyć, z faktem, że część osób korzystająca z większych rozdzielczości (rozmiarów) może nie mieć okna przeglądarki rozciągniętego na cały ekran. Wiele osób korzysta też z tzw. sidebarów, które dodatkowo zwężają szerokość okna przeznaczonego na wyświetlanie strony.
Pole, w którym pokazuje się tekst artykułu, przy standardowej skórce Wikipedii i rozdzielczości (rozmiarze) ekranu 800 × 600 pikseli oraz stosowaniu okna przeglądarki rozciągniętego na cały ekran bez użycia sidebarów ma szerokość ok. 630 pikseli (resztę zajmuje boczne menu, obramowanie okna i suwaki).
Opływanie tekstu wokół obrazka wygląda ładnie, gdy obrazek nie zajmuje więcej niż 50% długości linii tekstu i jest jeszcze do przyjęcia przy 65 — 70% długości. Gdy jest za mało miejsca na tekst zaczyna on być łamany przez przeglądarkę. Wygląda to mniej więcej tak:
to jest
tekst,
który
ma za
malo
miejsca
Aby tego uniknąć należy nie wklejać obrazków szerszych niż 350 — 400 px z włączoną opcją opływania.
Gdy obrazek jest nieopływany jego zbyt duże rozmiary skutkują z kolei nakładaniem się go na inne elementy strony (menu, tabele itp.) Stąd maksymalnym zalecanym rozmiarem obrazka wstawianym bez opływania jest ok. 600 px.
[edytuj] Skalowanie do zadanej wielkości
Jeśli dysponujesz za dużym obrazkiem i nie masz programu do jego przeskalowania przed wysłaniem na serwer Wikipedii można uratować sytuację poprzez przeskalowanie go za pomocą podania jego docelowej szerokości w jakiej ma się on ukazać na stronie, co robi się w następujący sposób:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|npx]] gdzie '''n''' to szerokość w pikselach
Przykłady skalowania:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|250px|Zamek krzyżacki w Malborku]] [[Grafika:Zamek_krzyzacki_w_Malborku.jpg|150px|Zamek krzyżacki w Malborku]] [[Grafika:Zamek_krzyzacki_w_Malborku.jpg|75px|Zamek krzyżacki w Malborku]]
Wynik skalowania:
250 px. 
150 px.
75 px.
Takie rozwiązanie jest jednak ostatecznością, gdyż ma dwie wady:
- rozmiar pliku wysyłanego na serwer Wikipedii jest w takim przypadku niepotrzebnie duży
- skalowanie automatyczne w przypadku obrazków zawierających dużo ostrych konturów, kresek, liter itp. daje często niedobre wyniki. W przypadku zdjęć obiektów naturalnych jest to w miarę bezpieczne.
— rozmiar oryginalny
— 150 px.
— 75 px.
[edytuj] Położenie grafik w tekście (right, left, center)
[edytuj] Opływanie grafiki przez tekst - zasady ogólne
Standardowo, jeśli umieścimy link do obrazka w osobnej linii tekstu nie będzie on opływany przez tekst, lecz ukaże się osobno, przy lewej krawędzi pola tekstowego. Pod warunkiem, że nie dajemy opcji "thumb" czy "frame" Np.:
[[Grafika:Brenna2 kapliczka.jpg|250px|kapliczka w Brennej]]
pokaże się tak:
Niestety artykuł z tak wstawionym obrazkiem nie wygląda najlepiej, choć jest to w pełni bezpieczny sposób umieszczania obrazka w tekście, ponieważ gwarantuje on czytelność tekstu przy każdej rozdzielczości (rozmiarze) ekranu.
Jeżeli użyjemy opcji "thumb" czy "frame"
[[Grafika:Brenna2 kapliczka.jpg|250px|thumb|[[kapliczka]] w Brennej]]
wówczas tekst będzie będzie taką grafikę opływał z prawej strony, co nie powoduje konieczności stosowania specjalnych zabiegów, aby tekst na grafikę nie wchodził.
Wciąż bardzo bezpieczna metoda wstawiania obrazków, to centrowanie obrazka względem tekstu. Robi się to poprzez użycie w kodzie opcji "center":
[[Grafika:Billiards balls2.jpg|250px|thumb|center|kule bilardowe]]
co wygląda następująco:
Aby obrazek był dosunięty do lewej krawędzi tekstu i był opływany przez tekst z prawej, także przy zastosowaniu "thumb" czy "frame", należy użyć opcji "left":
[[Grafika:Warzywa czosnek002.jpg|left|250px|thumb|[[czosnek]]]]
co da taki efekt, jak w przypadku grafiki po lewej stronie
Analogicznie, dosunięcie grafiki do prawej krawędzi tekstu i opływanie z lewej uzyskuje się przez zastosowanie opcji "right". Wówczas także można dosunąć do prawej krawędzi grafiki, nie stosując opcji "thumb" czy "frame"
[[Grafika:Kredki Foto.jpg|right|250px|kredki]]
co wygląda tak jak w przypadku ilustracji obok.
Nie zaleca się jednak stosowania w artykułach grafik bez ich podpisywania, chyba, że jest to kilka grafik, jedna pod drugą ze wspólnym opisem.
[edytuj] Konflikt z linkiem "edytuj" w artykułach podzielonych na sekcje
W artykułach, które są podzielone na osobno edytowalne działy (czyli posiadające śródtytuły) należy wziąć pod uwagę, że po prawej ich stronie może pojawiać się automatycznie wstawiany mały link [edytuj], który może przesuwać obrazki w lewo - do środka tekstu. Podobne problemy mogą się też pojawiać na początku artykułu z więcej niż trzema śródtytułami, gdyż w takich artykułach wstawiany jest automatycznie spis treści. Aby uniknąć tego rodzaju konfliktów zaleca się:
- wstawienie obrazka po tytule działu, jeśli ma on być oblewany przez tekst, który jest pod tym tytułem.
- wstawianie obrazka nie na samej górze artykułu, lecz po jego pierwszym akapicie.
- obrazki na górze długich artykułów ze spisem treści bezpieczniej jest wstawiać z opcją |right| a nie |left| i nie powinny one być zbyt duże - maksymalna szerokość obrazków to 300px - a zaleca się nie więcej niż 250 px.
[edytuj] Konflikt z listami wyliczanymi
Opływanie tekstu przez grafikę wygląda szczególnie nieładnie w przypadku stosowania opływania z prawej strony (align=left) i list (wstawianych do Wikipedii znakiem * lub #) gdyż wtedy znaki kolejnych podpunktów wchodzą na grafikę.
Np:
[[Grafika:Palmyra ruiny.jpg|left|200px]] * tekst 1 * tekst 2 * tekst 3 * tekst 4 # lista 1 # lista 2 # lista 3
Wygląda tak:
- tekst 1
- tekst 2
- tekst 3
- tekst 4
- tekst 6
- lista 1
- lista 2
- lista 3
[edytuj] Kiedy grafiki umieszczać po stronie lewej, prawej lub centralnie?
Jeżeli grafika ilustruje opisywane zjawisko, czyli jest to typowa ilustracja artykułu, powinna być ona umieszczona po prawej stronie względem tekstu.
W szczególnych przypadkach, jeżeli jest to grafika panoramiczna, wówczas mozna umieścić ja centralnie. Taki zabieg w artykułach powoduje też zmniejszenie monotonii, gdy np. jest to duży artykuł z wieloma grafikami. Powinna być to jednak grafika szersza niz dłuższa pozwalająca czytelnikowi widzieć na ekranie tekst nad nią i pod nią.
Grafiki umieszczamy po lewej stronie, jeżeli tekst artykułu dotyczy akurat tych grafik, np. dzieła malarskiego czy rzeźby, a także jeżeli chcemy użyć grafiki do zilustrowania sekcji przylegającej do infoboxu.
[edytuj] Galerie
Możliwe również jest, choć obecnie niezalecane, tworzenie galerii. Wpis:
<gallery> Grafika:Formosan sika deer.jpg|[[Jeleń wschodni]] Grafika:Bubo bubo winter 1.jpg|[[Puchacz]] Grafika:Turdus pilaris2.jpg|[[Kwiczoł]] </gallery>
da efekt w postaci:
UWAGA! - nie należy poszczególnych grafik umieszczać w znacznikach [[ ]]
Nie wszystkie grafiki dobrze się przentuja w tego typu galeriach. Raczej powinno się umieszczać w nich te, których wymiary są przystające do wymiarów samego okna galerii. również w przypadku galerii nie należy dawac zbyt rozbudowanych opisów. W niektórych przypadkach będzie to dawało niezbyt dobry efekt:
 Wzgórze zamkowe w Dobczycach |
 Panorama Zamku w Janowcu |
 Powierzchnie sterowe: |
Obecnie, zamiast tworzenia galerii w artykułach lepiej jest utworzyć galerię na Wikimedia Commons, która jest ogólnym repozytorium plików graficznych i multimedialnych dla wszystkich mutacji Wikipedii, a następnie dołączenie w tekście artykułu zgrabnego szablonu przenoszącego do tej galerii:
Np.: {{Commons|Gallery_Terpenes}} da taki efekt:
Uwaga! Nazwa wyświetlana w linku do Commons będzie taka jak nazwa strony, na której się on znajduje, choć może on kierować do różnych galerii czy kategorii w Commons.
Umieszczenie galerii w Wikimedia Commons ma trzy zalety w stosunku do bezpośredniego jego umieszczenia w artykule, w Wikipedii:
- Galeria może się stale rozwijać - poprzez uzupełnianie ich przez wikipedystów ze wszystkich edycji językowych
- Galeria może zostać dołączona do wielu artykułów i to w każdej edycji językowej, bez konieczności wklejania kodu całej galerii do każdego artykułu z osobna
- Galeria w commons nie powoduje przedłużenia czasu wczytywania artykułu i zmniejsza obciążenia serwera - mogą ją natomiast bez przeszkód oglądać osoby nią zainteresowane.
W artykułach można ewentualnie tworzyć minigalerie składajace się z kilku 3-4 grafik zamykających sekcję czy artykuł. Warto jednak się zastanowić, czy nie wkompownować ich w artykuł w inny sposób, ze względu na ich wielkość w ramkach, tworzonych automatycznie, dzieki opcji <gallery>
[edytuj] Ilustrowanie sekcji
Dobrym rozwiązaniem w bardzo rozwiniętych artykułach jest też umieszczanie niewielu grafik w osobnych sekcjach, które ilustrują wybrany z opisywanych problemów. W ten sposób po lewej stronie znajduje się tekst, a po prawej ilustracja do niego.
W bardzo obszernych artykułach można używać różnych sposobów układania grafiki. Ważne jest aby przed zapisaniem nacisnąć zawsze na "Podgląd" i sprawdzić czy dany układ będzie przyjemny do oglądania dla użytkowników. W przypadku powyższego formatu warto sprawdzać, czy grafiki nie zachodzą na siebie, najlepiej oglądając je w dużej i małej rozdzielczości.
[edytuj] Uwagi końcowe
- Nie należy zbyt blisko siebie wstawiać obrazków, które są na przemian opływane z lewej i prawej (co celowo zostało zrobione na tej stronie), gdyż wtedy z tekstem dzieją się "dziwne rzeczy", nawet przy rozdzielczości 1024x768.
- Jeśli chcesz zobaczyć jak będzie wyglądał edytowany tekst na stronie o mniejszej rozdzielczości niż ta, którą teraz używasz, możesz po prostu zmniejszyć rozmiary okna przeglądarki. Aby przy rozdzielczości 1024x768 uzyskać rozmiar okna jaki by był przy 800x600 zmniejsz okno przeglądarki o mniej więcej 1/3.
- Niekiedy trzeba poeksperymentować z wielkimi literami w rozszerzeniu: "obrazek.Png" albo "obrazek.PNG".
- Po uaktualnieniu obrazka może zdarzyć się, że przeglądarka będzie nadal wyświetlała starą wersję. Należy wtedy pobrać stronę bezpośrednio z serwera Wikipedii, a nie z cache. Jak to zrobić:
- w Internet Explorerze: ? Ctrl-F5
- w Mozilli/Firefox: trzymając wciśnięty Shift kliknąć w Reload (Przeładuj/Odśwież)
- w Operze: Ctrl-Shift-R
Zobacz też jak formatować układ grafik w tekście na stronie: Wikipedia:Formatowanie układu grafik w tekście
