Dobre praktyki: Praca z obrazami
Optymalizacji obrazów
Optymalizacja oznacza po prostu utrzymanie wielkości małych obrazów, utrzymując jakość obrazu do wymaganego poziomu. Jest wiele procedur, które kiedyś mogą prowadzić do optymalizacji obrazów przed ich załadunkiem na serwerze dostawy. Narzędzia, których używamy do stworzenia tych obrazów (Photoshop, Fireworks itp.) zwykle mają narzędzia, które pozwalają użytkownikom na optymalizację obrazu do użytku internetowej.
• Sprawdź GIF-tych, czy są one za pomocą rozmiar palety odpowiadającą liczbie kolorów w obrazie. Gdy obraz jest za pomocą 4 kolory i paletą 256 kolorów, to obraz może być bardziej zoptymalizowany
• Konwersja GIF PNG jest tam, gdzie jest to możliwe i sprawdzić czy nie ma oszczędności. Częściej niż nie istnieje. Nie wahaj się korzystać z PNG-tych, jak oni są w pełni obsługiwane przez większość powszechnie używanych przeglądarek. Spodziewaj się z możliwościami animacji PNG może robić co GIF robi, w tym przejrzystości.
• Dla obrazów używanych w CSS sprites, zorganizować zdjęcia w ikonki poziomo, w przeciwieństwie do pionowo powoduje zazwyczaj mniejszy rozmiar pliku. Ponadto, łączyć obrazy z podobnymi kolorami w ikonki. Pomaga to zachować Ilość kolorów niska, idealnie pod 256 kolorów, tak by zmieścić się w PNG8.
• Jeśli używasz favicon.ico, niech to będzie małe, najlepiej pod 1K.
Użyj prawidłowo przeskalowane / rozmiaru obrazu.
Zawsze staram i używać przeskalowanych obrazów, tzn. nie stosować większy obraz niż potrzeba tylko dlatego, że można ustawić szerokość i wysokość w HTML. Jeśli chcesz, aby wyświetlić 100px X 100px obraz na stronie, to nie używać zeskalowana 200x200px obrazu.
Użyj progresywne obrazy
Przeglądarka internetowa już świadczy zdjęć stopniowo. Aby to zrobić jeszcze lepiej, po prostu zapisać plik GIF lub PNG z przeplotem "" opcji, lub swoich JPEG z "stopniową" opcji.
Istnieje trwa debata wśród internautów, czy stosowanie progresywnego obrazu jest błogosławieństwem czy przeszkodą. Również progresywny obraz waży około 20% więcej niż jego brak odpowiednika progresywnego. Tak więc, jeśli uważasz, że układ korzysta z obrazów, które nie utrudniają użytkownika doświadczenie, to jest progresywny, nie krępuj się zrobić.
