Obrazy (grafiki) są nieodzownym elementem praktycznie każdej strony internetowej. Niestety bardzo często oprócz upiększania naszej strony, obrazy zwiększają czas jej ładowania. Dzieje się tak oczywiście z powodu zbyt dużych rozmiarów zastosowanych grafik. Na szczęście istnieje wiele aplikacji, mniej lub bardziej skomplikowanych, umożliwiających optymalizację obrazów.
Dzisiaj chciałbym przedstawić dodatek do Visual Studio 2010, który maksymalnie ułatwia ten proces. Jest nim Image Optimizer.
Dodatek ten możemy zainstalować za pomocą nowego (w Visual Studio 2010) menadżera rozszerzeń (Tools -> Extension Manager …):
lub pobierając instalator ze strony: http://visualstudiogallery.msdn.microsoft.com/en-us/a56eddd3-d79b-48ac-8c8f-2db06ade77c3.
Image Optimizer dodaje nowe pozycje w menu kontekstowym w Solution Explorerze:
1. Klikając na folderze wybieramy “Optimize images” i dokonujemy optymalizacji wszystkich znajdujących się w nim obrazów:
2. lub klikając na konkretnym obrazie “Optimize image”, aby go zoptymalizować.
Image Optimizer wykorzystuje jedne z najpopularniejszych serwisów do optymalizacji obrazów:
- SmushIt – http://www.smushit.com/ysmush.it/
- PunyPNG – http://punypng.com/
Warto o tym pamiętać, ponieważ nie będziemy mogli korzystać z tego dodatku będąc offline. Zastosowane w tych portalach algorytmy optymalizacji starają się zmniejszyć rozmiar grafiki nie zmieniając przy tym (widocznie) ich jakości. Dodatkowo raz zoptymalizowany obraz przy następnej próbie optymalizacji zostanie pominięty.
Za pomocą Image Optimizera możemy optymalizować trzy najpopularniejsze pliki graficzne:
- GIF (również animowane)
- PNG
- JPG
Raport z optymalizacji każdorazowo jest wyświetlany w okienku Output:
Dodatkowo ciekawą opcją Image Optimizera jest możliwość zamiany obrazów na stringi w formacie base64 i osadzanie ich bezpośrednio w plikach CSS lub kodzie HTML. Ale o tym napiszę w następnym poście 🙂
1 comment
Comments are closed.