Optymalizacja rozmiarów obrazu podczas układu strony internetowej

  1. Zminimalizuj rozmiary plików obrazów
  2. Ale to nie wszystko.
  3. Program FileOptimizer

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

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

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;

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости