Forum.Legalne.info: [html] Optymalizacja kodu strony . - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[html] Optymalizacja kodu strony .

#1 Gość_Dawid_*

  • Grupa: Goście

  Napisany 14 April 2006 - 12:05 PM

Każdy z nas wie jakie są polskie realia w dostępie do sieci.

Wielu internautów wciąz korzysta z drogich (chodzi mi tutaj o koszty połaczenia z internetem), powolnych i awaryjnych modemów.
Jeżeli już posiadają stałe łącze, to jest ono z reguły wolne, a nawet ograniczone transferowo .
Z badań wynika że internauta odwiedzający daną strone jest w stanie czekać na jej załadowanie maksymalnie od 15 do 20 sekund .
Jeżeli kod Twojej www jest "zaśmiecony" , strona obładowana jest masą skryptów lub ciężarną grafiką , warto zastanowić się czy nie zoptymalizować kodu, aby nie zniechęcać potencjalnych gości do wizyty w naszym serwisie.
Głównym powodem długiego wczytywania się strony jest ciężarna grafika.
Największym błędem jaki może popełnić webmaster jest wstawianie na strone grafiki w formacie BMP.
BMP jest formatem graficznym znacznie większym od formatów takich jak GIF , czy JPG .

Jaki format grafiki na strone ?

Jeżeli na stronie umieszczasz grafike taką jak:
-logo
-banner reklamowy
-button
warto wykorzystać format .GIF .

Format ten wpradzie ma palete barw ograniczoną do 256 kolorów ,
jednakże przy małej grafice , w której nie potrzebujemy uzyskania fotograficznej jakości (od 24 bitów w wzwyż) nie powinnismy zauważyć defektów graficznych.

Dodatkowym plusem formatu .GIF jest możliwość tworzenia animacji, oraz jego mała objętość .
Format JPG stosujemy , kiedy mamy do czynienia z grafiką o jakości fotograficznej .

Wykorzystanie graficznego formatu .JPG :
-top strony
-zdjęcia na strone www itp.

Warto równiez pociąć grafike na strone www na mniejsze części, co
znacznie przyśpieszy czas ładownia strony .

Drugim ważnym czynnikiem wpływającym na przedłuzenie czasu załadunku strony są skrypty .
Mimo tego że wiele skryptów ładnie prezentuje sie na stronie , musimy zastanowic się po co właściwie internauta wchodzi na naszą strone.

Większość internautów szuka na danych stronach informacji i nie zwaraca szczególnej uwagi na skrypty .
Często bywa tak że dany skrypt może zniechęcić internaute do odwiedzania Twojego serwisu .

Następnym aspektem jest oczyszczenie kodu strony ze zbędnych znaczników, wpisów , nadpisanych kodów itp.
Wiele darmowych programów do tworzenia stron internetowych (głównie typu wysiwyg) nadpisuje nasz kod zbędnymi informacjai o danym programie .

Pamiętaj że internauta nie wchodzi na Twoją strone po to aby przyglądać się latającym po całej stronie "listkom" czy "balonikom" .

Pamiętaj równiez że strona nie musi byc cała oblepiona grafkią - Zwróć uwage na czołowe polskie portale internetowe.
Ich strony wyglądaja profesjonalnie, chociaż nie są wielkim przedsięwzięciem garficznym .

Dziękuje za przeczytanie artykułu .

Autor: [usunięte na prośbę użytkownika] dla Webtips.pl
Prawa Autorskie: Pełnie praw autorskichposiada serwis www.webtips.pl

Kopiowanie i rozpowszechnianie surowo zabronione .


2006 Š [usunięte na prośbę użytkownika] dla WebTips.PL
0

#2 Użytkownik jest niedostępny   dexter007 

  • atmosphere-studio.com
  • Grupa: Użytkownicy
  • Postów: 3677
  • Dołączył: 11-February 06
  • GG: 7075403

Napisany 14 April 2006 - 12:10 PM

Artykuł dla początkujących, dla tych, którzy robią pierwsze stronki, ale takich to jest najwięcej. Dobry art...
Atmosphere-studio.com:
Oferujemy wykonanie:
  • stron internetowych (w całości lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac związanych z podobną tematyką.


Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay
0

#3 Gość_Dawid_*

  • Grupa: Goście

Napisany 14 April 2006 - 12:14 PM

Dziękuje za pozytywną ocene artykułu .

Masz racje .
Artykuł pisałem z myslą o poczatkujących webmasterach, dlatego art znalazł się w dziale:
"Początkujący webmaster".

Pozdrawiam

Dawid
0

#4 Użytkownik jest niedostępny   Saddam92 

  • Ojciec dyrektor
  • Grupa: Użytkownicy
  • Postów: 2258
  • Dołączył: 16-April 06
  • GG: 4033804

Napisany 16 April 2006 - 10:40 AM

do optymalizacji grafiki polecam:

Easy Thumbnails
albo
Lura Wave Smart Compress...
PS. Artykuł bardzo dobry dla początkujących,..
0

#5 Użytkownik jest niedostępny   Cyr4x 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 40
  • Dołączył: 11-April 06

Napisany 24 April 2006 - 10:32 AM

To są tylko takie podstawy, które jedynie skracają czas ładowania strony. Do tego dochodzi poprawne zakodowanie, żeby nie tylko ci z "jedyną słuszną przeglądarką" widzieli naszą stronę poprawnie. Oprócz tego dochodzi dobra typografia (na stronie w klimacie sci-fi nie użyjemy szeryfów, na stronie jakiejś kapeli gotyckiej jak najbardziej) i dobry dobór kolorystyki (nie gryząca się i pasująca do tematyki strony). Jeżeli zwrócimy uwagę na te wszystkie aspekty, możemy stworzyć przyjazny serwis, pozytywnie odbierany przez odwiedzających.
Dodaj obrazek
0

#6 Użytkownik jest niedostępny   R4Hell 

  • Dark Angel
  • Grupa: Użytkownicy
  • Postów: 149
  • Dołączył: 07-February 06

Napisany 24 April 2006 - 12:38 PM

Zobacz postCyr4x, o Apr 24 2006, 11:32 AM, powiedział:

...Do tego dochodzi poprawne zakodowanie, żeby nie tylko ci z "jedyną słuszną przeglądarką" widzieli naszą stronę poprawnie...


dla początkujących: mała informacja żeby nie brali powyższego stwierdzenia dosłownie, mam nadzieję że autorowi chodziło zapewne o opis strony za pomocą TAGÓW i STYLI a nie o kodowanie znaków... aczkolwiek kodowanie jest również bardzo istotne.
There are only 10 types of people in the world: Those who understand binary, and those who don't...
<-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -->
Są też tacy co zamieszczają posty bez przeczytania REGULAMINU...
I wśród nich są ci którzy łamią punkty: 4-8, 13, 14 - A ICH NAJBARDZIEJ NIE LUBIE... Grrr

0

#7 Użytkownik jest niedostępny   trot 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 371
  • Dołączył: 24-April 06

Napisany 26 April 2006 - 02:52 PM

heh :D
jakbym był początkujący to byś się wystraszył :)
a ten tekst można skopiować w CAŁOŚCI?
Razem z autorem itp. ?
0

#8 Użytkownik jest niedostępny   dexter007 

  • atmosphere-studio.com
  • Grupa: Użytkownicy
  • Postów: 3677
  • Dołączył: 11-February 06
  • GG: 7075403

Napisany 27 April 2006 - 08:43 AM

Cytuj

Autor: Dawid Wachałowicz dla Webtips.pl
Prawa Autorskie: Pełnie praw autorskichposiada serwis www.webtips.pl

Kopiowanie i rozpowszechnianie surowo zabronione .


2006 © Wachałowicz Dawid dla WebTips.PL

Raczej nie :P
Atmosphere-studio.com:
Oferujemy wykonanie:
  • stron internetowych (w całości lub fragmentów)
  • skryptów (php, actionscript, js, html)
  • layout'ów (grafika i/lub kodowanie)
  • banerów
  • innych wybranych grafik
  • obróbki fotografii
  • jingli (przerywnik muzyczny) np. radiowych
  • ... oraz innych prac związanych z podobną tematyką.


Muzyk jako Tilnaaay : http://www.youtube.com/tilnaay
0

#9 Użytkownik jest niedostępny   ziele 

  • Pasjonata ;d
  • Grupa: Użytkownicy
  • Postów: 2678
  • Dołączył: 17-October 06
  • MiejscowośćGrójec

Napisany 09 January 2007 - 04:33 PM

no niezły, ale mogłeś jeszce daqć linka do jakiegoś programu, który do kompresuje
0

#10 Użytkownik jest niedostępny   sujez 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 148
  • Dołączył: 08-April 06
  • GG: 7047005
  • MiejscowośćSłupsk

Napisany 10 March 2007 - 07:40 PM

Moja sugestia jest taka:

.PNG, .PNG i jeszcze raz .PNG!
0

#11 Użytkownik jest niedostępny   zuo 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 139
  • Dołączył: 11-February 07

Napisany 19 March 2007 - 06:00 PM

no wlasnie co by nie bylo .png to przyszlosc : ] tyle ze poki co są problemy ze smIEciem bo nie odpowiednio interpretuje przezroczystosc w .png (co prawda mozna to ominac filtrami)

nie wiem czy pisales o tym bo nie czytalem wszytkiego, ale warto wspomniec ze .gif'ow nie powinno sie stosowac przy wiekszych obrazkach typu loga, topy.

btw. wysiwg a nie wysiwng ; )
0

#12 Użytkownik jest niedostępny   Thid 

  • Saint Inquisition
  • Grupa: Moderatorzy
  • Postów: 2497
  • Dołączył: 22-May 06

Napisany 19 March 2007 - 06:36 PM

Cytuj

btw. wysiwg a nie wysiwng ; )

dupa bo wysiwyg -> What You See Is What You Get. Jak już kogoś poprawiasz to najpierw sprawdź czy dobrze ;)
Dodaj obrazek
Twórcy php ciagna wzorce z szerokiej gamy języków od pascala, przez jave i brainfucka, po tradycyjny chinski.
django the web framework for ponies with magical powers
watashi no teki , watashi wa osoreru hitsuyō wa nai ...shikashi , Kami wa watashi no yūjin tachi kara watashi wo mamoru
0

#13 Użytkownik jest niedostępny   loobieto 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 1
  • Dołączył: 23-July 09

Napisany 23 July 2009 - 05:53 PM

Kompresja grafiki rastrowej na potrzeby stron www [wersja 1]
poradnik dla początkujących

W większości na stronach internetowych możemy zobaczyć różnorodne grafiki, stosowane do urozmaicenia przekazu, zachęcenia do dalszego przeglądania serwisu. Gdy odwiedzający mają powolne łącze lub mamy za wolny serwer, przyjemność z surfowania na naszej stronie spada i w najgorszym przypadku gość opuszcza naszą stronę. Można temu zapobiec stosując bezstratną kompresję lub optymalizację już istniejącej grafiki. Najlepszymi formatami na potrzeby stron html są .jpeg i .png. Jpeg - do zdjęć, PNG do banerów, przycisków, schematów czy wykresów. GIF jest przestarzały - można stosować tylko 256 kolorów i 1 kolor przezroczystości; zastępuje go właśnie PNG - można (lecz nie trzeba!) stosować 24bit paletę kolorów i kanały alpha.
Potrzebne oprogramowanie:
• Adobe Photoshop - do ew. stworzenia grafik i zapisania na dysku.
• Paint ;) - jw.
• System operacyjny Linux (w przykładzie Ubuntu 9.04)
• programy optymalizacyjne (poniżej instrukcja ich instalacji)

1. INSTALACJA OPROGRAMOWANIA
Dlaczego Linux? Bo niezbędne kompresory (zwłaszcza pngnq, advpng, optipng) są dostępne w najnowszych wersjach jako paczki z kodem źródłowym niemożliwym do łatwego skompilowania w Windows. Ubuntu można zamówić za darmo prosto do domu lub zupełnie legalnie ściągnąć . W internecie jest mnóstwo artykułów dot. tego systemu i ew. problemach z instalacją/przesiadką z Windows. Można używać obydwu systemów na jednym dysku!
Mając już gotowy system ściągamy najnowszy soft:
• PNGOUT for linux (static!): http://www.jonof.id.au/kenutils
po rozpakowaniu wybieramy jeden(!) plik dla naszej architektury sprzętowej (w tym przypadku
"pngout-linux-i686-static") i wkładamy do katalogu z plikami do docelowej optymalizacji
• z menadżera pakietów Synaptic dociągamy następujące pakiety:
libpng12-dev, optipng, advancecomp, jpegoptim, jpeginfo,
pngquant, pngtools

Dodaj obrazek
• możemy sami ściągnąć kody źródłowe z oficjalnych stron optymalizatorów i sami skompilować następujące programy: optipng, pngquant, jpegoptim. Polecam to rozwiązanie. Plusem jest najnowsza wersja powyższych programów co przekłada się na lepszą wydajność i ulepszoną kompresję
• konieczne pobranie i skompilowanie programu "pngnq" w wersji 1.0 (poprawka wprowadzona przez pornela) ze strony: http://pngnq.sourceforge.net/

2. OPTYMALIZACJA GRAFIK JPEG
Posiadając ciężkie grafiki warto zeskalować je do mniejszej rozdzielczości. Wkładamy je do katalogu np. /home/[użytkownik]/kompresja/
Uruchamiamy terminal (tak, potrzebne będzie grzebanie w konsoli!), wchodzimy do powyższego katalogu:
cd /kompresja (mozna używać [Tab] do przyspieszenia operacji) i optymalizujemy zdjęcie:
jpegoptim -m100 --strip-all -f [plik.jpg]
Zawsze podajemy pełną nazwę pliku/korzystamy z pierwszego znaku --> [Tab] i samo uzupełnia nam
nazwy. Mając kilkanaście obrazków do optymalizacji wpisujemy:
jpegoptim -m100 --strip-all -f *.jpg
Polecenie to zachowuje 100% jakość zdjęcia, lecz usuwa niepotrzebne informacje Exif oraz dobiera wydajną kompresję. Więcej o informacji o plikach jpeg uzyskuje się przez:
jpeginfo [plik.jpg]
W powyższym przypadku obrazek zmniejszył się o 40%.
Dodaj obrazek
3. OPTYMALIZACJA GRAFIK 24bit PNG
24bitowe pliki PNG zapisane Photoshopem posiadają dużą wagę. Można zmniejszyć je używając na początku optipng, następnie zobaczyć czy zmniejszą się używając advpng z pakietu advancecomp,
by następnie użyć PNGOUT. Zalecam użycie optipng+pngout gdyż zazwyczaj daje to najlepsze rezultaty. Umieść plik pngout'a w katalogu z obrazkiem .png! Wygląda to mniej więcej tak:
optipng -o7 [plik.png] lub
optipng -o7 *.png
nastepnie (mozna) użyć advpng:
advpng -z4 [plik.png]
Dodaj obrazek
czy PNGOUT żeby zobaczyć czy ten zmniejszy plik:
./pngout-linux-i686-static [plik.png]
Dodaj obrazek
W tym przypadku najlepszy okazał się advpng, choć w większości przypadków PNGOUT okazuje się w tym lepszy o ok. 10-20%. Ogólnie nasz plik zmniejszył się o 25%! Z uwagi na dość duże możliwości
konfiguracji tych programów, zastosowano najlepsze parametry dla optipng i advpng. Chcesz osiągnąć lepszy rezultat?
[program] --help
np. ./pngout-linux-i686-static --help
żeby dowiedzieć się więcej o opcjach

4. OPTYMALIZACJA GRAFIK 24bit PNG NA 8bit PNG
Nie jest to dobre rozwiązanie dla kolorowych obrazków (np. zdjęć z kanałem alpha), gdyż powoduje to redukcję kolorów: z kilku milionów do zaledwie 256. Poniższe programy potrafią zachować kanał alpha.
Możemy zastosować pngquant - jest już trochę postarzały, oficjalna wersja nie zawiera poprawek pornela. Lepsze rezultaty (lepszy dihtering - gładsze obszary, dość wolny ale skutecznie odchudza grafikę) daje ulepszony pngnq w wersji przynajmniej 1.0. Zajmiemy się oboma przypadkami. Obrazek w folderze z PNGOUT.
pngquant [liczba_kolorow] [plik.png]
np. pngquant 256 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)
LUB
pngnq -n[liczba_kolorow] -s1 [plik.png]
np. pngnq -n256 -s1 plik.png (nie nadpisuje pliku tylko tworzy nowy o innej nazwie)
Następnie możemy użyć lepszej kompresji z advpng czy PNGOUT, opisane jest to w 3. pkt. Rezultaty?
Pngquant (wyraźnie widoczne piksele): 74% kompresji; pngnq (dość dobry dihtering): 80%. Po
optymalizacji zyskały do odpowiednio: 76%(PNGOUT) i 82%(advpng).
Dodaj obrazek

5. OPTYMALIZACJA GIFów DO PNG
Gify charakteryzują się 8bit paletą kolorów - buttony, tła mają odpowiednią ilość kolorów i przyzwoitą wagę. Zwłaszcza Photoshop posiada dość rozbudowane opcje do ich zapisu. Dlaczego warto je jednak
wymienić na 8bit PNG? Jakości nie zyskamy ale w 99% zmniejszymy ich objętość. Zastosujemy optipng do konwersji .gif-->.png następnie pngnq+PNGOUT/advpng. Można użyć pngquant -
jest opisany w 4. pkt. lecz w większości przypadków wydajniejszy jest pngnq. Do dzieła!
optipng -o7 [plik.gif]
utworzy wtedy plik o tej samej nazwie lecz z końcówką .png ;) Sprawdzamy ile ma kolorów poleceniem:
pnginfo [plikdosprawdzenie.png]
Dodaj obrazek

Zazwyczaj dobranie max. ilości kolorów w pngnq i dopiero skompresowanie to PNGoutem/advpng skutkuje lepszą kompresją niż dobieranie takiej samej ilości z odczytu pnginfo z grafiki przekonwertowanej optipng. Stosujemy więc 256 kolorów:
pngnq -n256 -s1 [plik.png]
./pngout-linux-i686-static [plikpngnq.png]
ewentualnie
advpng -z4 [plikpngnq.png]
Rezultaty? Optipng+PNGOUT: 20% kompresji; pngquant+PNGOUT: 21%; pngnq+PNGOUT:
32%!

Prowadząc stronę generującą spore obciążenie serwera, warto zaoszczędzić transfer optymalizując grafiki
rastrowe. Zaoszczędzimy wtedy pieniądze a użytkownicy nie będą dłużej czekać na ładującą się grafikę!

Poradnik ten rozprowadzany jest na licencji Creative Commons: Uznanie autorstwa - Na tych samych
warunkach 2.5 Polska.

Wolno:
• kopiować, rozpowszechniać, odtwarzać i wykonywać utwór
• tworzyć utwory zależne
Wszelkie komentarze i uwagi proszę na maila: loobieto@gmail.com
Autor: @lubieto

Poradnik .pdf można ściągnąć z:
http://uploader.pl/?d=7779A2751
lub
http://www.kompresja...png-gif.cba.pl/
Bardziej przejrzysty i można czytać bez podłączonego neta ;)
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień