W jakim formacie zapisywać grafikę dla stron www? Do tej pory używałem jpg (jakość 80%) albo gif. Ale photosop generuje dosyć duże pliki. Czy pojedyncze pliki (np. przyciski, logo) o rozmiarze 8kb to dużo?

8kB na jeden mały przycisk/logo to zdecydowanie za dużo. Photoshop może generować i mniejsze pliki, od tego jest opcja zapisu dla sieci Web.

Jeśli zapisuję z opcją dla sieci WEB to większość kolorów jest niedostępna. Muszę rezygnować z kolorów, które przeglądarki i tak wyświetlają. Mówię np o logo o wymiarach 129x125. Rozmiar: 8,76KB (rozmiar na dysku: 12KB)

Zapisz ponownie używając innego programu graficznego np. gimpa. Nie wiem jak wgląda to w photoshopie ale napewno masz gdzieś ustawienia kompresji/jakości.

W Photoshopie naprawdę dobrze da się zapisać obrazek dla sieci web (i pierwsze słyszę, że większość kolorów jest niedostępna, przynajmniej dla pnga z pewnością nie, nadmienię, że pracuję na leciwej wersji 7). Przyciski i inne małe rzeczy proponuję jako png-8. Liczba kolorów jest tam ograniczona, ale obrazki małe nie odczują tego spadku jakości, chyba że ktoś naprawdę przesadził je projektując. Przy większych obrazkach, jeśli takie są, można pobawić się ustawieniami i również znacząco zmniejszyć rozmiar.

Panowie jest kompresja. Przykładowo dla jpg nie ma sensu schodzić poniżej 80% bo już widać "zanieczyszczenia" na grafice. Co do png to są problemu z IE i nie chcę stosować hacków/tricków żeby wyświetlić je w IE poprawnie. Dla ciekawostki podam, że photoshop zapisuje gify o większym rozmiarze niż jpg.. :/ Dziwne..

Co do png, to problemy są tylko przy przezroczystości, skoro tworzysz jpegi to pewnie z niej nie korzystasz, prawda?

ps. Jestem kobietą

Zdjęcia itp. - jpg
Screenshoty, obrazki o małych szczegółach, ikonki itp. - png

http://pornel.net/pnghowto

A gdybym chciał skorzystać z gifa? Jakie parametry najlepiej poustawiać (w okienku zapisu dla web) aby nie stracić w gif na jakości i żeby był mały?

Możecie podać przykładowe wymiary obrazków/przycisków/ikon, które wykonywaliście, w jakim formacie zapisywaliście i ile one zajmowały (również miejsca na dysku)? Chciałbym mieć jakieś porównanie..

Z mojego ostatniego projektu:
27x27 png ~20 kolorów - 980 bajtów
39x28 png ~10 kolorów - 600 bajtów
14x14 gif ~20 kolorów - 900-1024 bajtów
70x19 png ~20-30 kolorów 1k bajtów
150-300x30 ~200-255 kolorów 3-6k bajtów


Wszystko na szybko, bez żadnej kompresji

proboj i pobaw sie
najlepsza metoda

Jaki format? png czy jpg?

Eh jak to robisz (możesz napisać krok po kroku, jakie opcje wybierasz?)? Ja już wszystkie opcje sprawdziłem. Oczywiście mogę wygenerować gif czy jpg a nawet png o rozmiarze ~2,5kb ale jakoś pozostawia wiele do życzenia.

png

Chodzi ogólnie o to, żeby popróbować wszystkie możliwe ustawienia tak, aby spadek jakości był jak najmniej zauważalny.
Masz tam pewnie takie opcje jak adaptatywny/selektywny/web itd (musiałabym zmienić na polski i zrestartować, nie chce mi się) adaptacoś tam zajmuje najmniej, przy praktycznie niezauważalnym spadku jakości. W tym następnym okienku (poniżej) wybieraj, jeśli możesz pierwszą opcję (brak ditheringu, czy jak to tam po polsku się zwie).

Zmniejszaj liczbę kolorów, obserwując spadek jakości - do takiego pułapu, że jeszcze tego spadku nie widać, ale na rozmiar obrazka to wpływa. Tak samo z "web snap" - ostatnia pozycja po prawej. Ustawiaj na coraz większy i uważnie obserwuj co się dzieje z obrazkiem.

http://www.pckurier.pl/archiwum/art0.asp?ID=4759 - masz kilka przydatnych prócz psa narzędzi, dzięki którym możesz zmniejszyć rozmiar grafiki.

R$ozumiem i tak robię ale nadal wychodzi zbyt dużo KB




Dzięki za linka, poczytałem sobie. Ale nadal mam problem - za duże grafiki..
Jeżeli wybieram png-24 to praktycznie nie mam co kombinować - są tylko dwie opcje do wyboru (z przeplotem i przezroczystość). W png-8 są dostępne:
1. lewa strona
- z przeplotem (checkbox)
- kanały (wizualna, selektywna, adaptacyjna, ograniczony, specjalna i jeszcze kilka które na pewno nie wykorzystam)
- poniżej checkbox - przezroczystość
- select (bez ditheringu, dithering dyfuzyjny, dithering przezroczystości wzorka i dithering przezroczystości szumu)

2. prawa strona
- (checkbox) z przeplotem
- kolory (max 256)
- dithering (max 100%)
- otoczka
- wartość
- web

Może tak będziesz w stanie podać dokładnie co i jak Ty ustawiasz?
Co to jest ten dithering i kanały (adaptacyjny itp) ?

http://pl.wikipedia.org/wiki/Dithering_(grafika_komputerowa)

Do niektórych zastosowań (np. zdjęcia) png się po prostu nie nadaje. Stąd duże rozmiary.

Zdecydowanie nie będę w stanie podać co dokładnie, bo z niektórymi buttonami jestem w stanie zejść poniżej 50 kolorów, a z innymi na przykład poniżej 200 nie ruszy. Tak samo z tym web po prawej stronie, to wszystko ustalam na oko obserwując jednocześnie jak zmienia się rozmiar Z przeplotem ustawiam tylko i wyłącznie jeśli muszę uzyskać faktycznie bardzo dobrą jakość. Przezroczystość odznaczam tam gdzie jej nie ma. I korzystam z opcji bez ditheringu - zajmuje mniej miejsca. Po prawej dithering ustawiam "naocznie" ciężko jest powiedzieć dokładnie. Otoczki i wartości przeważnie się nie tykam.

o ditheringuW angielskiej masz to jeszcze ładniej obrazkowo przedstawione, chociaż oczywiście przerysowane.

Jeśli chodzi o kanały musiałabym pewnie poszukać trochę więcej, aktualnie nie mam za bardzo czasu. Nie wiem czy na googlach da się to tak łatwo znaleźć, ja w razie czego w domu mogę jeszcze poszperać w notatkach.