Obrazki na stronie

[randybvain]

Mam problem na mojej stronie (w sygnaturce). Jakość obrazków jest
fatalna. Jednakowoż na moim komputerze wyglądają one w porządku. Co
powoduje różnicę?

[markus.kembi]

To proste - obrazki zostały spłaszczone.

Już pierwsze co na stronie głównej rzuca się w oczy zdjęcie. Nie wczytywałem się dokładnie w kod, ale zauważyłem, że prawą kolumnę masz zależną od rozdzielczości ekranu (takie rozwiązania to nie jest najlepszy pomysł), a im ta rozdzielczość jest mniejsza, tym mocniej zdjęcie (o rzeczywistych wymiarach o wymiarach 927x615px) jest "zgniatane". A zdjęcie powinno mieć stałe, określone wymiary, a każdy obrazek powinien być wyświetlany w rzeczywistych wymiarach - jeśli jest za duży, to zawsze można go zmniejszyć w programie graficznym.

Z kolei lewa kolumna, ma u Ciebie stałą szerokość, a to za sprawą obrazka z flagami Walii i Polski, który ma w CSS ustawione wymiary 200x85, podczas gdy jego rzeczywiste wymiary wynoszą 656 na 201 pikseli, a zatem jest nieprawidłowo wyświetlany, w dodatku spłaszczony w poziomie, bo przy gdyby przy zachowaniu proporcji zmniejszyć jego wysokość z 201 do 85 pikseli, to powinien być szeroki na 277 pikseli. A więc dokładnie ten sam problem.

Moja sugestia - zmień fizycznie, przy pomocy programu graficznego, wymiary obrazków. Stronę spróbuj wyświetlić w stałej rozdzielczości, a jeśli koniecznie zależy Ci na autodopasowywaniu się prawej kolumny, to oszczędź chociaż zdjęcie i nagłówek "Polska strona języka walijskiego" i wyświetl je w normalnym rozmiarze i to dużo mniejszym niż obecny, a spłaszczanie-rozszerzanie zostaw dla części tekstowej.

[randybvain]

Dziękuję za kompetentną odpowiedź.
Problem w tym, że gdy próbowałem zamiescić obrazki w skali 1:1, tak
jak piszesz, ich jakość była o wiele gorsza. Dlatego na przykład
nagłówek po prawej stronie w oryginale ma wymiary 4400x400, czyli
jest 4 razy większy niż normalny, a obrazek z flagami tak
zniekształcony. Przy ich tworzeniu korzystałem z Gimpa, gdyż on jako
jedyny mi znany ma opcje rozmycia, dzięki któremu nie ma plamek i
przebarwień dokoła liter.

[randybvain]

Jeszcze jedno. Mój arkusz stylów wygląda tak:

.headslab { position: fixed; left: 10px; top: 14px; width: 14%; }
.titleslab { position: absolute; left: 231px; top: 14px; width: 75%;
height: 85px; border: solid 2px red; background-color: #fe0000; }
.leftslab { position: fixed; left: 10px; top: 120px; width: 14%; }
.rightslab { position: absolute; left: 231px; top: 120px; width:
75%; border: solid 2px red; font-family: Verdana; font-size: 16px; }
.but { width: 200px; height: 46px; border: solid 2px red; margin-
bottom: 2px }
.butram { width: 200px; border: solid 2px red; margin-bottom: 2px;
margin-top: 2px; font-family: Verdana; font-size: 16px; text-align:
center; }
.ims { width: 100%; height: 100%; }
.iml { width: 200px; height: 85px; border: solid 2px red; }
.img { width: 100%; }

[evek]

ja bym zaczela od ustalenia ROZMIARU tej strony - stalego, a pozniej dopasowala
rozmiary grafiki - to chyba by ulatwilo nieco uzytkowanie...

a nie latwiej by ci bylo z jakims CMS-em te strone prowadzic?

i moze troche przy okazji "wyciszylabym" ten czerwony kolor. ale to kwestia
gustu i upodoban. mnie jednak ten nadmiar czerwonego zniecheca do zaglebienia
sie w strone - a jej zawartosc wydaje sie ciekawa.

powodzenia!

[markus.kembi]

@Evek - strona jest dość prosta, tylko autor ją niepotrzebnie skomplikował. Prowadzenie takiej strony nie powinno być szczególnie skomplikowane. A kolory moim zdaniem są OK

@Randy - to już mają do siebie obrazki rastrowe, że przy zmianie wymiarów stają się niewyraźne. Nie wiem, co to za czcionka, ale tyle jest podobnych, gotycko-celtyckich, darmowych czcionek - mógłbyś taką ściągnąć, zainstalować i bezpośrednio w programie graficznym wpisać tekst na (w tym przypadku czerwonym) tle, wcześniej ustalając takie wymiary obrazka, jakie Ci potrzebne i dopasowując rozmiar czcionki do wymiarów obrazka. Poszukaj, może tu znajdziesz podobną czcionkę?

www.dafont.com/theme.php?cat=403&nb_ppp=50
Niezależnie od okoliczności, obrazków o tak ogromnych rozmiarach (4400 pikseli szerokości) nie powinno się umieszczać na stronie, bo bardzo mocno spowolnią jej wczytywanie.

[randybvain]

Zamierzam wypróbować style oparte na trwałych wymiarach w pikselach,
zamiast w procentach i zobaczę, jak to wygląda.

Co do liter: właśnie zrobiłem, to co napisałeś i efektem są te
maziaste buttony... I takie są w internecie, bo u mnie na kompie
obrazki są czyste. I to mnie dziwi, ta różnica.

Be

[randybvain]

Wypróbowałem wymiary w pikselach no i oczywiście okazało się, że to
oznacza ułożenie strony do jednej rozdzielczości, bo w większej to
mam pół ekranu puste (żeby chociaż się jakoś centrowało, ale nie,
nic nie działa), a w mniejszej - suwaki na obu brzegach. Nie da się
dogodzić każdemu... Wracam do procentów.

[gdotb]

ja osobiście procentów unikam. 800x600 to już historia, nikt nie musi tworzyć
stron dla TEJ rozdzielczości, ale na dzień dzisiejszy 1024x768 to chyba większa
większość.

Procentów nie lubię, bo tekst jest wywalany na całą stronę ( oczywiście ), a
przy moim monitorze i jego rozdzielczości, teksty te tworzą jedną linię, co jest
absolutnie przeciwko zdrowemu rozsądkowi - ludzie przyzwyczajeni są do czytania
książek i ICH formatu.

Ja będę ZAWSZE przeciwnikiem procentów i wszystkie strony, które stworzyłem mają
minimalną szerokość w pikselach, te starsze 800, te nowsze 1024.