Szybkość ładowania strony jest bardzo ważnym czynnikiem wpływającym na użyteczność i konwersję stron, dlatego uważam, że konieczne jest podjęcie co najmniej najprostszych działań w celu zmniejszenia wpływu tego czynnika.
Grafika jest często jednym z „najcięższych” składników stron internetowych pod względem rozmiaru danych. Oznacza to, że jego rozmiar wpływa bezpośrednio na szybkość ładowania strony. Ma na to wpływ zarówno wielkość przesyłanych danych, jak i liczba elementów (liczba żądań do serwera). Obie te wartości należy zminimalizować.
Zminimalizuj rozmiary plików obrazów
Oczywiście, w zależności od obrazu, powinieneś wybrać najbardziej odpowiedni format.
W przypadku złożonych obrazów wielokolorowych zawierających gradienty, na przykład zdjęcia, w większości przypadków JPEG będzie odpowiedni do jakości oka. Zwykle zwiększam współczynnik kompresji dla każdego obrazu, dopóki nie pojawią się zauważalne artefakty lub zniekształcenia kolorów.
W przypadku prostszych obrazów zawierających duże obszary tego samego koloru (tzw. „Obrazy wektorowe”) lub obrazów o małej liczbie kolorów lepiej jest użyć PNG, ponieważ Ten format pokazuje doskonałe wyniki kompresji bez zniekształceń. W takim przypadku, jeśli potrzebujesz przejrzystości, nie ma konkretnego wyboru: GIF, PNG. Uważam, że pierwszy jest przestarzały, dlatego zawsze używam PNG. W każdym razie porównanie nigdy nie zaszkodzi i wybierz najbardziej optymalną z tych dwóch opcji. W większości przypadków wystarczą te dwa formaty.
Ale to nie wszystko.
Programy do przetwarzania obrazów nie zawsze mają na celu uzyskanie najmniejszego pliku. Dodają różne meta-informacje do użytecznych danych, które można usunąć bez konsekwencji, i nie zawsze używają najbardziej optymalnych algorytmów. W wielu przypadkach pliki można rozjaśnić o kolejne 10-30%.
W razie potrzeby w Internecie można znaleźć wiele różnych optymalizatorów dla każdego formatu osobno. Nie zawsze jest to wygodne, ponieważ muszą uporządkować i znaleźć najlepszą opcję.
Chcę porozmawiać o prostym narzędziu, które jest „połączeniem” i używa wielu różnych narzędzi jednocześnie, wybierając najbardziej efektywną opcję dla każdego konkretnego obrazu. Każdy zestaw grafiki wykorzystujący go można zoptymalizować jednym kliknięciem.
Program FileOptimizer
Po prostu przeciągnij niezbędne pliki i kliknij przycisk „Optymalizuj wszystkie pliki”
Prezentowany zestaw plików został zapisany za pomocą Photoshopa, zawiera kilka dużych obrazów tła i kilka małych elementów dekoracyjnych.
Rozmiar pliku:
Do optymalizacji: 966 KB
Po optymalizacji: 800 KB
Jak widać na zrzucie ekranu, FileOptimizer umożliwił zaoszczędzenie 16% objętości wszystkich plików projektu, czyli około 166 KB. Moim zdaniem doskonałe oszczędności za jednym kliknięciem i kilka minut oczekiwania!
Pobierz program FileOptimizer może tutaj .
Kolejnym krokiem w optymalizacji klienta może być zmniejszenie liczby żądań do serwera poprzez zmniejszenie liczby plików obrazów. Można to zrobić, stosując technikę sprite'ów CSS. Krótko mówiąc, obrazy są sklejane ze sobą w jeden lub więcej dużych obrazów. Wymagana część jest wyświetlana przy użyciu właściwości CSS w tle: XY;