Grafika internetowa Optymalizacja grafiki.

Podstawy pliku obrazu

Modele kolorowe

Ludzka percepcja koloru opiera się na reakcji układu wzrokowego na działanie światła o różnych długościach fal. Białe światło jest złożonym światłem składającym się z promieni o różnej chromatyczności: czerwony, pomarańczowy, żółty, zielony, niebieski, niebieski, fioletowy - taki rozkład nazywany jest widmem . Jeśli białe światło pada na biały obiekt, wtedy odbijają się od niego wszystkie składniki białego światła i widzimy biały kolor obiektu. Jeśli białe światło pada na zielony obiekt, wówczas wszystkie składniki światła są pochłaniane przez powierzchnię obiektu i odbija się tylko zielony komponent, w wyniku czego widzimy zielony kolor obiektu. Podobnie w przypadku innych kolorów: czerwonego, niebieskiego, zielonego itp. Jeśli światło pada na powierzchnię czarnego koloru, wtedy wszystkie składniki widma są pochłaniane i widzimy czarny obiekt. Zatem kolor otaczających nas obiektów jest uzyskiwany przez odjęcie poszczególnych składowych widmowych od bieli. Ta metoda uzyskiwania koloru jest nazywana „syntezą subtraktywną (subtraktywną)”.

Jeśli jednak spojrzysz na ekran monitora przez szkło powiększające, zobaczysz, że kolor dowolnego punktu na ekranie (piksel) składa się z trzech punktów świetlnych o różnych kolorach: czerwonym ( R ), zielonym ( G ) i niebieskim ( B ). Ponieważ w tym przypadku nie mamy do czynienia ze światłem odbitym, ale z ekranem świetlnym, to nie odejmowanie składników od koloru podstawowego, lecz dodanie kolorów promieni świetlnych. Ten model mieszania kolorów nazywany jest dodatkiem . Czarny kolor w tym przypadku jest uzyskiwany, jeśli nie dotyczy to żadnego z trzech kolorów. Biały kolor uzyskuje się przez zmieszanie czystego promieniowania trzech podstawowych kolorów (czerwonego, zielonego i niebieskiego) o maksymalnej jasności.

Do tworzenia obrazów na monitorach, telewizorach, projektorach użyj addytywnego schematu kolorów RGB ( R ed, G reen, B lue). Dowolny kolor na ekranie uzyskuje się przez zmieszanie składników kolorów czerwonego, zielonego i niebieskiego o różnym natężeniu.

Pracując z edytorami grafiki, spotykamy również inne modele kolorów.

Model kolorów CMYK jest przeznaczony do pracy z kolorem odbitym, tj. jest subtraktywny. Kolorowymi elementami tego modelu są kolory: cyjan (cyjan), magenta (magenta), żółty (żółty) i czarny (blacK). Cyjan, magenta i żółty są uzyskiwane przez odjęcie podstawowych kolorów modelu RGB od bieli. Kolor czarny jest ustawiany osobno, ponieważ technologicznie niemożliwe jest uzyskanie koloru czarnego przez mieszanie farb. Wkłady nowoczesnych urządzeń drukujących zawierają farby tych czterech kolorów. W grafice komputerowej model CMYK służy do przygotowywania drukowanych dokumentów.

Model kolorów HSB
Systemy kolorów RGB i CMYK podlegają ograniczeniom sprzętowym (monitor komputerowy w przypadku RGB i atrament drukarski w przypadku CMYK).
Model kolorów HSB jest najwygodniejszy dla osoby, ponieważ Dobrze wpisuje się w ludzki model postrzegania kolorów.
Komponenty modelu HSB to:

• ton ( H ue)
• nasycenie ( S aturacja)
• jasność kolorów (poprawność B )

Obrazy cyfrowe

Obszar grafiki komputerowej związany z tworzeniem i przetwarzaniem obrazów cyfrowych Obraz cyfrowy (DI) jest modelem rzeczywistego obrazu przechowywanego w pamięci komputera jako kombinacja liczb. Modeluj uproszczoną reprezentację obiektu lub procesu

Im bardziej szczegółowy obiekt, tym lepszy model. Z drugiej strony, im dokładniej, tym więcej pamięci zajmuje i tym dłużej trwa przetwarzanie.

QI można podzielić na dwie kategorie:

1. raster
2. wektor

Model wektorowy to lista parametrów, które matematycznie opisują obiekty.

Zalety modelu wektorowego to

• kompaktowość
• łatwość modyfikacji
• skalowalność

Do negatywnych funkcji należą:

• im bardziej złożony obraz, tym dłużej będzie wyświetlany na ekranie (ponownie obliczony)
• niemożliwe do opisania prawdziwych obiektów.

Piksel to najmniejszy element logiczny dwuwymiarowego obrazu cyfrowego w grafice rastrowej. Obraz modelu rastrowego jest opisany jako zbiór punktów (pikseli), dla każdego z nich określony jest określony kolor.

Zalety modelu rastrowego:

• możliwość tworzenia niemal każdego rysunku opisującego prawdziwe obiekty
• szybkie przetwarzanie obrazu, jeśli nie jest używane skalowanie

Wady modelu rastrowego obejmują

• utrata jakości obrazu podczas skalowania
• duży rozmiar pliku

Wady modelu rastrowego są bezpośrednio związane z funkcją przechowywania informacji w formacie rastrowym - konieczne jest przechowywanie informacji o kolorze każdego punktu na obrazie. Istnieją sposoby na zmniejszenie rozmiaru plików obrazów rastrowych - tak zwane algorytmy kompresji.

Formaty obrazów internetowych.

Obecnie istnieje wiele formatów do przechowywania obrazów cyfrowych (DI), zarówno rastrowych, jak i wektorowych. Wśród formatów wektorowych najbardziej znane są skalowalna grafika wektorowa (SVG i SVGZ), Flash (SWF) i Corel Draw (CDR). Najczęstsze formaty rastrowe to Bitmap Picture (BMP), Joint Photographic Experts Group (JPEG), Graphic Interchange Format (GIF), Portable Network Graphic (PNG), Tagged Image File Format (tiff), Photoshop Document (PSD).

Na stronach witryn dozwolone jest używanie trzech formatów rastrowych - GIF, JPEG i PNG. Wszystkie trzy z tych formatów są skompresowane, ale używają różnych algorytmów kompresji, więc każdy z tych formatów ma swoją własną charakterystykę.

Format JPEG jest najbardziej odpowiedni do kompresji zdjęć i obrazów zawierających płynne przejścia jasności i koloru. Kompresja plików tego formatu opiera się na uśrednianiu kolorów sąsiadujących pikseli. Dlatego przy wysokim stopniu kompresji można zauważyć rozmycie krawędzi obrazu. Algorytm kompresji używany w formacie JPEG należy do kategorii algorytmów kompresji stratnej jakości (oznacza to, że skompresowany w ten sposób obraz nie może zostać dokładnie odtworzony).

Pliki obrazów JPEG mają rozszerzenie .jpg (czasami znaleziono .jpeg)

Szczególną cechą formatu GIF jest użycie indeksowanej palety kolorów. Wszystkie kolory obrazu są numerowane i przechowywane w specjalnej tabeli. Tak więc zamiast przechowywania informacji o kodzie kolorów każdego punktu obrazu, tabela kolorów i numery kolorów każdego punktu są przechowywane w pliku w formacie GIF. Jednocześnie liczba kolorów w tabeli nie może przekraczać 256. Oczywiście ten format jest odpowiedni do przechowywania obrazów „o niskim kolorze”, takich jak logo, czcionki, rysunki, obrazy czarno-białe i nie nadaje się na przykład do zapisywania zdjęć jesiennego lasu. liczba naturalnych odcieni wielokrotnie przekracza możliwą liczbę kolorów palety. Algorytm kompresji używany przez format należy do kategorii bezstratnych algorytmów kompresji .

W przeciwieństwie do formatu JPEG, format GIF obsługuje możliwość tworzenia prostych animacji.

Inną cechą tego formatu jest możliwość uczynienia jednego z kolorów obrazu przezroczystym. Po umieszczeniu na stronie internetowej przez piksele w przezroczystym kolorze, tło strony będzie widoczne.

Pliki graficzne w formacie GIF mają rozszerzenie .GIF

Format PNG został stworzony jako bezpłatna alternatywa dla formatu GIF, który do 2004 r. Nie był dostępny do bezpłatnego użytku. PNG łączy możliwości JPEG (przechowywanie praktycznie nieograniczonej liczby kolorów) i GIF (obsługa przezroczystości).

Pliki PNG mają rozszerzenie .png

Zoptymalizuj grafikę w Internecie.

Optymalizacja to obowiązkowy krok w przygotowaniu obrazów do publikacji w Internecie. W ramach optymalizacji obrazu powszechnie rozumie się zmniejszenie rozmiaru („wagi”) pliku graficznego, który zależy przede wszystkim od rozmiaru obrazu , przy zachowaniu odpowiedniej jakości.

Rozmiar obrazu rastrowego liczba pikseli zawartych w obrazie, poziomo i pionowo Rozdzielczość ekranu monitora jest wielkością obrazu wynikowego w pikselach.

Rozmiar zdjęcia zrobionego nowoczesnym aparatem cyfrowym może wynosić około 3500x2500 pikseli. Rozdzielczość nowoczesnych monitorów wynosi od 1024 × 768 do 1600 × 900. Oczywiście umieszczenie obrazu oryginalnego rozmiaru na stronach witryny jest niepraktyczne - po prostu nie mieści się na ekranie.

Możesz zmienić rozmiar obrazu za pomocą edytora graficznego lub konwertera graficznego.

Przykłady komercyjnych i bezpłatnych programów do przetwarzania obrazów:

• Komercyjne:
  • Adobe Photoshop - edytor graficzny
  • ACDSee Graphical Viewer / Converter
• Bezpłatne:
  • GIMP - edytor graficzny
  • Przeglądarka / konwerter graficzny XnView

Podstawy XnView

XnView to wieloplatformowy program do przeglądania obrazów, który obsługuje przeglądanie ponad 400 i zapisywanie (konwertowanie) do 50 różnych formatów plików graficznych i multimedialnych. Program jest dystrybuowany bezpłatnie do użytku niekomercyjnego i edukacyjnego.

Oficjalna strona programu: http://www.xnview.com/

Najważniejsze funkcje podczas przeglądania obrazów:

• Pliki trybu podglądu (miniatury).
• Wyświetl pliki w oknie iw trybie pełnoekranowym.
• Zmniejsz / zwiększ pozorny rozmiar obrazu.
• Zobacz wielostronicowe i animowane obrazy.
• Odbieraj obrazy ze skanera.
• Wyświetla informacje o obrazie, w tym informacje EXIF ​​i IPTC.
• Liczenie liczby kolorów użytych na zdjęciu.
• Wyświetla pliki w trybie pokazu slajdów w oknie i na pełnym ekranie.
• Ustaw obraz, który chcesz wyświetlić jako tapetę pulpitu.
• Możliwość ustawienia niektórych folderów jako ulubionych dla szybkiego dostępu do nich.
• Wyświetl pliki wideo z odpowiednimi kodekami w systemie.

Główne funkcje podczas edycji obrazów:

• Wybieranie części obrazu, wycinanie, kopiowanie wybranej części do schowka, wklejanie ze schowka.
• Obróć obraz.
• Konwersja wzorów kolorów, zastępując paletę kolorów.
• Zmień rozmiar obrazu.
• Wstaw pole tekstowe.
• Zastosowanie do obrazu różnych efektów.
• Korekcja efektu czerwonych oczu.

Inne funkcje programu

• Tworzenie strony internetowej z obrazów.
• Konwertuj format pliku obrazu.
• Utwórz zrzuty ekranu.
• Obsługa wtyczek, w tym dla Adobe Photoshop.
• Integracja z Total Commander.
• Tworzenie list plików.
• Nagrywanie obrazów na płytę CD (wymaga Nero Burning ROM w systemie).

Podstawowe elementy interfejsu

Menu zawiera wszystkie główne funkcje programu Pasek kart służy do poruszania się między oknami programu Paski narzędzi debugują elementy menu głównego, zapewniają szybki dostęp do funkcji programu Panel drzewa znajduje się domyślnie w lewej części okna programu, umożliwia przejście do żądanego katalogu, wyszukiwanie plików i foldery na komputerze iw sieci lokalnej Panel podglądu zawiera kilka kart, na karcie Podgląd zaznaczony jest podgląd obraz, zakładka Właściwości wyświetla informacje o pliku obrazu i obrazie, który zawiera:

• Nazwa pliku
• Opis
• Rozmiar pliku
• Daty utworzenia i otwarcia
• Format obrazu
• Szerokość i wysokość obrazu
• Model kolorów
• Metoda kompresji
• i inni

Pasek stanu zawiera informacje o

• liczba obiektów w bieżącym katalogu,
• liczba wybranych obiektów
• ilość miejsca na dysku zajmowanego przez obiekty
• wybrany obiekt

Obszar roboczy edytora (domyślnie w prawej części okna) wyświetla zawartość bieżącego katalogu. Aby wyświetlić obiekt za pomocą podwójnego kliknięcia. Każdy obraz podczas przeglądania otwiera się w osobnej zakładce (patrz Rysunek 2).

Rysunek 2

1. Pasek kart. 2. Zakładka „Przeglądarka”.

3. Nazwa i rozszerzenie pliku obrazu. 4. Rozmiar pliku. 5. Rozmiar obrazu

Możesz przeglądać obrazy, przełączając się między kartami.

Możesz wrócić do przeglądania drzewa katalogów, przechodząc do zakładki „Przeglądarka”.

Podstawowa edycja obrazu XnView

Najczęstsze zadanie związane z publikacją obrazów w sieci - konieczność zmniejszenia rozmiaru obrazu.

Ważne jest, aby pamiętać:

1. Zmniejszenie rozmiaru obrazu prowadzi do utraty niektórych informacji, odpowiednio, aby przywrócić zredukowany obraz do poprzedniego rozmiaru będzie niemożliwe. Dlatego podczas zmiany rozmiaru zaleca się, aby zawsze zachować oryginalne obrazy.
2. Jeśli oryginalny obraz jest mały, próby jego powiększenia najprawdopodobniej nie doprowadzą do niczego.

Zmiana rozmiaru obrazu

1. Otwórz obraz na oddzielnej karcie (kliknij dwukrotnie etykietę obrazu)
2. Wybierz element menu Obraz - Zmień rozmiar
3. Upewnij się, że pole wyboru Zachowaj proporcje jest zaznaczone.
4. Wybierz jednostki wielkości - procent lub piksel
5. Ustaw żądany rozmiar obrazu w szerokości lub wysokości.
6. Kliknij OK
7. Zapisz obraz pod inną nazwą.

Często zachodzi potrzeba przetworzenia nie jednego, ale kilku obrazów. W takim przypadku wygodnie jest skorzystać z funkcji przetwarzania pliku wsadowego.

Jednoczesna zmiana rozmiaru wielu obrazów

1. Wybierz pozycję menu Narzędzia - Przetwarzanie wsadowe (lub przycisk Konwertuj na pasku narzędzi)
2. Główna karta
   1. Skonfiguruj wejście . Aby to zrobić, kliknij przycisk Dodaj , wybierz żądane pliki (przytrzymując klawisze Shift lub Ctrl, możesz wybrać kilka plików jednocześnie). Jeśli chcesz zmienić wszystkie obrazy w folderze, kliknij przycisk Dodaj folder .
   2. Konfiguruj wyjście . W polu Folder określ, gdzie chcesz zapisać wynik. Lepiej jest zapisać wyniki w osobnym folderze, aby uniknąć przypadkowego nadpisania plików źródłowych.
3. Karta Transformacje
   1. Po lewej stronie karty wybierz Konwersja rozmiaru .
   2. Kliknij przycisk Dodaj
   3. Upewnij się, że pole wyboru Zachowaj proporcje jest zaznaczone.
   4. Ustaw żądany rozmiar obrazu w szerokości lub wysokości.
4. Kliknij Uruchom.
5. Przejdź do folderu określonego w sekcji Imprint, sprawdź wynik pracy.

Dodatkowe informacje