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 zalinkować 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|200px|thumb|right|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.
- |200px - po "|" została w tym przypadku określona wielkość zdjęcia w pikselach. rozmiar ten odnosi sie do szerokości zdjęcia. Liczba oznacza wielkość, żeby grafika miała daną wielkość po liczbie nalezy bez spacji użyć wyrażenia "px". Więcej na temat wielkości grafik poniżej.
- |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.
- |right - to wyrażenie z kolei odnosi się do kwestii położenia grafiki względem tekstu, right oznacza że po prawej stronie, mozna tez stosować left, bądź center. Poniżej więcej na temat opływania grafiki przez tekst.
- |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.
Kolejność w kodzie nie jest istotna, na poczatku należy zawsze dać [[Grafika:Nazwa pliku, a potem po "|" można w dowolnej kolejności resztę kodu. Np. taki zapis:
[[Grafika:Redrose.jpg|thumb|200px|Kwiat [[Róża (krzew)|róży]]|right]]
dałby ten sam efekt. Możesz spróbować poeksperymentować w brudnopisie.
[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ę w trudny do odczytania sposób. Wygląda to mniej więcej tak:
to je
st tek
st któ
ry
ma z
a
malo
miej
sca
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] 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 (lub innej wartości, którą możesz wybrać w preferencjach - od 120 px do 300 px), ale po kliknięciu nań można zobaczyć jego 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ć uwage na to, by rozmiar grafik był do siebie przystający. Inaczej tworzyć będą się schodki, jak w przypadku tu prezentowanym.
Dobrze jest dostosowac 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 bedzie 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|250px|[[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 uzyć 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] 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] 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
