Witam,

Mamy przykładową stronę:
http://www.polferries.pl/promy

Tło pod przyciskami zostało zaprojektowane jako niebieskie i takie jest w
IE9. W FF są one bardziej fioletowe. Podobnie z nagłówkami paneli.
Znalazłem winowajcę: ustawienie FF: gfx.color_management.mode. Domyślna
wartość tej opcji (2) mówi przeglądarce, że ma kalibrować kolory (czyli
rozwalać je) dla "tagged" grafiki. Z pewnością nie będę próbował klientowi
przestawić sobie tej opcji na 0 lub nie używać FF więc pozostaje tak
tworzyć grafikę WEBową aby nie była ona traktowana jako "tagged" -
cokolwiek to znaczy. Moje pytanie brzmi - jak zrobić grafikę, która nie
jest "tagged"? Albo jak skonwertować istniejące pliki graficzne do wersji
nie "tagged"?

do góry

Dnia Tue, 20 Dec 2011 20:35:47 +0100, Marek napisał(a):

> Mamy przykładową stronę:
> http://www.polferries.pl/promy
>
> Tło pod przyciskami zostało zaprojektowane jako niebieskie i takie jest w
> IE9. W FF są one bardziej fioletowe. Podobnie z nagłówkami paneli.
> Znalazłem winowajcę: ustawienie FF: gfx.color_management.mode. Domyślna
> wartość tej opcji (2) mówi przeglądarce, że ma kalibrować kolory (czyli
> rozwalać je) dla "tagged" grafiki. Z pewnością nie będę próbował klientowi
> przestawić sobie tej opcji na 0 lub nie używać FF więc pozostaje tak
> tworzyć grafikę WEBową aby nie była ona traktowana jako "tagged" -
> cokolwiek to znaczy. Moje pytanie brzmi - jak zrobić grafikę, która nie
> jest "tagged"? Albo jak skonwertować istniejące pliki graficzne do wersji
> nie "tagged"?

Właśnie zrobiłeś grafikę która jest nie tagged :)
Tagged oznacza po naszemu że grafika ma przydzielony profil. Color
management to bardzo długa bajka, w skrócie jeśli chcesz otrzymać
to co w programie graficznym to:
1. skalibrowany monitor, na potrzeby www to wystarczy ten artykuł:
http://www.obiektywni.pl/czytelnia/artykul-204-0.php
tam są trzy strony, na trzeciej informacje praktyczne
2. odpowiednio ustawione programy graficzne
3. podczas zapisywania pliku graficznego dołącz do niego profil
w jakim był przygotowany

Zobacz jak wygląda te tło przycisku z przydzielonymi różnymi profilami:
http://tmp.slimaczek.pl/tmp/kolory/kolory.html
Jeśli wszystkie wyglądają tak samo to znaczy że przeglądarka nie
ma zarządzania kolorem.
Nie robiłem konwersji tylko dodałem do tego pliku profil, drugi i trzeci
rysunek to profile z http://www.eci.org. Firefoks dawniej obsługiwał tylko
prifile w wersji ICCv2, teraz już chyba ICCv4 także chociaż nie śledze ich
poczynań, tutaj możesz zobaczyć że dalej mają problemy:
https://bugzilla.mozilla.org/show_bug.cgi?id=488800

--
Tomek

do góry

Dnia Wed, 21 Dec 2011 01:14:24 +0100, Tomasz Sowa napisał(a):

> Dnia Tue, 20 Dec 2011 20:35:47 +0100, Marek napisał(a):
>
>
> Właśnie zrobiłeś grafikę która jest nie tagged :)
> Tagged oznacza po naszemu że grafika ma przydzielony profil.

Aaaahaaaa... czyli tagged oznacza załączony ICC? W życiu bym na to nie
wpadł. :-) Z jednej strony bardzo fajna idea a z drugiej ... już to widzę
jak miliony użytkowników laptopów kalibrują sobie ekrany :-D Sam osobiście
widziałem jak ktoś dodał więcej czerwieni do wyświetlanych kolorów monitora
"bo lubi ciepłe kolory" nawet dla kostek lodu :-D

Ale to z kolei prowokuje do kolejnych pytań. Załączenie ICC do obrazka
zwiększa jego wielkość czasem o 100-200kB. Strona zacznie wtedy ważyć ho ho
a może i więcej jeśli składa się z wielu małych obrazków. Widywałem tej
wielkości ICC. Chyba nie do końca Mozilla to przemyślała... albo istnieje
jakaś możliwość przypisania ICC do strony WWW jako defaultowego?

Po drugie dlaczego na jednej stronie część kolorów wyświetla się "dobrze"?
Top jest ta sama grafika tego samego autora. Zauważ, że tylko część we
fiolet wpada.

Po trzecie skoro zrobiłem grafikę nie-tagged a domyślna opcja Gfx.color
management.mode wynosi 2 czyli "Enable color management for tagged graphics
only" to dlaczego jest ona korygowana?

> Color
> management to bardzo długa bajka, w skrócie jeśli chcesz otrzymać
> to co w programie graficznym to:
> 1. skalibrowany monitor, na potrzeby www to wystarczy ten artykuł:
> http://www.obiektywni.pl/czytelnia/artykul-204-0.php
> tam są trzy strony, na trzeciej informacje praktyczne

Ja mam kalibrator sprzętowy więc daję sobie radę :-)

> 2. odpowiednio ustawione programy graficzne

Programów graficznych do robienia grafiki stron WWW typu Fireworks nie da
się "ustawiać". To raczej jest domeną programów DTP. Czy można np. w
Photoshopie dodtać jakimś batchem profile do wielu obrazków jednym
kliknięciem?

> 3. podczas zapisywania pliku graficznego dołącz do niego profil
> w jakim był przygotowany

Teraz już rozumiem w czy rzecz z wyjątkie faktu, że FF przy ustawionej
wartości 2 parametru nie powinien korygować grafiki nie zawierającej ICC a
robi to.

> Zobacz jak wygląda te tło przycisku z przydzielonymi różnymi profilami:
> http://tmp.slimaczek.pl/tmp/kolory/kolory.html

Tak, rozumiem już o co chodzi z wyjątkiem obrazka nr 1. On jest przecież
untagged a zachowuje się jako tagged. W dodatku nie wiadomo skąd brany jest
profil do jego korekcji skoro żaden nie został załączony.

> Nie robiłem konwersji tylko dodałem do tego pliku profil, drugi i trzeci
> rysunek to profile z http://www.eci.org. Firefoks dawniej obsługiwał tylko
> prifile w wersji ICCv2, teraz już chyba ICCv4 także chociaż nie śledze ich
> poczynań, tutaj możesz zobaczyć że dalej mają problemy:
> https://bugzilla.mozilla.org/show_bug.cgi?id=488800

Dzięki :-) Sporo mi to rozjaśniło choć lecz mam nowe niejasności :-(

do góry

Dnia Wed, 21 Dec 2011 10:54:15 +0100, Marek napisał(a):

> Aaaahaaaa... czyli tagged oznacza załączony ICC? W życiu bym na to nie
> wpadł. :-)

Tak i tu jest to co nie sprawdziłem wczoraj. PNG ma dodatkowy ficzer, można
w nim określić że obrazek był przygotowany w SRGB (sRGB color space
indicator). To mi właśnie spokoju nie dawało że wyświetlał się tak samo jak
z profilem "sRGB Color Space Profile.icm". Firefox zastosował do niego
zwykły profil srgb. Mała poprawka na stronie:
http://tmp.slimaczek.pl/tmp/kolory/kolory.html

Pierwszy obrazek oryginalny, drugi z usuniętą informacją o srgb. W FF
wyglądają prawie tak samo, jak zrobisz screenshota i zmierzysz kolor to
zobaczysz że nieznacznie się różnią. I jak sprawdziłem to rzeczywiście
drugi się wyświetla bez zarządzania kolorem (wartości rgb wyświetlane są
takie jak zapisane w pliku -- możesz to sprawdzić otwierając obrazek w
jakiejś starej przeglądarce bez obsługi zarządzania kolorem).

> Z jednej strony bardzo fajna idea a z drugiej ... już to widzę
> jak miliony użytkowników laptopów kalibrują sobie ekrany :-D Sam osobiście
> widziałem jak ktoś dodał więcej czerwieni do wyświetlanych kolorów monitora
> "bo lubi ciepłe kolory" nawet dla kostek lodu :-D

Pracując pare lat przy przygotowywaniu prac do druku widziałem jaką
zawodowi graficy mają wiedzę o kolorach więc tym bardziej nie wymagałbym
jej od zwykłych ludzi :)

> Ale to z kolei prowokuje do kolejnych pytań. Załączenie ICC do obrazka
> zwiększa jego wielkość czasem o 100-200kB. Strona zacznie wtedy ważyć ho ho
> a może i więcej jeśli składa się z wielu małych obrazków. Widywałem tej
> wielkości ICC.

Zobacz na ten profil co użyłem: "eciRGB_v2_ICCv4.icc". Plik nieznacznie
się zwiększył.

> Chyba nie do końca Mozilla to przemyślała... albo istnieje
> jakaś możliwość przypisania ICC do strony WWW jako defaultowego?

A tego nie wiem.

> Po drugie dlaczego na jednej stronie część kolorów wyświetla się "dobrze"?
> Top jest ta sama grafika tego samego autora. Zauważ, że tylko część we
> fiolet wpada.

Jeśli mówisz o tym pliku:
http://www.polferries.pl/ximages/header-bg.png
To on nie ma ustawionej przestrzeni sRGB. I pewnie dlatego wyświetla się
'normalnie'. Użyj tego narzędzia żeby sprawdzić i usunąć informację o srgb:
http://entropymine.com/jason/tweakpng/

> Po trzecie skoro zrobiłem grafikę nie-tagged a domyślna opcja Gfx.color
> management.mode wynosi 2 czyli "Enable color management for tagged graphics
> only" to dlaczego jest ona korygowana?

No to jednak była tagged, sorry wprowadziłem w błąd ;)

> Programów graficznych do robienia grafiki stron WWW typu Fireworks nie da
> się "ustawiać". To raczej jest domeną programów DTP.

Nie wiem jak fireworks nigdy go nie używałem ale w gimpie są ustawienia:
menu Edycja -> Preferencje -> Zarządzanie kolorami
a profil do obrazka można dodać poprzez:
menu Obraz -> Tryb -> Assign Color profile

> Czy można np. w
> Photoshopie dodtać jakimś batchem profile do wielu obrazków jednym
> kliknięciem?

Nagraj akcję i później Automate -> Batch. No tak przynajmniej było
w wersji 7 którą kiedyś używałem.

--
Tomek

do góry

W dniu 2011-12-21 01:14, Tomasz Sowa pisze:

> Tagged oznacza po naszemu że grafika ma przydzielony profil. Color
> management to bardzo długa bajka, w skrócie jeśli chcesz otrzymać
> to co w programie graficznym to:
> 1. skalibrowany monitor, na potrzeby www to wystarczy ten artykuł:
> http://www.obiektywni.pl/czytelnia/artykul-204-0.php
> tam są trzy strony, na trzeciej informacje praktyczne
> 2. odpowiednio ustawione programy graficzne
> 3. podczas zapisywania pliku graficznego dołącz do niego profil
> w jakim był przygotowany
>


Ale po co. Ja po prostu zapisując pliki nie dołączam żadnego ICC, tylko
wszystko zapisuję jako standardowy sRGB i po krzyku ;-]

Pozdr
Exe Very Cute

do góry

Dnia Wed, 21 Dec 2011 12:45:44 +0100, Tomasz Sowa napisał(a):

>> Chyba nie do końca Mozilla to przemyślała... albo istnieje
>> jakaś możliwość przypisania ICC do strony WWW jako defaultowego?
>
> A tego nie wiem.

CSS3 przychodzi z pomocą:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#co
lor-profile

Zauważ że:
"For images that do not have a profile, the sRGB profile is used..."
Więc specyfikacja chce aby nie otagowane grafiki były traktowane jak
zrobione w sRGB. Więc pewnie za jakiś czas Firefoks będzie stosował
zarządzanie kolorem do wszyskich obrazków (nie tylko tagged).

--
Tomek

do góry

Dnia Wed, 21 Dec 2011 12:45:44 +0100, Tomasz Sowa napisał(a):

> Tak i tu jest to co nie sprawdziłem wczoraj. PNG ma dodatkowy ficzer, można
> w nim określić że obrazek był przygotowany w SRGB (sRGB color space
> indicator). To mi właśnie spokoju nie dawało że wyświetlał się tak samo jak
> z profilem "sRGB Color Space Profile.icm". Firefox zastosował do niego
> zwykły profil srgb. Mała poprawka na stronie:
> http://tmp.slimaczek.pl/tmp/kolory/kolory.html

No to dotarliśmy do sedna. Jak to cholerstwo wyłączyć? Chyba poniżej dajesz
mi odpowiedź :-)

> Zobacz na ten profil co użyłem: "eciRGB_v2_ICCv4.icc". Plik nieznacznie
> się zwiększył.

Tak - no bo taki mały zastosowałeś profil. Sam widziałem jak JPGi
zwiększały się o 200kB czasem gdy włączyliśmy osadzanie profilu.

> No to jednak była tagged, sorry wprowadziłem w błąd ;)

Grunt, że wiemy w czym rzecz, uffff :-)

Dzięki !

do góry

Dnia Wed, 21 Dec 2011 13:03:47 +0100, Tomasz Sowa napisał(a):

> Dnia Wed, 21 Dec 2011 12:45:44 +0100, Tomasz Sowa napisał(a):
>
>>> Chyba nie do końca Mozilla to przemyślała... albo istnieje
>>> jakaś możliwość przypisania ICC do strony WWW jako defaultowego?
>>
>> A tego nie wiem.
>
> CSS3 przychodzi z pomocą:
> http://www.w3.org/TR/2003/CR-css3-color-20030514/#co
lor-profile
>
> Zauważ że:
> "For images that do not have a profile, the sRGB profile is used..."
> Więc specyfikacja chce aby nie otagowane grafiki były traktowane jak
> zrobione w sRGB. Więc pewnie za jakiś czas Firefoks będzie stosował
> zarządzanie kolorem do wszyskich obrazków (nie tylko tagged).

Bomba! :-) Dzięki raz jeszcze.

do góry

Dnia Wed, 21 Dec 2011 12:55:26 +0100, Exe Very Cute napisał(a):

>
> Ale po co. Ja po prostu zapisując pliki nie dołączam żadnego ICC, tylko
> wszystko zapisuję jako standardowy sRGB i po krzyku ;-]

Właśnie dopiero wtedy krzyk się podnosi :-D Nagle klient zaczyna marudzić,
że strona (obrazki) pod FF wygląda zupełnie inaczej niż pod IE czy Chrome.
:-)

do góry

Dnia Wed, 21 Dec 2011 13:28:52 +0100, Marek napisał(a):

> No to dotarliśmy do sedna. Jak to cholerstwo wyłączyć? Chyba poniżej dajesz
> mi odpowiedź :-)

Photoshop znany jest z tego że nie optymalizuje dobrze plików png.
Zobacz pngcrush (to poniższe to jedna linia tylko się przełamało):
$ pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB main-menu-tab-sprite.png
main-untagged.png

Usunie to wszystkie informacje o kolorze:
http://tmp.slimaczek.pl/tmp/kolory/main-untagged.png

Można też dodać profil:
$ pngcrush -rem iCCP -rem sRGB -iccp 5000 "profil ICC" eciRGB_v2_ICCv4.icc
main-menu-tab-sprite.png taggedv4.png

http://tmp.slimaczek.pl/tmp/kolory/taggedv4.png

A że pngcrush to konsolowe narzędzie to można napisać skrypcik:
#!/bin/sh

for i in *.png ; do
pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$i" "$i.new"
mv "$i.new" "$i"
done

i skonwertować wszystko jednym kliknięciem ;)

--
Tomek

do góry