Uwagi o wstawianiu obrazków
From NndWiki
Ze względu na to, że czasami zdarza się, że wstawienie obrazka do artykułu powoduje "rozjeżdżanie" się stron przy mniejszych rozdzielczościach ekranowych (poprawniej rozmiarach ekranowych), polecamy zapoznanie się z poniższymi uwagami:
Spis treści |
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). 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.
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:Zamek_krzyzacki_w_Malborku.jpg|Zamek w Malborku]]
Używanie takich komentarzy jest ogólnie dobrym obyczajem.
Jeśli obrazek jest umieszczony na zewnętrznym serwerze, należy po prostu podać adres URL obrazka.
Na przykład obrazek:
- http://meta.wikipedia.org/upload/e/eb/Fentanyl.png
- został tu umieszczony poprzez wpisanie
- http://meta.wikipedia.org/upload/e/eb/Fentanyl.png
Umieszczanie obrazków przez zewnętrzne linki nie jest jednak zalecane. Trzeba też pamiętać, że umieszczanie linków do zewnętrznych obrazków nie może naruszać praw autorskich.
Formaty plików graficznych
Zalecanym formatem dla obrazków wysyłanych na serwer wikipedii jest PNG, zwłaszcza w przypadku obrazków zawierających dużo szczegółów i ostre kontury (wykresy, czarno-białe rysunki, wzory chemiczne itd). Można także stosować format JPEG, - w którym obrazki obiektów naturalnych (postacie ludzkie, twarze, zdjęcia budynków, zwierząt i roślin) można kompresować z zachowaniem stosunkowo dobrej jakości.
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. Np:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|Zamek w Malborku]]
pokaże się tak:
Choć artykuł z tak wstawionym obrazkiem nie wygląda najlepiej jest to w pełni bezpieczny i jak najbardziej zalecany sposób umieszczania obrazka w tekście, bo gwarantuje on czytelność tekstu przy każdej rozdzielczości (rozmiarze) ekranu.
Nieco lepiej i jest to wciąż bardzo bezpieczna metoda wstawiania obrazków, wygląda obrazek wycentrowany względem tekstu. Robi się to następująco:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|center|Zamek w Malborku]]
co wygląda następująco:
Aby obrazek był dosunięty do lewej krawędzi tekstu i był opływany przez tekst z prawej należy użyć następujący link:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|left|Zamek w Malborku]]
co da następujący efekt:
Analogicznie, dosunięcie do prawej krawędzi tekstu i opływanie z lewej uzyskuje się przez:
[[Grafika:Zamek_krzyzacki_w_Malborku.jpg|right|Zamek w Malborku]]
co wygląda tak:
Wadą tego rozwiązania jest brak pustej przestrzeni między tekstem i grafiką przy wydruku (na ekranie wygląda to zazwyczaj dobrze), co sprawia nieprzyjemne wrażenie sklejania się tekstu z krawędzią obrazka.
Inne sposoby umieszczania obrazków wymagają stosowania znaczników HTML. Jeśli nie masz zbyt wielkiego pojęcia o HTML lepiej tego nie rób.
Jeśli koniecznie chcesz to robić to zapoznaj się uwagami na temat wstawiania znaczników HTML w tekście wikipedii Wikipedia:Uwagi na temat korzystania ze znaczników HTML.
Względnie najbezpieczniejszym sposobem robienia tego jest stosowanie znacznika DIV z opcją "style" lub align.
Aby wycentrować obrazek względem tekstu można użyć takiego kodu:
<div align="center"> [[Grafika:Zamek_krzyzacki_w_Malborku.jpg|Zamek w Malborku]] </div>
co będzie wyglądało następująco:
Aby tekst opływał obrazek z prawej i był umieszczony przy lewej krawędzi tekstu:
<div style="float:left;padding:0px 15px 15px 0px;"> [[Grafika:Zamek_krzyzacki_w_Malborku.jpg|Zamek w Malborku]] </div>
co będzie wyglądało tak:
Aby tekst opływał obrazek z lewej strony i był umieszczony przy prawej krawędzi tekstu:
<div style="float:right;padding-left:15px"> [[Grafika:Zamek_w_Malborku.jpg|Zamek w Malborku]] </div>
co będzie wyglądało tak:
Padding 15px jest stosowany po to, aby tekst nie "sklejał się" z krawędzią obrazka.
Obrazki można też pozycjonować w stosunku do tekstu za pomocą tabel - nie jest to jednak specjalnie zalecane. Użycie tabel jest szczegółowiej opisane w Wikipedia:Uwagi na temat korzystania ze znaczników HTML.
Problemy występujące przy opływaniu grafiki
Konflikt z elementami wstawianymi automatycznie
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.
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:Zamek_krzyzacki_w_Malborku.jpg|left|200px|Zamek w Malborku]] * 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
Problemy z wielkością 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) 1024x768 wygląda znacznie gorzej przy 800x600. 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 (kwiecień 2004) rozdzielczości (rozmiaru) 800x600 używa ok. 35-40% 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 800x600 piksli oraz stosowaniu okna przeglądarki rozciągniętego na cały ekran bez uzycia sidebar-ów ma szerokość ok. 630 piksli (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.
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 np: [[Grafika:Zamek_krzyzacki_w_Malborku.jpg|250px]]
Przykład 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 za 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.
Grafika:Viagra formulae.png - rozmiar oryginalny
Grafika:Viagra formulae.png - 150 px.
Grafika:Viagra formulae.png - 75 px.
Innym rozwiązaniem jest stosowanie w linkach opcji "thumb". Powoduje ona, że obrazek jest automatycznie zmniejszany do 150 px, ale po kliknięciu nań można zobaczyć jego pełną wersją.
Przykładowy kod:
[[Grafika:Nofret.jpg|thumb|center|Nofret - żona księcia Rahotepa]]
co da taki efekt:
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.
Ramka wokół obrazka
Ramke wokół obrazka podobną jak w przypadku opcji "thumb" można uzyskać stosując opcję "frame":
[[grafika:Kevinmitnick.jpg|frame|center|Kevin Mitnick]]
co da efekt:
Jest to rozwiązanie wygodniejsze przy ilustrowaniu artykułów małymi obrazkami, ponieważ jeśli nie ustalimy szerokości obrazka w opcji "thumb" automatycznie zostanie dobrana jego szerokość jako 150 px i obrazek ulegnie deformacji. np:
[[grafika:Kevinmitnick.jpg|thumb|center|Kevin Mitnick]]
efekt:
Zarówno opcja "thumb" jak i "frame" standardowo (jeśli nie użyje się wycentrowania wzgledem tekstu) powodują dosunięcie obrazka do prawej krawędzi strony i oblanie go tekstem z lewej strony.
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:Kevinmitnick.jpg|thumb|center|[[haker]] - Kevin Mitnick]]
efekt:
Galerie
Możliwe również jest, choć obecnie nie zalecane, tworzenie galerii. Wpis:
<gallery>
Grafika:Kevinmitnick.jpg | [[Kevin Mitnick]]
Grafika:Zamek_krzyzacki_w_Malborku.jpg | Zamek w Malborku
Grafika:Nofret.jpg | Nofret - żona księcia Rahotepa
</gallery>
da efekt w postaci:
Zamek w Malborku |
Nofret - żona księcia Rahotepa |
UWAGA! - nie należy poszczególnych zdjęć umieszczać w znacznikach [[ ]]
Obecnie, zamiast tworzenia galerii w artykułach lepiej jest utworzyć galerię na Wikimedia Commons, która jest ogólnym repozytorim 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:
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 mutacji językowych
- Galeria może zostać dołączona do wielu artykułów i to w każdej mutacji 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ą sobie natomiast bez przeszkód oglądać osoby naprawdę nią zainteresowane.
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 zmiejszyć 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".
- Pamiętaj, by używać niepowtarzalnych nazw plików - serwer nie ostrzeże Cię, że nadpisujesz już istniejący plik o tej samej nazwie.
- 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
- Obrazki przesyłane na serwer Wikipedii nie mogą naruszać niczyich praw autorskich.
- Obrazek należy koniecznie opisać edytując stronę grafiki:
- co przedstawia
- skąd pochodzi
- kto jest jego autorem
- czy jest PD, czy podlega licencji GNU FDL itp.
