GRAFIKA SIECIOWA. WYKŁAD 2 Optymalizacja grafiki. Jacek Wiślicki Katedra Informatyki Stosowanej

Transkrypt

1 GRAFIKA SIECIOWA WYKŁAD 2 Optymalizacja grafiki Jacek Wiślicki Katedra Informatyki Stosowanej

2 Optymalizacja W kontekście grafiki optymalizacja stanowi proces uzyskiwania równowagi pomiędzy jakością obrazu, a wielkością zawierającego go pliku. Jest ona szczególnie istotna dla obrazów publikowanych na stronach WWW, gdzie zbyt duże pliki mogą znacznie spowolnić ładowanie strony. 2

3 Optymalizacja Przykładowo, na łączu 512 kbps zdjęcie wielkości 1 MB ładuje się w ciągu ok. 16 sekund, a ten sam obraz prawidłowo skompresowany do wielkości 200 kb załaduje się w ciągu ok. 3 sekund. Różnice w działaniu strony staną się jeszcze bardziej zauważalne, jeżeli będzie się na niej znajdowało więcej zdjęć. 3

4 Optymalizacja ImageReady i Photoshop pozwalają optymalizować grafikę z jednoczesnym podglądem postaci skompresowanej (widać zarówno jakość obrazu, jak i rozmiar pliku dla różnych ustawień kompresji). Można jednocześnie uzyskać dla porównania cztery podglądy i wybrać z nich najlepszą dla naszych potrzeb kombinację ustawień. 4

5 Optymalizacja W Photoshop proces optymalizacji jest bardzo podobny do ImageReady (opcja Zapisz dla Weba w menu Plik). Poniższy opis dotyczy ImageReady, jednak można wspierać się nim także podczas pracy w Photoshop. Wykorzystane zostały materiały dostępne na stronie: 5

6 Optymalizacja W palecie optymalizacji (jeżeli jest niewidoczna, należy ją uaktywnić z menu Okno) należy ustawić parametry procesu. 6

7 Optymalizacja Wybierzmy widok, który jest dla nas odpowiedni (zakładki na górze okna obrazu). 7

8 Optymalizacja Oryginalny (nieskompresowany): 8

9 Optymalizacja Skompresowany (na podstawie ustawień w palecie optymalizacji): 9

10 Optymalizacja Porównanie obrazu oryginalnego ze skompresowanym (na podstawie ustawień w palecie optymalizacji): 10

11 Optymalizacja Porównanie obrazu oryginalnego ze skompresowanym według trzech różnych ustawień: 11

12 Optymalizacja Podczas optymalizacji zalecane jest używanie widoku zawierającego porównanie z obrazem oryginalnym. Zauważmy, że na dole każdego widoku zawarta jest informacja na temat wyniku optymalizacji (format i wielkość pliku, czas potrzebny na pobranie, itp.). 12

13 Wybór typu kompresji Należy dokonać wyboru typu stosowanej kompresji. Każdy standard ma swoje "za" i "przeciw". Powinniśmy rozważyć następujące czynniki: czy grafika składa się z linii, jakiegoś tekstu, logo, czy też jest innego rodzaju grafiką bez gradientów kolorów? Czy zawiera obszary jednolitego koloru i ostre brzegi? (GIF, PNG-8, PNG-24). 13

14 Wybór typu kompresji czy jest to bardziej realistyczna kompozycja lub fotografia z płynnymi przejściami kolorów (JPEG, PNG-24), 14

15 Wybór typu kompresji ile zawiera kolorów? Jeżeli więcej niż 256 i nie można zmniejszyć ich liczby użyjmy JPEG lub PNG-24, 15

16 Wybór typu kompresji jakiej przeglądarki będą używać potencjalni odbiorcy? Jeżeli będą to starsze wersje (kilka lat), nie używajmy PNG, 16

17 Wybór typu kompresji czy chcemy na pewno uzyskać jak najmniejszy plik? Jeżeli chcemy obrazy zarchiwizować np. na płycie CD, rozmiar plików nie jest aż tak istotny jak dla WWW. Jeżeli rozmiar jednak ma znaczenie ;) zdecydowanie unikajmy PNG-24, 17

18 Wybór typu kompresji czy potrzebujemy jakichś specjalnych cech? JPEG na pewno nie pozwoli nam na uzyskanie przeźroczystości, za to zapewni progresywność. GIF oferuje animacje, a PNG wielopoziomową przeźroczystość. 18

19 Wybór typu kompresji Odpowiedź na powyższe pytanie powinna pozwolić nam ograniczyć rozważane typy kompresji do jednego lub dwóch, które możemy obserwować podczas procesu optymalizacji. 19

20 Porównanie wyników Dla każdego z wybranych typów kompresji możemy ustawić odpowiednie parametry (klikając na polu podglądu, pojawia się czarna ramka) w palecie optymalizacji. Pamiętajmy, aby pozostawić niezmieniony obraz oryginalny, aby nie stracić porównania. 20

21 Porównanie wyników Dla każdego wybranego typu kompresji (możemy także wykonywać 3 jednakowe kompresje, np. JPEG czy GIF z różnymi ustawieniami) starajmy się ustawić jak najlepsze parametry w palecie optymalizacji i obserwujmy jak zmienia się obraz w odpowiednim polu podglądu (najlepiej w drugiej zakładce, porównując tylko z obrazem oryginalnym). 21

22 Porównanie wyników Wybierzmy tą kompresję, która najlepiej spełnia wszystkie założone cele. Jeżeli wciąż nie osiągnęliśmy zamierzonego efektu, próbujemy dalej. 22

23 Zapisywanie Podczas zapisywania pliku mamy do wyboru aż cztery opcje: Zapisz, Zapisz jako..., Zapisz zoptymalizowane, Zapisz zoptymalizowane jako... 23

24 Zapisywanie Zapisz i Zapisz jako... zapisują bieżący oryginalny niezoptymalizowany obraz w formacie PSD (pod bieżącą nazwą lub inną nazwą, odpowiednio). 24

25 Zapisywanie Zapisz zoptymalizowane i Zapisz zoptymalizowane jako... pozwalają na zapis zoptymalizowanej wersji w jednym z "sieciowych" formatów. 25

26 Zapisywanie Zapisz zoptymalizowane zapisuje obraz w postaci zoptymalizowanej zależnie od wybranego formatu (w oknie dialogowym należy wybrać tylko obrazy ). Nie zmienia oryginalnego pliku PSD (aby go zapisać należy użyć opcji Zapisz). 26

27 Zapisywanie Można także otrzymać gotowy dokument HTML ( HTML i obrazy ), jeżeli nasz obraz wymaga wygenerowania specyficznego kodu HTML (np. akcje JavaScript). 27

28 Zapisywanie Zapisz zoptymalizowane jako... działa podobnie, ale pozwala na zapis zoptymalizowanego pliku pod inną nazwą. 28