Pracujemy na stronie internetowej i zauważyliśmy, że obrazy GIF (100kb - 200kb) ładują się bardzo powoli.Jak poprawić czas ładowania w statycznej witrynie HTML?
Witryna jest statyczną witryną z CSS/HTML.
Czy ktoś ma jakieś wskazówki, dlaczego obrazy mogą ładować się powoli?
Czy użycie JPG poprawi wydajność?
Oto kod HTML dla tego obrazu:
<div><img src="images/mainImg_3.gif">
Ładowanie trwa, ponieważ są ogromne. 200 KB to bardzo duży plik obrazu. Nie wiem dokładnie, jakie jest zalecenie dotyczące obrazów internetowych, ale dobrze jest zachować je poniżej 50K.
Obrazy GIF nie są bardzo wydajne w przypadku obrazów fotograficznych. Powinieneś eksperymentować z innymi formatami, takimi jak JPG i PNG, aby sprawdzić, czy możesz uzyskać tę samą jakość przy mniejszym rozmiarze pliku. Powinieneś być w stanie zmniejszyć rozmiar pliku przy zachowaniu jego jakości.
Kolejna sztuczka: użyj miniatur. Zapisz dwie wersje każdego obrazu, jedną 25% (według rozdzielczości) drugiej. Odwiedzający Twoją witrynę mogą kliknąć miniaturę, jeśli chcą zobaczyć więcej. Przyspieszy to czas ładowania i zmniejszy rachunek za przepustowość.
Czy Twoje zdjęcia prawidłowo wielkości? Jeśli wyświetlasz je na swojej stronie internetowej jako 300 x 300 pikseli, upewnij się, że oryginalny obraz ma taki sam rozmiar.
Pomaga to dwa razy, jeden mniej pobiera dane, a 2 nie wymaga dodatkowej mocy obliczeniowej, aby przeglądarka mogła zmienić rozmiar. Dodatkowo obraz będzie wyglądał ostrzej, jeśli jego dokładny rozmiar.
Jeśli chodzi o różnicę między GIF i JPG, (z wyjątkiem przezroczystości, której JPG nie obsługuje), sprowadza się ona do tego, co zawiera obraz. GIF używa tabeli kolorów i mapy do tej tabeli kolorów do przechowywania obrazu, podczas gdy JPG używa algorytmu kompresji. Jeśli więc obraz zawiera kilka odmian kolorów, otrzymasz mniejszy rozmiar pliku z GIF-a. Z drugiej strony, jeśli masz fotografię z dużą różnorodnością kolorów, możesz użyć JPG.
To zależy od tego, jak duży jest obraz, jeśli wyświetlasz obrazy wielkości tapety przy 100kb, to nie jest tak źle. Jeśli wyświetlasz miniatury o tym rozmiarze, oznacza to, że masz problem.
Obrazy JPEG są stratne, ale można je łatwo skompresować. W zależności od tego, ile kompresji wybierzesz, możesz naprawdę zmniejszyć rozmiary obrazu za pomocą JPEG.
Przeczytaj poniższy artykuł zatytułowany Dobrych Praktyk dla przyspieszenia Web Site:
biorą również zapoznać się YSlow
będzie analizować swoją witrynę dla Ciebie i powiedzieć, gdzie wąskie gardła mogą być.
Włącz buforowanie dla plików graficznych (w poniższym przykładzie dodano również css i js caching), które zapewnią użytkownikom dwukrotne pobieranie plików. Jeśli używasz Apache 1.3 lub 2:
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
Prawdopodobnie rozsądnym rozwiązaniem jest włączenie kompresji gzip dla html i css. W Apache 2:
SetOutputFilter DEFLATE
i Apache 1.3:
mod_gzip_on Yes
Najszybszy ładowane źródło jest zawsze zasobem, który nie musi być załadowany w ogóle. To znaczy. oprócz zmniejszania obrazów do rozsądnych rozmiarów powinieneś przeczytać o buforowaniu HTTP.
Powinieneś polecić swojemu serwerowi dostarczanie odpowiedzi z odpowiednimi informacjami o buforowaniu, aby agenci użytkownika mogli ponownie używać lokalnych wersji z pamięci podręcznej.
Mark Nottingham napisał tutorial about HTTP caching. To dobry punkt wyjścia. i this is a tutorial o konfiguracji apache na chaching HTTP.
Należy określić atrybuty wysokości i szerokości znacznika img, patrz poniżej, aby wyjaśnić W3C Schools, dlaczego należy to zrobić. Aby uzyskać więcej informacji, zobacz http://www.codinghorror.com/blog/archives/000807.html, aby uzyskać bardziej radykalne techniki.
Wskazówka: Jest to dobra praktyka, aby określić zarówno wysokość i szerokość atrybuty na obrazie. Jeśli te atrybuty mają wartość , miejsce wymagane dla obrazu jest zarezerwowane po załadowaniu strony. Jednak bez tych atrybutów przeglądarka nie zna rozmiaru obrazu i nie może zarezerwować dla niego odpowiedniej przestrzeni. Efekt polega na tym, że układ strony zmieni się podczas ładowania (gdy ładowane są obrazy ).
Wskazówka: Nie przeskaluj obrazów z atrybutami wysokości i szerokości ! Zmniejszenie rozmiaru dużego obrazu za pomocą atrybutów wysokości i szerokości zmusza użytkownika do pobrania dużego obrazu (nawet , jeśli wygląda na niewielki na stronie). Poprawna metoda polega na zmianie skali obrazu za pomocą programu, przed użyciem go na stronie .
ten jest kopiowany z http://www.w3schools.com/tags/att_img_height.asp
zajrzeć do bezpłatnego narzędzia: Smush It!
Jest opracowany wspólnie przez Stoyan Stephanov, Nicole Sullivan (Yahoo!) i obejmuje każdy smakołyk dla obrazów z YSlow (z Yahoo!) i ustaleń Yahoo Developer Network.
Analizuje on twoje obrazy i określa na podstawie zestawu narzędzi po stronie serwera, jaki jest optymalny typ obrazu (np. PNG8, PNG24, GIF, JPG itp.), A także tworzy zoptymalizowany obraz ... np. nawet jeśli dodasz obraz PNG, znajdzie najlepszą metodę skompresowania go i "Smush It" do najmniejszego możliwego rozmiaru pliku.
następnie obraz wyjściowy, a następnie służyć go z() jeżeli to możliwe, najlepiej na CDN, z far-future expires headers z gzip compression.
Nie jestem pewien, dlaczego PNG byłby mniejszy, biorąc pod uwagę, że używa podobnego algorytmu kompresji do GIF (z pamięci, PNG to LZ77 + Huffman, a GIF to LZW). JPG może, ale to dlatego, że jest to format stratny. – Powerlord
Dołączyłem PNG na podstawie ostatnich osobistych doświadczeń - tworzyłem awatar dla innej witryny, a plik musiał mieć mniej niż 15 KB. Z jakiegoś powodu JPG nie spadłby poniżej 25K w najniższej jakości, ale PNG miał 8K w tej samej jakości wizualnej. Domyśl ;) –