Pomoc:Uwagi o wstawianiu obrazków

Z PHPEdia.pl
Skocz do: nawigacji, wyszukiwania

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:

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://upload.wikimedia.org/wikipedia/en/e/eb/Fentanyl.png

został tu umieszczony poprzez wpisanie:

http://upload.wikimedia.org/wikipedia/en/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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Zamek w Malborku

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:

Błąd przy generowaniu miniatury File missing
  • tekst 1
  • tekst 2
  • tekst 3
  • tekst 4
  • tekst 6
  1. lista 1
  2. lista 2
  3. 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:

Błąd przy generowaniu miniatury File missing
- 250 px.
Błąd przy generowaniu miniatury File missing
- 150 px.
Błąd przy generowaniu miniatury File missing
- 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.


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:

Błąd przy generowaniu miniatury File missing
Nofret - żona księcia Rahotepa

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:

Kevin Mitnick

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:

Kevin Mitnick

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:

haker - Kevin Mitnick

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:

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:

Szablon: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 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: