Wymiary dla obrazków podane w kodzie

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Jesteśmy na Google, po wpisaniu paru słów kluczowych klikamy w jeden z niebieskich linków. Zwyczajna strona, dużo tekstu, zaczynamy przeglądać zanim pasek postępu ładowania odetchnie. Po sekundzie, dwóch znajdujemy w końcu interesujący nas fragment np. artykułu i zaczynamy pochłaniać go wzrokiem. I nagle - bump, bump, tekst zjeżdża o jedną trzecią ekranu w dół, bump, już go nie widać. Gonimy myszką pasek przewijania i rozdygotanym wzrokiem usiłujemy nadążyć za uciekającą treścią. Bump.

A wszystkiemu winne były obrazki wstawione powyżej tekstu bez ustawionych parametrów width i height. Przeglądarka nie wie ile miejsca ma zarezerwować na stronie, dopóki nie połączy się z takim obrazkiem i nie zacznie go ściągać. Jeśli obrazków jest kilkanaście, połączenie następuje z paroma pierwszymi, a pozostałe czekają na swoją kolej. Przez to na pozornie załadowanej stronie wszystko zdaje się przemieszczać w dół, czyniąc chaos i zamęt. Rozwiązanie jest prościutkie - kiedy możemy wstawiajmy te atrybuty do znaczników img:

<img src="example.jpg" alt="example" width="450" height="250" />

Obrazki czekające na wyświetlenie, ale rezerwujące miejsce na stronie

Dzięki temu unikniemy problemów z czytaniem oraz pozycją strony na jakiejś etykietce (np: http://example.com/#label), która po załadowaniu takich obrazków także nie wskazuje prawdziwego miejsca na stronie.

Rozwiązanie dynamiczne: PHP, Python.

Tagi wpisu:

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 15 kwietnia 2006 o 18:57

Kategorie: HTML & Semantyka, Standardy sieciowe, Użyteczność

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Igor 1 15 kwietnia 2006, 18:58

Uhum, a ja liczyłem na jakis wielkanocny wpis :]
Riddle 2 15 kwietnia 2006, 18:58

Nie obchodzę. ;) (Offtopik, offtopik! :P)
Lamper 3 15 kwietnia 2006, 18:59

Taaa to prawda. Sam wiele razy miałem problemy, ale już się jakoś przyzwyczaiłem.

> Nie obchodzę. ;)
@Ridd to może chociaż życzenia na miniblogu ;p
Ktos 4 15 kwietnia 2006, 19:02

Och, jaki prosty i krotki wpis, a zwracający uwagę na tą ważną rzecz. O której jednak sam często zapominam ;-)
Nie lubię jak mi strona ucieka. A można by się pokusić tutaj o pytanie jeszcze - czy w związku z tym to preloader jest dobrym rozwiązaniem?
hash 5 15 kwietnia 2006, 19:03

Oby wpis ten przetłumaczony na wiele języków został, i do głów wielu trafił,
na razie bump to standard ;]
Reqamst 6 15 kwietnia 2006, 19:04

Ale to dosyć niewygodne - wyobraźmy sobie, że codziennie kilkadziesiąt obrazków nowych się pojawia na naszej stronie. Riddle, a da sie sprawdzić rozmiar obrazka w js?
zwierzak 7 15 kwietnia 2006, 19:05

Ja tam raczej nie lubie wstawiać rozmiarów obrazków bezpośrednio do dokumentu. Nie wiem czemu mam takie „zboczenie” ;). Ale co prawda to prawda, jeszcze bardziej nie cierpie kiedy strona mnie się rozjeżdża przez niezałądowane obrazki.
Riddle 8 15 kwietnia 2006, 19:08

Możesz co najwyżej ukryć wszystko na stronie, aż się cała nie załaduje - jeśli nie podałeś wymiarów, to skąd ma przeglądarka na Twoim komputerze wiedzieć jaki wymiar posiadają obrazki na serwerze w Nebrasce, z którymi się jeszcze nie połączyła? :)

Można oczywiście spróbować napisać jakiś UserScript, w stylu że ładujemy wszystkie document.images do tablicy i póki nie będzie pełna (= strona załadowana) to document.body.getElementsByTagName("*")[i].style.display = "none", ale to raczej przerost formy nad treścią - po prostu pamiętajmy o tym pisząc strony / posty na bloga (sam nie wstawiałem, shame on me ;)).
zwierzak 9 15 kwietnia 2006, 19:09

Ale to chodzi, że ja poprostu tego nie lubie, a nie ostanacza, że niew wiem o co chodzi w sensie odgórnego definiowania rozmiaró obrazków.
Riddle 10 15 kwietnia 2006, 19:10

Nie napisałem, że nie wiesz. :-)
A odpowiedź była bardziej do Reqamsta w sprawie jego pytania od. JS.
D4rky 11 15 kwietnia 2006, 19:11

mozna oczywiscie rozwiazac to PHPowo, ladujac obrazki do zmiennej i sprawdzajac wymiary, a potem doklejajac je do kodu. nie testowalem, ale chyba zajeloby to sporo czasu
zwierzak 12 15 kwietnia 2006, 19:12

Tak też mozna ;)
Czara 13 15 kwietnia 2006, 19:12

Reqamst: w php mozna sprawdzic rozmiar obrazka :)
D4rky 14 15 kwietnia 2006, 19:14

Czara, zdaje sie ze wlasnie o tym wspominalem.
Jesli kogos to interesuje, to moge przeprowadzic kilka testow i opublikowac wyniki na joggerze. Wystarczy poprosic ;p
Reqamst 15 15 kwietnia 2006, 19:16

Nie zawsze można użyć php, a jeśli już to bym wybrał CGI.
Czara 16 15 kwietnia 2006, 19:16

D4rky: jak pisalem to twojego wpisu nie bylo ;)
kiedys cos takiego robilem
nie pamietam tylko czy dlugo to sie wykonywalo
musze poszukac to na dysku
muzgus 17 15 kwietnia 2006, 19:31

Zajmuje bardzo mało czasu (jeżeli mówimy o obrazkach ok 1000x1000px), używałem tego kiedyś na stronie.
片翼の天使 18 15 kwietnia 2006, 19:55

'bump' ktora przegladarka wydaje taki dzwiek ;) ?
Riddle 19 15 kwietnia 2006, 19:58

Można sobie rozszerzenie dograć:
https://addons.mozilla.org/firefox/2315/ :D
MySZ 20 15 kwietnia 2006, 19:58

http://diary.urzenia.net/2006/02/02/wymiary-obrazkow-w-html/ <- Może się komuś przyda, skoro się ręcznie nie chce wstawiać... ;)

A wymiary obrazków zawsze staram się trzymać w bazie danych (o ile taka jest przewidziana) - i tak muszę wtedy pobrać nazwy plików, wymiary do tego nie robią mi różnicy :)
Jakub 21 15 kwietnia 2006, 20:04

Ja podawałem wymiary do niedawna. Teraz już nie daję. Tylko czy warto pisać o takim "bzdecie"?
Czara 22 15 kwietnia 2006, 20:13

przyklad jak zrobic to w php jest na moim jogu ;)
Kermit 23 15 kwietnia 2006, 20:19

@Jakub - znowu chcesz, żeby Riddle usunął Twój komentarz? Według mnie bardzo dobrze, że o tym napisał, bo szczerze się przyznam, nie wiedziałem, że określając wielkość obrazka oszczędzam inym tego przeskakiwania. Teraz juz wiem :).

Kermit.
Riddle 24 15 kwietnia 2006, 20:22

Jakub: Bardzo się cieszę, że masz zmienne IP, ale tak się składa że na tym blogu jestem prawie non stop więc mogę się podjąć banowania / kasowania twoich komentarzy over-and-over-again… bo po prostu trollujesz. Jeśli denerwują cię wpisy jakie popełniam - kto ci każe to czytać. Zastanów się co chcesz osiągnąć i po co to wszystko.

Z mojej strony koniec tematu - czemu - pisałem wcześniej.
ludwik 25 15 kwietnia 2006, 20:36

Riddle, z tymi obrazkami to masz świętą rację!
ikari 26 15 kwietnia 2006, 23:14

Jakub, ale czy masz b czy strong to i tak zadziala. A problem z podawaniem rozmiarow obrazka dokucza mi dokladnie tak jak Riddlowi - swieta kurwica czlowieka bierze jak mu tekst spierdziela, bo szybciej czytam strone od mojej wlasnej przegladarki.
Ale z 2 strony... dynamiiiiicznie? Ridel, chcesz, zeby najpierw moj serwer pol minuty laczyl sie z serwerem w wyzej wspomnianej Nebrasce, zanim w ogole wklei mi kod na obrazek, ktory kolejne pol minuty bedzie ssac localhost? ;P OMG.
PS. A propos scrollowania podczas ladowania strony - was tez tak nieziemsko wnerwia jak sie w takim momencie przycina Firefox?
dragonee 27 15 kwietnia 2006, 23:42

@Riddle: Jest pewien dość szybki i prosty pomysł na masę obrazków, minimalizując ingerencję w kod strony. Należy mianowicie zrobić ich miniaturki o jednej wysokości i ustawić tą wysokość jako atrybut obrazka za pomocą CSS. Niedoskonałością jest to, że jeżeli będziemy chcieli mieć obrazki zeskalowane proporcjonalnie, nie możemy ustawiać jednej szerokości, co przy większej ilości obrazków w jednym rzędzie nadal może powodować problemy ze zjeżdżaniem treści.

Wzorcowym rozwiązaniem byłaby modyfikacja przeglądarki w taki sposób, że obrazki, których górna krawędź znajduje się ponad oknem przeglądarki powinny uciekać w górę, a pozostałe w dół. Ale to już nie dla webdeva. :)
Piotr Chmolowski 28 16 kwietnia 2006, 09:54

Hmm... ja myślałem, że takie coś jak width i height powinno być ustawiane w CSSie :-)
Riddle 29 16 kwietnia 2006, 15:27

Zakładając że <img/> to <object/> a width i height to <param/> dajemy do zrozumienia w kodzie jak ma być traktowany przez przeglądarkę obiekt który wstawiamy do dokumentu. Przypisywanie do wszystkich obrazków #id albo .class (chociaż rzadko się zdarza, żeby obrazki były tych samego wymiarów) to dopiero jest przerost formy nad treścią. :)
Patrys 30 16 kwietnia 2006, 16:43

Rozmiary obrazków w kodzie są złe, bo:

1) Niepotrzebnie zwiększają rozmiar kodu, a przecież nie podany rozmiar jest identyczny z tym zawartym w pliku;

2) Utrudniają przeczytanie tekstu awartego w atrybucie "alt," a ten właśnie jest prezentowany przed pobraniem obrazka (i jest to wielce irytujące przy zablokowanych obrazkach - pomyśl o GPRS na przykład);
Riddle 31 16 kwietnia 2006, 16:45

Drugi powód jest okej, ale przez główny powód wpisu - skakanie - będzie chyba musiał zostać odłożony do czasów XHTML 2.0 i object, param gdzie wszystko w środku object pojawia się gdy nie można wyświetlić linkowanego obiektu.

Edit: Wiem, że to ogólnie powinien być problem agenta, ale ten idealny agent o którym pewnie już chcesz mówić, jakoś nie istnieje i nie zapowiada się żeby jutro zaistniał… dlatego proponuję rozsądną alternatywę.
Patrys 32 16 kwietnia 2006, 16:55

To ja ci tylko powiem, że bez czekania na XHTML2, <img/> jest nadmiarowym elementem HTML i może zostać z powodzeniem zastąpiony przez <object/> z odpowiednio zdefiniowanym typem mime (dla Internet Explorera, który nie potrafi tego rozpoznać).
Domel 33 16 kwietnia 2006, 17:55

Patrys:
W teorii tak w praktyce nie. Żadna przeglądarka nie obsługuje poprawnie znacznika object w sensie chociażby tekstu alternatywnego. A żeby było śmiesznej to IE przy skonfigurowaniu restrykcyjnym będzie się bał wyświetlić takiego obrazka. Oczywiście przy domyślnych ustawieniach jest OK ale nie każdy musi tak mieć skonfigurowaną przeglądarkę.
Jedna uwaga do Riddle'a: W XHTML 2.0 to raczej atrybut src, a nie znacznik object.
Patrys 34 16 kwietnia 2006, 19:12

Domel:

Wiem, że kaskadowy fallback nie działa, inaczej element <img/> dawno by wyszedł u mnie z użycia. Chodzi mi tylko o to, że to żadna nowość z XHTML2.
Kangel 35 16 kwietnia 2006, 21:25

Ad. pierwszy komentarz Patrysa, przyczyna druga: Właśnie jest na odwrót! Gdy obrazek nie ma podanych rozmiarów i obrazek się nie wczyta, pojawia się tylko malutki kwadracik pokazujący, że toto w ogóle tu miało być, a więc napisu zbytnio nie przeczytasz.
A to, czy alt zmieści się w przypadku niewyświetlenia obrazka, a z podanymi wymiarami, to inna para kaloszy :)
Patrys 36 16 kwietnia 2006, 22:14

Kangel:

Nie wiem, jakiej przeglądarki używasz, ale u mnie ten "kwadracik" rozciąga się na potrzeby zawartego w nim tekstu, a w przypadku zablokowania obrazków zwyczajnie się w ten tekst zamienia.
Kangel 37 16 kwietnia 2006, 22:47

Nie jestem pewien, czy tak dokładnie jest w mojej (choć prawdopodobnie tak), czyli w Firefoxie, ale w (niestety) najbardziej popularnej IE na pewno...
Puck 38 17 kwietnia 2006, 13:43

Ja, choć sam nie zamierzam ustalać w/h dla obrazków, uważam to za dobrą ideę. Przeglądarki, które nie wyświetlają obrazków powinny zignorować te parametry i dopasować rozmar do alta.
Praktyka, jak wiadomo, wygląda inaczej. ;-)

Piotrek - w CSS nie, bo rozmiar tzw. replaced-elements może być ignorowany.
D4rky 39 17 kwietnia 2006, 19:34

jakby ktoś nie wiedział, to do img można dodać parametr onerror, w którym znajduje się ścieżka do awaryjnego pliku (albo kod JS, mam kiepską pamięć). używałem tego do określenia, czy serwer jest online czy nie.
Dot 40 20 kwietnia 2006, 16:10

Hmm... Tak odnośnie tego alt'a - a co się dzieje, jak sięzastosuje CSS'ową właściwość min-height i min-width? Wydaje mi się, że obrazek powinien się przeskalować do takich rozmiarów, po czym zacząć ładować. Jak się załaduje, to się wklei i będzie pasował, jak nie, to wstawiony zostanie ALT. Jednak jeśli tenże alt się nie zmieści, to chyba nic (tzn. min-width/height) nie stoi na przeszkodzie, by miejsce dla tego alt'a się zrobiło. Mam rację, czy coś przeoczyłem?
P.S. Jeśli chodzi o brak obsługi min-height/width przez IE - to da się obejść przez odpowiedni skrypt JS.
P.P.S. Jeśli chodzi o właściwość CSS - nie musi to być bynajmniej zewnętrzna właściwość w pliku css i dodatkowo stworzona do obrazka klasa (przerost formy nad treścią faktycznie), ale może być atrybut style w tagu img, który się tym zajmie i będzie chyba najbliższym poprawnemu rozwiązaniu?
Riddle 41 20 kwietnia 2006, 16:11

Style inline zostaną wywalone w XHTML 2.0 więc uważam, że nie powinno się ich używać - zwłaszcza do takich hacków.
Dot 42 20 kwietnia 2006, 16:17

Hmm... A czy nie jest czasem tak, że tag <img /> też zostanie z XHTML 2.0 wycofany? Tak gdzieś kiedyś słyszałem. A jako, że tam jest rozwiazanie z <object />, to chyba nie robi to problemu? Może nie tak rozumuję, ale takie odnoszę niejasne wrażenie. Z drugiej strony - może to nie miejsce na to, ale czy czasem wyrzucenie inline-style z XHTML nie jest błędnym posunięciem? Bo co z takimi momentami, w których zastosowanie zewnętrznych styli dla poszczególnych elementów i dodawanie im identyfikatorów/klas nie ma sensu, albo przynajmniej jest właśnie przerostem formy nad treścią? Szczególnie w kontekście dynamicznie generowanych stron opartych na jednym pliku css?
smk 43 26 kwietnia 2006, 09:07

Skoro przeszkadza Ci korekta strony podczas doładowywania obrazków, to pewnie podobnym oburzeniem napawa Cię renderowanie nie do końca załadowanej tabeli przez Gecko?
Metoda "na IE" renderowania tabeli dopiero po otrzymaniu </table> jest lepsza, bo nie "skacze"? ;-)
Riddle 44 26 kwietnia 2006, 15:00

Smoku - to zupełnie inna bajka. O ile strona ładując drzewko DOM wyświetla po kolei komórki tabelki, a pod nią nie ma nic, więc cała strona się rozszerza - tak jeśli obrazków mam 20, a strona jest już cała załadowana (w znaczeniu - DOM) razem z tekstem, a obrazki się jeszcze dociągają, bo nie ma 20 połączeń na raz - wtedy jest to denerwujące.
smk 45 26 kwietnia 2006, 15:04

Byłoby to prawdą, co piszesz, gdyby nie było col/rowspan'ów ;-)
Riddle 46 27 kwietnia 2006, 03:50

Hmm… nie wydaje mi się jednak, żeby przeszkadzało to w czytaniu… do tego ściąganie strony / znaczników tabelki trwa znacznie szybciej niż ściaganie kilkunastu obrazków po maksymalnie dwa na raz. :) Kiedyś wejdziesz z Google na sajt zza oceanu, odszukasz akapit w połowie strony - zaczniesz czytać i nagle wszystko zacznie zjeżdżać… mówię Ci. ;)