Smush Image
Smush image czyli wtyczka pozwalająca na znaczne odchudzenie naszej strony poprzez optymalizacje zdjęć jakie na niej widnieją. Jak wiemy jednym z największych problemów dzisiejszego web developmentu są obrazki które ważą niespotykanie dużo KB. Rozwiązać ten problem można na bardzo wiele sposób stosując różne technologie przy tworzeniu naszej strony. W dniu dzisiejszym jednak chciałem się skupić na rozwiązaniu tego problemu z pomocą wtyczki wordpress’owej. Wtyczka Smush image pozwoli nam na bardzo proste i efektywne optymalizacji naszych obrazków na stronie.
Optymalizacji mogą ulec bitmapowe pliki graficzne takie jak jpg, png itp. Wtyczka pozwala nie tylko zoptymalizować wszystkie znajdujące się w serwisie bitmapy, ale również kompresować w locie wszystkie dodawane obrazy. Dodatek ten bardzo przypomina Image component który występuje we frameworku next.js, pozwala on na optymalizację zdjęć poprzez ich kompresję o nawet kilkadziesiąt razy. Wtyczka wprowadza również takie rozwiązanie jak lazy loading, czyli ładowanie obrazków wraz ze skrolowaniem na stronie. Pozwala to na załadowanie mniejszej ilości danych przez użytkownika, podczas ładowania pierwszego widoku strony jaki pojawi się użytkownikowi. Pomaga to w pozycjonowaniu strony przez roboty google. Wtyczka posiada również opcję zmieniania rozdzielczości obrazków automatycznie. Wtyczka ta pozwala również na darmowe korzystanie z niej dopóki rozmiar naszych plików nie przekroczy 5MB. W wersji pro wtyczka pozwala na używanie formatu .webp. Jedna z wbudowanych z funkcji tej wtyczki to „Incorrect Size Image Detection”. Jak sama nazwa wskazuje pozwala na znalezienie nieprawidłowych rozmiarów obrazków. Wielkość obrazków przesyłanych przez sieć można sprawdzić poprzez kliknięcie f12 oraz później „sieć”, pokaże nam to pliki jakie zostały przez nią przesłane. By odszukać obrazki wystarczy kliknąć opcję „images”, rozmiar będzie widnieć po prawo.
link do wtyczki:
a tutaj mały przykład jak to działa:
