Optymalizacja strony WWW

Znając polskie realia wiele osób łączy się z Internetem za pomocą modemu. Dla nich ważny jest każdy impuls. Zresztą, co ja tu będę pisał, chyba każdy widział już rachunek od naszego monopolisty za połączenia internetowe – zgroza.Dlatego ważne, aby strona internetowa ładowała się jak najszybciej. Obserwacje pokazują, że przeciętny internauta jest w stanie czekać 15 sekund (i ani sekundy więcej) aż strona się załaduje, im czas ten jest dłuższy gość się denerwuje i rezygnuje z dalszego oczekiwania. W ten sposób wiele serwisów szybko traci swoją oglądalność.n
n
Ten artykuł ma na celu pomóc zoptymalizować strony, żeby jak najszybciej się ładowały.n
n
Każdy chce, aby jego strona była wyjątkowa, dlatego wrzuca tam obrazki, animacje, tysiące skryptów, ale … w efekcie dodaje też pare(naście) sekund do załadowania się strony. Dlatego ważne, aby z grafiką nie przesadzać. Należy ją ograniczyć do niezbędnego minimum. Proszę chociażby zajrzeć na strony czy choćby Strony te są bardzoatrakcyjne w wyglądzie pomimo, że nie mają wielu grafik na nich (nie licząc bannerów reklamowych – ale reklama jest dźwignią gospodarkin
n
n
Drugim ważnym aspektem jest optymalizacja grafiki. Pliki graficzne dostarczają dużo kalorii do strony, dlatego przed wstawieniem odpowiedniego obrazka na stronę zoptymalizuj jego paletę kolorów. Na rynku informatycznym dostępnych jest wiele programów specjalnie do tego celu o czym będzie później. Ewentualnie użyj do tego narzędzi online. Takowe dostępne są na np. czy Nie popełniaj tego błędu, co wielu początkowych webmasterów – nie wrzucaj plików w formacie BMP. Obrazek w tym formacie zajmuje dużo więcej miejsca niż ten sam zapisany do formatu GIF lub JPG.n
n
Przypomnę, kiedy należy stosować JPEG a kiedy GIF. GIF (wykorzystuje algorytm kompresji LZW) zyskuje zastosowanie przy tworzeniu obrazków o małej ilości kolorów, gdzie często na występuje duży obszar jednego koloru (bandery, loga, zeskanowane dokumenty tekstowe, rysunki, wykresy itp.). Pliki GIF mogą być zapisywane i zmieniane wielokrotne bez strat informacji o obrazku. Jednak, chyba największymi ich zaletami są: możliwość wykorzystania tzw. transparent color oraz tworzenia animacji. GIF-y wykorzystują 256 kolorów, więc nie nadają się do zdjęć o jakości fotograficznej, gdzie potrzebna jest paleta 24 -bitowa. Tutaj zastosowanie znajduje format JPEG. Korzysta on z 24 bitowej palety barw dla grafiki kolorowej i 8 bitowej dla grafiki w kolorach szarości ( grayscale ). Osobiście JPEG stosuję zawsze tam gdzie nie muszę robić animacji ani używać transparent-u.n
n
Oto kilka programów przeznaczonych do optymalizacji grafiki:n
n
WebGraphics Optimizer to program shareware’owy. Pozwala na odczyt prawie 40 formatów graficznych, w tym wszystkich podstawowych używanych na stronach internetowych. Optymalizuje GIF-y i JPEG.n
n
Oprócz optymalizacji, program pozwala na wykonanie kilkunastu zabiegów retuszerskich dzięki wbudowanym narzędziom ( 12 filtrów, 10 opcji zmian koloru/kontrastu, opcje resize itp.). Taki spory zbiór narzędzi pozwala na świetną obróbkę zdjęć przed/po optymalizacji a także skanowanych. Za pomocą tego programu można także wstawiać napisy 3D ( dostępne kilkanaście wzorów).n
n
Obróbkę czy optymalizację pliku graficznego możemy oglądać w oddzielnym oknie, które sąsiaduje z oknem pliku oryginalnego. Program jest łatwy w obsłudze, jedynie co jest niewygodne to proces optymalizacji. Musimy bowiem (chcąc skorzystać z własnych ustawień) przed optymalizacją ustalić jeden ( lub więcej ) z pięciu wariantów(View/Option/IntelliOptimize). Jednak, gdy już to zrobimy optymalizacja odbywa się całkiem przyjemnie, poprzez kliknięcie na zdjęcie z ustawionym wariantem.n
n
Opcja IntelliOptimize posiada dwie funkcje. Mianowicie możemy ustalić, aby program automatycznie wybierał format zapisu w zależności od głębi kolorów występujących w pliku oryginalnym (wzorcowym) – funkcje “Depends of color depth”. Poprzez funkcje Smallest File Size pozwalamy aplikacji utworzyć jak najmniejsze pliki przy wykorzystaniu najbardziej pasującego formatu.n
n
Professional Image Optimizer 3.5. Cechuje go łatwa obsługa oraz bardzo dobry sposób kompresji. Do programu dołączono kilka podstawowych narzędzi pozwalających na prosty retusz zoptymalizowanych zdjęć np. Color Correction, Clean Image, Resize, Focus. Wygodną i bardzo użyteczną funkcją jest optymalizacja wielu plików jednocześnie (Batch). Program potrafi optymalizować cztery formaty graficzne: JPEG, GIF, PNG oraz TIFF ( bez dodatkowych opcji). Posiada również dodawania znaku wodnego. Brakuje mu natomiast ( przynajmniej dla mnie jest wada) podglądu optymalizowanego pliku. Mimo prostej obsługi ma dosyć rozbudowaną pomoc ( w języku angielskim), co na pewno ułatwi życie początkującym użytkownikom ( tym znającym angielskim, oczywiście)n
n
Dobry stopień kompresji, przy jednoczesnej małej stracie jakości spowodowany jest używaniem przez program kilku metod optymalizacji ( można rzec algorytmów). n
Są to:n
n
MagiCompression ( MagiCompression 2), Extra Compression, Dithering, Smoothing.n
n
MagiCompression to technologia automatycznej kompresji JPEG-ów, dająca rezultaty lepsze niż standardowa kompresja JPEG. Korzysta ona z faktu, że nie wszystkie obszary obrazka są tak samo ważne jak inne, przez co mogą być bardziej skompresowane bez znaczących różnic. MagiCompression algorytm skanuje obrazek szukając obszarów o wysokich detalach, zachowuje je, natomiast te o niskich detalach poddaje wyższej kompresji. MagiCompression 2 to poprawiony algorytm dobrze radzący sobie z wadliwymi zdjęciami np. zdjęcia zamazane, “z noisem”. Dzięki MC 2 można zwiększyć stopień kompresji np. z 80 do 90 % bez wyraźnych strat jakości. Jest on ( algorytm) bardziej czuły na zmiany koloru, nadaje się dobrze do robienia miniaturek (thumbnail).n
n
Extra Compression używana jest do kompresji JPEG-ów w stopniu większym niż przewiduje to standardowa kompresja JPEG. Extra Compression jest zbliżona pod względem działania do MagiCompression, z tym że wykorzystywana głównie do optymalizacja nie całego obrazka, ale jego części (zaznaczonego obszaru).n
n
Dithering – (cieniowanie, rozsiewanie, metoda dithering’u) używana jest także przez inne programy, ale korzystając z okazji opiszę ją w tym miejscu. Dithering używany jest przy optymalizacji plików GIF i PNG. Jest to technika polegająca na symulacji, właściwie uzyskiwaniu kolorów pośrednich w grafice komputerowej. Polega to na zacieraniu ostrych przejść pomiędzy sąsiadującymi ze sobą barwami. Dithering pozoruje istnienie znacznie większej liczby kolorów niż ma to miejsce w rzeczywistości, wykorzystując w tym celu drobna ułomność ludzkiego oka. Gdy piksele są tak blisko siebie, że oko postrzega je jako jeden, algorytm ujednolica intensywność ich barw.n
n
n
Smoothing jest używany do wygładzania efektu noise i “szorstkości” obrazka. Smoothing usuwa detale ( np. pojedyncze piksele) z obrazka, więc po jego zastosowaniu można zmniejszyć wielkość pliku.n
n
Advanced JPEG Compressor 2.1n
n
Mały, przydatny programik do optymalizacji plików JPEG (tylko). Osiąga dość dobre rezultaty. Posiada wygodny panel optymalizacji użytecznym podglądem optymalizowanego pliku (Compress image automatically when option changed). Posiada kilka użytecznych opcji jak np. wysyłanie pliku e-mailem, zapisywanie pod inną nazwą (przez jedno kliknięcie na ikonę), ciekawe opcje funkcji Resize.n
n
W programie tym do optymalizacji służą takie parametry jak: Compression (Luma i/lub Chroma kanał), Smoothing, Detail Quality Equalizer.n
n
Kompresja obrazka do formatu JPEG zawiera kilka kroków. Jednym z nich jest konwersja obrazka z kanałów RGB do jednego komponentu Luma i dwóch Chroma.n
n
Luma (Luminance) – jest kanał przechowujący informacje o intensywności każdego piksela.n
n
Chroma (Chrominance) – kanał przechowujący przekształcone informacje o kolorach w każdym pikselu.n
n
Detail Quality Equalizer – to ciekawa, niespotykana funkcja. Za pomocą equalizera (jak w Winampie 🙂 można zmieniać wielkość detali od rozmiaru 1×1 px poczynając do 16×16 px kończąc. Pozwala to na efektywne polepszenie jakości (lub pogorszenie – w zależności od potrzeby), przy zmniejszeniu wielkości obrazka.n
n
LuraWave SmartCompress (Lite)n
n
Bardzo prosty program. Jest to jeden z pierwszych programów wykorzystujących n
format JPEG2000. W wersji Lite właściwie nieposiadający dodatkowych funkcji. Rezultaty otrzymane za pomocą tego programu są dostateczne. Najlepsze rezultaty osiąga się przy kompresji pliku JPEG bezpośrednio z BMP lub np. TIFF. Wykorzystuje nowy, tzw. faletkowy algorytm kompresji (wavalet) Posiada własny format zapisu (*.LWF – charakteryzujący się bardzo dobrym wskaźnikiem kompresji). Do wyboru mamy trzy sposoby podawania wartości stopnia kompresji obrazu: określenie jakości obrazu (możemy operować w zakresie 1 – 100 jednostek), podanie stopnia kompresji obrazu (od 1 : 1 do 1 : 1000), wpisanie oczekiwanej wielkości pliku wynikowego (w kB).n
n
Ostanim, ale moim ulubionym jest freeware’owy IrfanView – polecam. Obecnie jest dostępny w wersji 3.70.n
n
Tak samo sprawa ma się z skryptami na stronę. Wiem, jest wiele ciekawych skryptów, pokusa jest nie do odparcia, ale zanim wstawisz jakiś skrypt pomyśl, czy jest on rzeczywiście aż tak potrzebny. Zresztą za dużo takich wodotrysków na stronie odstraszy ci gości, którzy już więcej nie wrócą.n
n
Ostatnim aspektem, który chciałbym poruszyć, jest optymalizacja kodu. Wiele edytorów HTML, w szczególności te pracujące w trybie WYSIWYG mają tendencję do zaśmiecania kodu własnymi, często zbędnymi kawałkami kodu. Najbardziej znanym zaśmiecaczem jest MS WORD. Potrafi on nawet dwukrotnie zwiększyć objętość kodu strony. Więc najlepiej pracuj z edytorami tekstowymi (Pajączek, Website, Homesite, EzHTML, itd.), albo po pracy w wordem otwórz stronę w notatniku i powyrzucaj niepotrzebne wpisy (co jednak może kosztować cię parędziesiąt minut). Dodatkowo program Pajączek posiada opcję optymalizacji kodu. Bardzo przydatne narzędzie, jednak należy używać go z ostrożnością.