Rezolucija fotografije za webshop

Uvijek možeš slike puknut na npr. Cloudinary pa ih povlačiti ako trenutni server nema resursa za to. Makar, čemu raw slike za web?

Ne znam što je tebi medium kvaliteta.

Ja slike za web radim u 72 dpi-a, jpeg, rezolucija ovisi o namjeni.

Uf koliko gluposti.

Fotke je uvijek najbolje raditi u najvećoj dostupnoj kvaliteti, a ako se uzima vanjski fotograf, dobro je osigurati se ugovorom da se fotke mogu koristiti i u druge svrhe (tipa tiskani katalog) jer ima fotografa koji stave u ugovor da su fotke isključivo za neku svrhu. Dakle, s pravnikom proći ugovor da ne bi poslije bilo i ovo i ono.

Obrada za webshop je drugi korak. Format je po defaultu jpeg, a kao optimizacija se može ponuditi i webp (s tim da mora postojati fallback na jpeg za browsere koji ga ne podržavaju). Rezoluciju diktira dizajn, a poželjno je koristiti srcset za ponuditi browseru više dimenzija, pa browser bira prema rezoluciji (i eventualno bandwidthu).

Razina kompresije je pak kompromis između kvalitete detalja i potrebnog bandwidtha, a nerijetko ovisi i o ciljanoj publici.

DPI nema veze s webom, to je mjera za print.

Web-shopovi imaju svoje in-house fotografe i to su najčešće školovani grafički dizajneri ili fotografi (iako najcesce grafički dizajneri posto pokrivaju sav graficki i fotografski dio svojom edukacijom - fotografi su striktno specijalizirani samo za fotografiju) koji obavljaju posao dizajna, pripreme i fotografije. Oni koji posluju po svojoj minimalnoj mogucnosti i gdje im je budget ogranicen sami slikaju mobitelima. Dizajn ne diktira rezoluciju wec tehnicka izvedba web stranice. Srcset je dobar za jedan tip tehnoloske izvedbe stranice, a za drugi ima jedan veliki problem a to je da ne radi na dinamickim suceljima, slike su mutne i neupotrebljive, zato se radi ono sto opisah gore. Na stranicama izrađene po statickoj podrsci (px, rem i em) radit ce kako je i zamisljen, na stranicama izradjenima relativnim odnosima (formula zlatnog reza u kombinaciji sa kamatnim racunom) gdje browser sam racuna velicine, napuste i margine, nece. A danas je previse hibridnih web stranica na kojima srcset jednostavno nema svrhu, iz razloga sto su te hibridne stranice ko buckurisi, imaju malo ovoga i malo onoga... cest problem tema sa Themeforesta.

DPI nije mjera za print vec mjera za broj pixela/tocaka po inchu. Po kojoj se prepoznaje za sto je neki digitalni medij namjenjen, da li za digitalnu uporabu ili print.

Razina kompresije prvenstveno ovisi o vrsti kompresije, da li je to lossy or lossless tip kompresije. webp format koristi oba algoritma ali nije podrzan na 50% browsera. jpeg je lossy. Znaci za jpeg ako je format na webu za prikaz proizvoda 600x600, slika bi trebala biti 1024-1200px x 1024-1200px, cime kompresija onda moze biti jaca, dok kod slike 600x600 kompresija ne smije biti ispod 90% i po tome takva slika ispada teza od one vece rezolucije. Probajte imati na web shopu mutne slike gdje se datalji tekstura i šavova ne vide jasno, prodaja će vam biti jako mala i spora sa takvim artiklima jer vam prezentacija ne valja.

Kompresija nema veze o ciljanoj publici niti bandwidthu, ne postoji ta publika koja ce vam cekati 10 minuta da vam se web ucita. Svaka slika mora biti optimalno uredjena, radilo se o slikarskoj galeriji koja prodaje umjetnine, muzeju, automotiv tuning agenciji ili turistickoj charter agenciji, fashion shopu i sl, zato se i zove optimizacija - sto znaci pronaci sto optimalniji odnos oko bitnih cimbenika, a to je zadovoljiti koliko je moguce odnose tezine, brzine i kvalitete. Pa ni bandwidth nece patiti, a ni publika.

Dizajn definira raspon dimenzija u kojima će se slika prikazati, a samim time i rezoluciju.

Netocno. Tehnicka izvedba definira rezoluciju, a dizajn samo prikaz. Rezolucija je uvijek veca od prikaza na responzivnim stranicama i aplikacijama upravo zato sto nikad ne znate tko od posjetitelja koristi uredjaje sa retina zaslonom.

Moguće, ali, iskreno, još nisam naletio na takav dizajn, osim u slučajevima kad se radilo o dizajnerima koji nisu web dizajneri, pa pokušavaju dizajnirati stranicu kao da je plakat. Međutim, kod takvog dizajna je ovo najmanji od svih problema...

Ne razumijete sto sam napisao jer ne znate da web dizajn je podvrsta grafickog dizajna i zadatak mu je uvodjenje interaktivnosti u graficki dizajn. Konzistentnost je sto web dizajn pokusava ostvariti jako dugo, a uspio je tek uvodjenjem dvodimenzionalnog layout sustava i dinamickih mjernih jedinica, pa jedini nacin da se to dvoje spoji je kamatnim racunom, sto prosiruje pristup dizajnu pa web dizajneri nisu vise prisiljeni koristiti sustav stupaca koji se koristi u pripremi za tisak i odakle je preuzeo pristup kojim su svi html-css-js frameworci danas konstruirani, vec se sada razvoju web stranica moze pristupiti i zlatnim rezom (gdje vecina web dizajnera ne zna ni sto je to niti kako se dizajnira istim - ironija) obzirom da kamatni racun i dvodimenzionalni grid sustav omogucuju izradu fluidnih stranica koje zadrzavaju konzistentnost izgleda ovisno o orjentaciji uredjaja na svim rezolucijama - pa umjesto 6-10 brejkova, dovoljno vam je 2 da pokrijete vise od 95% uredjaja, sto premasuje bilo koji trenutacno framework na trzistu - Bootstrap included - tako da to ujedno nosi i manje koda i brze stranice - cudno da sa time niste upoznati obzirom da je 2018 pusteno u "pogon". Na nesrecu, postoji trenutacno samo jedan takav framework na svijetu i to onaj koji sam ja razvio za svoje stranke kako bih spojio process dizajna sa procesom izrade sucelja. To ne znaci da drugi ljudi rucno bez frameworka ne primjenjuju pristup za sebe i svoje projekte.

Na webu nema razlike između fotografije od 72 DPI i fotografije od 300 DPI, sve dok imaju isti broj piksela - one se prikazuju prema "CSS pikselima", ukoliko CSS-om nije zadano drugačije.

Ponovit cu jos jednom:

"DPI nije mjera za print vec mjera za broj pixela/tocaka po inchu. Po kojoj se prepoznaje za sto je neki digitalni medij namjenjen, da li za digitalnu uporabu ili print."

DPI je samo metapodatak na fotografiji koji print SW-u daje informaciju prema kojoj SW računa print size kad odabereš opciju 1:1, odnosno "original size".

Svaka promjena koja se radi na digitalnim slikama je meta podatak. Taj meta podatak cita i racunalo/zaslon i printer. I u odnosu na pripadajuce meta podatke prikazuje sliku. Ponovit cu jos jednom:

"DPI nije mjera za print vec mjera za broj pixela/tocaka po inchu. Po kojoj se prepoznaje za sto je neki digitalni medij namjenjen, da li za digitalnu uporabu ili print."

DPI je mjera, a vodi se kao meta podatak. Kao sto je i sirina slike meta podatak, a vodi se kao mjera isto, kao sto je i visina, a vodi se kao mjera, kao sto je godina kada je slika napravljena i izmjenjena, a vodi se kao datum... sve su to metapodaci pa pokusavam razumjeti kome je ta recenica bila usmjerena i sa kojim ciljem osim da navede ono sto je jasno svima. Ili bi bar trebalo biti.

Ovo je zanimljiva ideja, ali nisam siguran da je primjenjiva za sve fotke i svakako je ne bih koristio po defaultu bez A/B testa.

Radio sam kao in-house dizajner, developer i fotograf. Svim shopovima za koje sam radio udvostrucio sam online prodaju, a nekima i utrostrucio (kad vam promet skoci za 50 000 - 70 000 eura to nije mala stvar, mozda za vas jest, ali za moje stranke nije). Vama mozda treba da se vi uvjerite, ja ne trebam, napravio sam ih dovoljno i znam kako stvari stoje. Ne trebam milijun puta raditi jedan te isti test ta potvrdim ono sto i sam Google savjetuje u optimizacijama.

Generalno se slažem, ali danas imaš alate poput lighthousa koji ti daju pregled stvarnih performansi kod stvarnih posjetitelja, pa kompresiju možeš tweakati prema stvarnim performansama koje se mogu razlikovati ovisno o ciljanoj publici. Primjerice, ako prodaješ luksuznu robu, veliki udio korisnika će imati najnovije uređaje, živjeti u gradu s dobrom pokrivenošću singala i slično, dok će neke jeftine krpice kupovati veći udio korisnika s 3 godine starim entry level mobitelom... Optimalna kompresija se može razlikovati.

Google insights pokrece Lighthouse. I ne, Insights sluzi iskljucivo za optimizaciju sadrzaja, ne mjeri tocno brzinu. Optimalna kompresija se ne moze razlikovati jer se radi o apsolutnoj vrijednosti ne relativnoj, ili je optimalna ili nije. Trece opcije nema. 3 godine stari entry level mobiteli koriste zalsone i tehnologiju istu kao luksuzni mobiteli, ono sto je drukcije je samo performanse. Kad se slike optimiziraju optimiziraju se za sve bez diskriminacije, ako mislite da kod optimizacije slika ulogu igra demografija, onda cu vam reci kad je u pitanju nestrpljivost, ona ne zna granicu izmedju bogate i siromasne osobe. Zato optimizacija se ne moze razlikovati jer kao sto rekoh ne radi se o relativnoj vrijednosti vec apsolutnoj, ili je nesto optimizirano ili nije.

ako će nekome pomoći, mi smo radili u RAW-u i onda bi ih sredili u Lightroom-u.