Morderca miniaturek

Miniaturkę możemy spotkać prawie wszędzie, gdyż dość dobrze nadaje się do prezentowania materiałów graficznych w sieci. Jej podstawową zaletą jest szybkość ładowania, to nie ulega wątpliwości. Dodatkowo, dzięki swym niewielkim rozmiarom użytkownik jest w stanie objąć wzrokiem dość pokaźną grupę miniaturek.

Jestem pewien także tego, że nieraz udało Ci się zaobserwować największy mankament miniaturek – czasami w żaden sposób nie można odcyfrować, co się dzieje na obrazku. Nadal nie wiesz, czy warto go obejrzeć… W takim razie po co miniaturka – równie dobrze mógłby ją zastąpić tekstowy odnośnik, prawda?

Skoro już uświadomiliśmy sobie problem, wyznaczmy teraz cel, do którego będziemy dążyć.

Potrzebujemy obiektu zastępującego miniaturkę, który będzie wyróżniał daną grafikę i starał się zachęcić do obejrzenia oryginału, przy jednoczesnym zachowaniu czytelności. Jeśli wziąć pod uwagę całość obrazka – jest to niemożliwe, ale kto powiedział, że trzeba nam całości? Nie lepiej wyciąć interesujący fragment?

Kadrowanie wyjściem ultymatywnym?

W przeciwieństwie do tworzenia miniaturek, kadrowanie daje zazwyczaj niezmiernie lepsze efekty wizualne. Z drugiej strony, póki nie nauczymy naszych komputerów rozpoznawania piękna, to będziemy sami musieli włożyć odrobinę naszej pracy (oraz inwencji) w wycinanki.

Pamiętaj, że ukazanie części grafiki wzbudza w oglądających ciekawość, dzięki czemu nie będą się nudzić na Twojej stronie i wysoce prawdopodobne, że jeszcze kiedyś wrócą. Istnieje pewna szansa, że dobrze uchwycony fragment będzie nie tylko intrygujący dla innych, ale stanie się nawet źródłem inspiracji dla innych.

Z powyższego akapitu płynie dość ważne pytanie – co wybrać? Z poczynionych przeze mnie doświadczeń wynikły dwa sposoby. Możemy wybrać łatwo zapadający w pamięć szczegół. Ważne przy tym, aby był reprezentatywny tylko dla jednego obrazka. Jeśli naprawdę utkwi w czyjejś pamięci, to właśnie odnieśliśmy sukces.

Inną metodą jest wybieranie najbardziej reprezentatywnej części obrazka. Problem w tym, że owszem, siła przebicia samego kadru będzie większa niż w poprzednim wypadku, jednak z drugiej strony, zabraknie nam niespodzianek w oryginale. Po pewnym czasie oglądający będzie mógł się przyzwyczaić do tego i przestanie zaglądać do oryginałów.

Może się okazać, że pewne fragmenty są zbyt duże, aby je skadrować. Wtedy należy się zastanowić, czy można bezpieczenie uciąć część tego fragmentu, czy też da się go zeskalować do pożądanych rozmiarów.

Narzędzia i wykonanie

Do tej pracy doskonale nadaje się zarówno GIMP, jak i Photoshop. Okazuje się, że moje sugestie to kombinowanie jak koń pod górę. Czujni czytelnicy (dzięki!) wskazali programy IrfanView, Picasę i JPEGCrops jako znacznie szybsze rozwiązanie przy większej ilości zdjęć. Nie testowałem żadnego z tych trzech programów, ale, jak widać, wybór jest znacznie większy.

Nie staraj się jakoś niezwykle precyzyjnie podchodzić do samego wyboru kadru – ja zazwyczaj przez chwilę zastanawiam się, jaki obiekt na obrazku rzuca się w oczy, następnie kilkakrotnie zaznaczam obszar 100x100px dookoła niego i wybieram opcję przycięcia obrazu, który zapisuję następnie jako JPEG z jakością 85 (domyślną). Dzięki temu moje wycinanki mają średnie rozmiary rzędu 3KB. Nawet przyjmując połączenie telefoniczne, dziesięć miniaturek ładuje się w jakieś 5-7s, co nie jest złym wynikiem.

Dość ważnym elementem jest wybranie stałego rozmiaru naszego kadru – dzięki temu wszystkie obrazki będą ładnie poukładane w rzędach i kolumnach na naszej stronie, niezależnie od tego, w jaki sposób zapiszemy je w kodzie HTML.

W razie, gdy obiekt, który chcesz zaznaczyć nie mieści się w domyślnych rozmiarach, można zeskalować obraz do 50% (co nadal daje w miarę dobre efekty wizualne), a następnie wykadrować i obciąć niepotrzebne części.

HTML

Gdy już zrobisz swoje miniatury i udostępnisz sieci, możesz wstawić je do swojego dokumentu. Jak? Rozwiązań jest naprawdę wiele. Można skorzystać z najprostszego kontenera <div />, lub bardziej skomplikowanej listy nieuporządkowanej.

Na tym blogu używam jeszcze innego rozwiązania. Korzystam z listy definicji <dl />, gdzie każdy <dt /> odpowiada danemu obrazkowi, a pod taką grupą wstawiam wspólny <dd />, czyli opis powyższych obiektów. Wygląda to tak:

<dl>
	<dt><img ... /></dt>
	<dt><img ... /></dt>
	[...]
	<dd>Obrazki przedstawiają x, y oraz z.</dd>
</dl>

W połączeniu z lekką stylizacją w CSS, może to wyglądać tak, jak na moim blogu.

Czy w takim razie odrobinka pracy popłaca? Odpowiedź pozostawiam Tobie.