Recenzja Quicq: optymalizacja obrazu WordPress w czasie rzeczywistym

Czy wiesz, że obrazy stanowią średnio około połowy rozmiaru pliku przeciętnej strony internetowej?

Oznacza to, że jeśli używasz niezoptymalizowanych obrazów, mogą one mieć ogromny negatywny wpływ na czas wczytywania Twojej witryny.

Quicq to usługa firmy Afosto, która umożliwia pełną optymalizację obrazów Twojej witryny w czasie rzeczywistym i udostępnianie ich z sieci dostarczania treści (CDN) opartej na Google Cloud. Oprócz wydajności można go również używać do łatwego manipulowania obrazami, na przykład ich przycinania, dodawania znaków wodnych i innych.

Współpracuje z WordPress za pośrednictwem dedykowanej wtyczki integracyjnej, a także z innymi platformami, takimi jak Magento i PrestaShop.

W naszym praktycznym przeglądzie Quicq pokażemy Ci, jak działa Quicq i jak możesz go wykorzystać do optymalizacji obrazów witryny WordPress.

Zagłębmy się…

Recenzja Quicq: co robi wtyczka

Na wysokim poziomie Quicq koncentruje się na oferowaniu kompletnego rozwiązania do optymalizacji obrazu WordPress. Jest to w zasadzie narzędzie typu plug-and-play, które pozwala korzystać ze wszystkich ważnych taktyk optymalizacji obrazu – więcej o tych poniżej.

Istnieją dwie „główne” taktyki, o których większość ludzi myśli, jeśli chodzi o optymalizację obrazu:

• Zmiana rozmiaru – zmiana rozmiaru rzeczywistych wymiarów obrazu, aby dopasować go do tego, jak zamierzasz go używać w swojej witrynie. Mniejsze wymiary oznaczają mniej danych, co oznacza mniejszy rozmiar obrazu.
• Kompresja – użycie algorytmu kompresji do zmniejszenia rozmiaru pliku obrazu bez zmiany jego wymiarów, albo poprzez algorytm bezstratny ( brak zmiany jakości ) albo algorytm stratny ( może niewielkie obniżenie jakości ).

Quicq z pewnością może zaimplementować te taktyki za Ciebie, ale jest to również jeden z nowych rodzajów wtyczek do optymalizacji obrazu, które wykraczają poza tylko statyczną zmianę rozmiaru i kompresję obrazów.

Zamiast tego automatycznie wyświetla obrazy z sieci CDN opartej na Google Cloud, a następnie optymalizuje je w czasie rzeczywistym dla odwiedzających.

Gdy tylko aktywujesz Quicq w swojej witrynie, automatycznie zoptymalizuje wszystkie Twoje obrazy z następującymi optymalizacjami:

1. Obsługuj je za pośrednictwem sieci Quicq CDN, która jest obsługiwana przez Google Cloud. Dzięki temu odwiedzający mogą pobrać Twoje obrazy z najbliższej lokalizacji CDN.
2. Zmień ich rozmiar do optymalnego rozmiaru na podstawie urządzenia każdego odwiedzającego.
3. Skompresuj je, aby zmniejszyć rozmiar pliku.
4. Przekonwertuj je na zoptymalizowany format obrazu, który oferuje mniejsze rozmiary niż JPEG i PNG. Quicq obsługuje zarówno WebP, jak i AVIF, nowszy format obrazu, który może oferować nawet mniejsze rozmiary plików niż WebP. Obsługa AVIF jest godna uwagi, ponieważ nie wszystkie usługi obsługują jeszcze ten nowszy format obrazu.

Wszystkie te zmiany doprowadzą do znacznie szybszego czasu ładowania obrazu (a w konsekwencji czasu ładowania strony internetowej).

Dlaczego warto korzystać z dynamicznej optymalizacji obrazu w czasie rzeczywistym?

Jak wspomniałem powyżej, Quicq stosuje podejście dynamicznej optymalizacji, które optymalizuje obrazy w czasie rzeczywistym.

Oznacza to, że zamiast optymalizować oryginalną wersję obrazu na serwerze witryny WordPress, tak jak w przypadku tradycyjnej wtyczki optymalizacyjnej, Quicq nie dotyka oryginalnego obrazu, ale zamiast tego wykonuje swoje operacje w „chmurze”.

Takie podejście do optymalizacji dynamicznej ma kilka zalet.

Najważniejsze jest to, że możesz upewnić się, że każdy odwiedzający zobaczy zoptymalizowany obraz na podstawie jego rzeczywistych wymiarów urządzenia.

Na przykład, jeśli odwiedzający przegląda internet na ekranie smartfona o niskiej rozdzielczości, możesz wyświetlić obraz o niewielkich wymiarach bez wpływu na jego wrażenia.

Ale jeśli odwiedzający przegląda internet na ogromnym ekranie 4K, Twoja witryna może bezproblemowo wyświetlać większą wersję obrazu, aby zapewnić użytkownikom dobre wrażenia.

Ponieważ Quicq wykorzystuje dynamiczne podejście do optymalizacji w locie, jest w stanie obsłużyć optymalny rozmiar i format obrazu dla każdego indywidualnego użytkownika.

To dynamiczne podejście jest również bardzo przydatne, jeśli chcesz manipulować obrazami, ponieważ możesz wprowadzać zmiany w obrazie bez konieczności edytowania oryginalnego pliku obrazu lub przesyłania nowej wersji obrazu.

Na przykład, po prostu manipulując adresem URL obrazu, możesz wykonać następujące manipulacje:

• Przytnij obraz na różne sposoby.
• Dodaj znak wodny.
• Rozmyj obraz.
• Zmień wymiary obrazu.
• Dostosuj jakość obrazu. Na przykład, może chcesz użyć w niektórych miejscach nieskompresowanego obrazu o wysokiej rozdzielczości. Możesz to łatwo zrobić.
• Użyj innego formatu obrazu. Na przykład WebP lub AVIF.

Dzięki Quicq wszystko, co robisz, to przesyłanie oryginalnego obrazu jeden raz. Następnie możesz wykonać wszystkie te manipulacje, dodając dodatkowe parametry zapytania do adresu URL.

Na przykład, oto link do oryginalnego obrazu:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg

A oto link, który przycina obraz do kwadratu o wymiarach 1000×1000:

https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1

W następnej sekcji pokażę kilka prawdziwych przykładów.

Praktyczne ćwiczenia z Quicq: jak zoptymalizować obrazy WordPress

Teraz, gdy już wiesz, co robi Quicq, przejdźmy do praktycznego tematu, a pokażę Ci, jak działa na WordPressie.

Ponownie, nie ogranicza się to do WordPressa, ale oferuje dedykowaną wtyczkę WordPress, która bardzo ułatwia korzystanie z witryny WordPress.

1. Zarejestruj się, aby uzyskać bezpłatne konto Quicq

Aby rozpocząć, musisz zarejestrować bezpłatne konto Quicq/Afosto. Opowiem o cenach dalej, ale jest hojny, wieczny darmowy plan, a także otrzymujesz 14-dniowy nieograniczony bezpłatny okres próbny (bez karty kredytowej).

Po zarejestrowaniu konta kliknij przycisk Rozpocznij bezpłatny okres próbny obok opcji Quicq na pulpicie nawigacyjnym Afosto:

2. Utwórz sieć CDN Quicq

Następnie musisz utworzyć sieć CDN Quicq, która jest zasadniczo tym, co będzie służyć i optymalizować obrazy dla Twojej witryny.

Po uruchomieniu wersji próbnej Quicq zadanie, które to zrobi, powinno automatycznie pojawić się na liście zadań głównego pulpitu nawigacyjnego Afoso. Jeśli go nie widzisz, możesz również uzyskać dostęp do tego interfejsu, klikając ikonę koła zębatego obok Quicq:

Najpierw musisz wprowadzić adres URL, którego chcesz używać dla swojej sieci Quicq CDN. Twoje obrazy będą ładowane z tego adresu URL, więc zechcesz, aby były powiązane z Twoją witryną.

Na przykład, gdybym tworzył jeden dla WP Mayor, utworzyłbym adres URL wpmayor .

Następnie wprowadź bezpośredni adres URL do istniejącego obrazu w Twojej witrynie i kliknij Zweryfikuj witrynę:

Quicq powinien wtedy automatycznie wykryć, że używasz WordPressa i wygenerować ścieżkę do twoich obrazów, która powinna być folderem uploads w folderze wp-content .

Możesz także rozwinąć Ustawienia zaawansowane , które pozwalają kontrolować zachowanie pamięci podręcznej obrazów. Wartość domyślna to 365 dni, co powinno wystarczyć. Ale możesz to zmienić, jeśli chcesz.

Aby zakończyć, kliknij przycisk Dodaj :

3. Zainstaluj wtyczkę Quicq i dodaj klucz URL

Po utworzeniu konta i skonfigurowaniu CDN możesz zainstalować bezpłatną wtyczkę Quicq z WordPress.org na swojej stronie. Umożliwi to zintegrowanie witryny WordPress z utworzonym właśnie obrazem CDN.

Po aktywowaniu wtyczki przejdź do nowego obszaru Quicq na pulpicie WordPress i dodaj klucz URL wprowadzony w procesie konfiguracji. To jest część adresu URL CDN, którą można było dostosować.

Dla mojego przykładu jest to wpmayor .

Następnie wybierz przełącznik Active Quicq , a następnie Zapisz zmiany , aby go aktywować:

I to wszystko! Twoja witryna WordPress powinna teraz zacząć ładować swoje obrazy za pośrednictwem Quicq CDN, która obejmuje optymalizacje obrazu w czasie rzeczywistym.

Jedną drobną rzeczą, na którą chciałbym zwrócić uwagę, jest to, że nie sądzę, aby obszar wtyczek Quicq był obszarem menu najwyższego poziomu na pulpicie WordPress. Ponieważ jest to tylko jednorazowy proces konfiguracji, myślę, że lepiej byłoby przenieść go do podmenu, takiego jak Ustawienia → Quicq , aby pomóc użytkownikom w bardziej przejrzystym obszarze administracyjnym.

4. Manipuluj obrazami za pomocą parametrów adresu URL (w razie potrzeby)

W przypadku większości witryn WordPress nie musisz robić nic więcej, aby zoptymalizować obrazy. W tym momencie Quicq już automatycznie przeprowadza następujące optymalizacje:

• Kompresowanie/zmiana rozmiaru obrazów w optymalny sposób w oparciu o urządzenie każdego użytkownika.
• Konwersja obrazów do formatu WebP lub AVIF w zależności od tego, co działa najlepiej.
• Udostępnianie obrazów za pośrednictwem Google Cloud CDN firmy Quicq.

Jednak, jak wspomniałem wcześniej, jedną z fajnych rzeczy w podejściu Quicq do pracy w czasie rzeczywistym jest to, że możesz również manipulować obrazami, po prostu dodając parametry zapytania do adresu URL.

Możesz sprawdzić stronę dokumentacji tutaj, aby uzyskać szczegółowy wygląd, ale przejrzyjmy kilka szybkich przykładów, jak to działa.

Załóżmy, że masz szeroki obraz, którego używasz w jednej części swojej witryny. Teraz chcesz użyć tego samego obrazu, ale przyciąć go do kwadratowego obrazu.

Bez Quicq musiałbyś otworzyć swoje ulubione narzędzie do edycji obrazu, przyciąć obraz, a następnie przesłać nową kopię przyciętego obrazu do użycia.

Dzięki przetwarzaniu obrazu w czasie rzeczywistym w Quicq, możesz wykonać przycinanie poprzez dodanie parametru URL ( i bez wpływu na oryginalny obraz ).

Oto oryginalny obraz i adres URL:

A oto jak wygląda obraz po przycięciu do kwadratu o wymiarach 1000×1000 px po dodaniu tego parametru adresu URL – ?w=1000&h=1000&c=1 :

Oto kolejny przykład…

Załóżmy, że chcesz pójść o krok dalej i rozmyć obraz, a także przyciąć go do kwadratu.

Wystarczy dodać parametr rozmycia i ustawić, ile rozmycia chcesz użyć (od 0 do 3), a obraz będzie rozmyty:

Szybkie ceny

Quicq ma dość hojny, zawsze darmowy plan, a następnie płatne plany dla użytkowników, którzy potrzebują więcej funkcji.

Bezpłatny abonament pozwala zoptymalizować do 100 000 obrazów miesięcznie* i bezterminowo obsługiwać 25 GB przepustowości CDN miesięcznie , co powinno wystarczyć w przypadku małej witryny. Na przykład, jeśli masz podstawową witrynę z broszurami/portfolio lub mały blog, nie sądzę, że kiedykolwiek przekroczysz to.

*Pamiętaj, że optymalizacje obrazu następują dynamicznie, a nie jednorazowo, jak w przypadku tradycyjnej wtyczki, więc obraz liczy się jako jedna optymalizacja za każdym razem, gdy zostanie załadowany.

Jeśli potrzebujesz płatnych planów, rozliczasz się na podstawie dwóch wskaźników:

• Optymalizacje – liczba optymalizacji obrazu, które masz miesięcznie.
• Transfer danych — ilość przepustowości zużywanej przez obrazy podczas obsługi przez CDN.

Ta strategia rozliczeniowa jest nieco bardziej złożona niż niektóre inne wtyczki do optymalizacji obrazu w czasie rzeczywistym, które zazwyczaj rozliczają Cię na podstawie liczby odwiedzin Twojej witryny w miesiącu.

Jednak bardziej podoba mi się ten model rozliczeń, ponieważ uważam, że jest to bardziej sprawiedliwy sposób rozliczania, nawet jeśli nieco utrudnia oszacowanie zużycia.

Dzięki takiemu podejściu opłaty będą naliczane tylko na podstawie rzeczywistego wykorzystania, co prawdopodobnie pomoże Ci zaoszczędzić pieniądze.

Aby dowiedzieć się, ile zapłacisz, możesz skorzystać z kalkulatora na stronie z cennikiem.

Jeśli nie masz pewności co do sposobu korzystania z witryny, możesz po prostu skorzystać z poziomu bezpłatnego, aby rozpocząć lub skorzystać z 14-dniowej bezpłatnej wersji próbnej planów o większym wykorzystaniu, która powinna zapewnić dobre zrozumienie sposobu korzystania z witryny:

Jeśli potrzebujesz planów premium, możesz uzyskać 20% zniżki na pierwsze dwa miesiące na wszystkie pakiety dzięki naszemu ekskluzywnemu kodowi kuponu:

20% TANIEJ

Szybkie

Uzyskaj 20% zniżki na pierwsze dwa miesiące na wszystkie pakiety QuicqShow More

Uzyskaj 20% zniżki na pierwsze dwa miesiące na wszystkie pakiety Quicq Show Less

WPMAYOR20

Zdobądź tę ofertę

Ostatnie przemyślenia na temat Quicq

Ogólnie wiem, że wiele witryn przechodzi na to podejście do optymalizacji obrazu w czasie rzeczywistym.

Myślę, że to podejście ma wiele do zaoferowania ze względu na elastyczność, jaką daje w zakresie manipulowania obrazami i upewniania się, że każdy odwiedzający widzi obraz zoptymalizowany pod kątem jego wyjątkowej sytuacji.

Quicq nie jest pierwszą wtyczką, która wprowadza to do WordPressa, ale ma na to kilka rzeczy:

1. Ma bardzo hojny bezpłatny poziom. Ma najwyższy darmowy poziom, jaki widziałem.
2. Podoba mi się jego model cenowy dla opcji premium, ponieważ płacisz tylko na podstawie rzeczywistego wykorzystania. Chociaż sprawia to, że ustalanie cen jest trochę bardziej skomplikowane, myślę, że jest to „sprawiedliwszy” sposób rozliczania. Ponadto zawsze możesz skorzystać z 14-dniowego nieograniczonego okresu próbnego, aby sprawdzić rzeczywiste wykorzystanie witryny, jeśli nie masz pewności, ile zapłacisz.
3. Nadal pozwala wykonywać inne manipulacje obrazem, takie jak przycinanie, rozmycie i tak dalej. Większość innych wtyczek do WordPressa, o których wiem, skupia się tylko na wydajności lub daje dostęp tylko do znaków wodnych, więc fajnie, że Quicq wykracza poza to. Większość zwykłych użytkowników prawdopodobnie ich nie użyje, ale jest to miłe dla zaawansowanych użytkowników i programistów.

Jeśli chcesz to wypróbować, Quicq ma hojny, wiecznie bezpłatny plan, a także 14-dniowy nieograniczony bezpłatny okres próbny, który pomoże Ci określić, jak korzystasz. Możesz kliknąć poniższe przyciski, aby rozpocząć: