Jak zapewnić najlepszy rozmiar obrazu dla prędkości witryny telefonu komórkowego

Jesteś na telefonie, gotowy na zakup tego produktu, który obserwowałeś, a strona internetowa po prostu… ładuje. Nagle niecierpliwie stukasz, zastanawiając się, czy Twój Internet jest zepsuty, czy witryna przeklęta. I bądźmy szczerzy, prawdopodobnie po prostu odbijasz się. Nie jesteś sam.

Czy wiesz, że 53% użytkowników mobilnych porzuci stronę, jeśli załadowanie zajmuje dłużej niż 3 sekundy? Pomyśl teraz o swojej stronie internetowej. To ogromna część potencjalnych klientów znikającej, nigdy nie do powrotu. Wolne czasy ładowania nie są tylko frustrujące dla odwiedzających; Zranili twój wynik dolnej. Wpływają one na twoje rankingi wyszukiwarek (SERP) i utrudniają ludziom znalezienie cię w pierwszej kolejności. W tym poście pokażemy Ci, jak kontrolować te strony z obrazem i zapewnimy najlepszy rozmiar witryny w witrynie telefonu komórkowego. Przedstawimy Ci również dobre narzędzia, takie jak Divi, które pomogą Ci reaktywnie zaprezentować swoje zdjęcia.

Dlaczego prędkość mobilna jest ważna?

Wpływ powolnej strony jest czymś więcej niż tylko denerwującym. Może to wpływać na wrażenia użytkownika (UX), optymalizację wyszukiwarek (SEO) i twój wynik finansowy.

Wyobraź sobie, że przeglądasz nową letnią sukienkę lub najgorętsze nowe słuchawki. Stukasz na stronie internetowej i wydaje się, że oglądasz suchą farbę. Wpada frustracja, a prawdopodobnie kaucja znajdziesz innego sprzedawcy z szybszą witryną. Nazywa się to odbiciem i to zła wiadomość dla firm internetowych. Według DataBox średnia wskaźnik odrzuceń wynosi około 44%. Coś wyższego może prowadzić do utraty przychodów i braku zaangażowania, zabijając firmę internetową.

Nie zapominajmy o Mobile SEO. Google polega na zapewnieniu najlepszego możliwego wrażenia użytkownika, w tym w priorytecie szybkich witryn mobilnych. Korzystają z indeksowania mobilnego, co oznacza, że ​​przede wszystkim przyglądają się wersji mobilnej Twojej witryny przy określaniu rankingów wyszukiwania.

Jednak wpływ słabej prędkości mobilnej wykracza poza sfrustrowanych użytkowników i niższych rankingów. Może i uderzy w twój wynik finansowy. Wyobraź sobie powolną witrynę e-commerce zbudowaną z WordPress. Te dodatkowe sekundy (ponad 1-2 to zbyt długie) mogą kosztować sprzedaż. Kluczowe utrzymanie witryny na urządzeniach mobilnych jest niezbędne dla przychodów, więc zapewnienie, że nie tracisz klientów, ponieważ witryna jest zbyt długa, aby się załadować.

Istnieje wiele sposobów przyspieszenia witryny, ale nisko wiszące owoce określa najlepszy rozmiar obrazu dla prędkości witryny telefonu komórkowego.

Podstawy optymalizacji obrazu dla WordPress

Obrazy mają kluczowe znaczenie, aby Twoja witryna wyglądała dobrze i utrzymywać zaangażowanie użytkowników. Zbyt duże obrazy mogą naprawdę spowolnić twoją stronę. Jak się dowiedzieliśmy, badania pokazują, że większość ludzi nie będzie czekać wiecznie. Jak więc możesz zachować świetnie obrazy bez poświęcania prędkości? Zbadajmy kilka podstaw do utrzymania szybkiego i płynnego działania witryny.

1. Wybierz odpowiedni format obrazu

Możesz użyć kilku typów obrazów na swojej stronie WordPress, w tym JPG, PNG i WebP. Który z nich najlepiej użyć? Pokawmy się głębiej w każdy typ obrazu i które sytuacje najlepiej ich używać.

• JPG: Są jak twoje codzienne zdjęcia. Są świetne do obrazów o szerokich zmianach kolorów i gładkich zmianach, takich jak krajobrazy lub portrety. Są dobre w większości sytuacji, takich jak tła bohaterów, zdjęcia zespołu, post na blogu przedstawione obrazy itp., Które JPG mogą być niewłaściwie rozmiarowe, co czyni je większymi rozmiarami pliku.
• PNG: PNG są idealne do obrazów z ostrymi krawędziami, takimi jak logo lub grafika z tekstem. Są również świetne na obrazy z dużymi obrazami koloru solidnego, ponieważ utrzymują kolory chrupiące i czyste. Jednak PNG mają zwykle większy rozmiar pliku, więc użyj plików PNG dla mniejszych obszarów projektu, aby zmniejszyć ich rozmiar.
• Webp: Google's Syminchild, WebP, często oferuje najlepsze uciski, co skutkuje znacznie mniejszym rozmiarem pliku, nawet podczas korzystania z dużych obrazów (przykład: 1920px x 1080px). Jakość obrazu nie jest tak dobra jak JPG, ale różnica między nimi jest znacząca.

2. Zmiana obrazów

Rozmiar obrazu ma znaczenie. Aby utrzymać rozmiar, prześlij obrazy, które są tak duże, jak to konieczne na Twojej stronie. Nie ma potrzeby przesyłania gigantycznego obrazu, a następnie zmniejszania go. Tworzy dla Ciebie dodatkową pracę i spowolni twoją stronę.

Ważne jest, aby pamiętać, że jeden rozmiar nie pasuje do wszystkich obrazów. Czy odwiedzający na smartfonie potrzebuje ogromnego obrazu zaprojektowanego dla większego ekranu stacjonarnego? Nie. Używaj responsywnych obrazów, jeśli to możliwe, aby dostarczyć obraz idealnie rozmiaru dla każdego rozmiaru ekranu. Przeżyjemy to bardziej później, ale jednym z najlepszych sposobów na upewnienie się, że Twoje obrazy reagują na WordPress, jest użycie motywu WordPress, takiego jak Divi, który pozwala przesyłać obrazy dla każdego punktu przerwania przeglądarki, utrzymując rozmiar pliku.

3. Wyciśnij niepotrzebne

Jeśli chodzi o rozmiar obrazu, mniejsze jest lepsze. Korzystając z obrazów w WordPress, chcemy, aby obrazy były jak najbardziej małe bez poświęcania jakości. Możesz użyć narzędzi kompresji, takich jak wtyczki optymalizacji obrazu do ciężkiego podnoszenia. Narzędzia takie jak optymalizator obrazu EWWW są dobre, ale zagłębimy się głębiej w narzędzia później w tym poście.

Wiele wtyczek WordPress i narzędzia do zmiany rozmiaru obrazu online używa utraty lub bezstratów kompresji, aby zmniejszyć rozmiar obrazów. Bezprzestrzenna kompresja jest jak ostrożne składanie kawałka papieru - możesz go idealnie rozwinąć i w razie potrzeby odzyskać oryginał. Jest świetny do obrazów z ostrymi krawędziami, ale nie zawsze może skutkować największą redukcją wielkości pliku.

Z drugiej strony bezstronna kompresja jest nieco bardziej agresywna. To jak rozwinięcie tego samego kawałka papieru. Możesz stracić trochę szczegółów, ale otrzymasz znacznie mniejszy rozmiar pliku.

4. Załaduj obrazy, gdy są gotowe do zobaczenia

Kolejnym krokiem, jaki możesz zrobić, jest leniwe ładowanie obrazów na WordPress. Wyobraź sobie przewijanie długiej strony. Czy naprawdę musisz załadować wszystkie zdjęcia jednocześnie? Prawdopodobnie nie. Leniwe ładowanie ładuje tylko obrazy, które musisz wyświetlić stronę, umieszczając te dalej w dół strony, czekając na załadowanie, gdy do nich dotrzesz. Wtyczki, takie jak WP Rocket, mogą łatwo dodać leniwe ładowanie do Twojej witryny WordPress. Sprzeczywistni czas początkowych czasów ładowania strony, co jest niezbędne do zachowania radości odwiedzających i rozmiar strony.

Wymiar obrazu Najlepsze praktyki

Jeśli chodzi o wymiary obrazu, należy pamiętać o kilku kluczowych praktykach, aby upewnić się, że witryna ładuje się szybko i świetnie wygląda na wszystkich urządzeniach:

Użyj responsywnych rozmiarów obrazów

Różne urządzenia mają różne rozmiary ekranu i rozdzielczości, więc podejście jedno rozmiarowe nie będzie działać. Na przykład komputer stacjonarny może wymagać wielkości obrazu o szerokości 1920px, podczas gdy urządzenie mobilne wymaga tylko szerokości 600 px. Możesz podać odpowiedni rozmiar dla każdego urządzenia za pomocą responsywnych obrazów. Narzędzia takie jak tajny atrybut w HTML lub responsywny motyw WordPress mogą przechowywać obrazy zawarte w DIV, aby dostarczyć odpowiedni rozmiar obrazu na podstawie urządzenia użytkownika.

Współczynnik kształtu ma znaczenie

Utrzymanie konsekwentnego zdrajcy aspektu na twoich obrazach może pomóc w uniknięciu zniekształceń lub dziwnych upraw. Na przykład, jeśli obraz komputerowy ma współczynnik proporcji 16: 9, wersja mobilna powinna zachować ten sam stosunek, nawet jeśli jest to mniejszy obraz. Zapewnia to, że twoje obrazy wyglądają proporcjonalnie i profesjonalnie we wszystkich rozmiarach ekranu.

Unikaj nadmiernego rozmiaru

Przesłanie większe niż konieczne obrazy jest częstym błędem, który może spowolnić twoją stronę. Na przykład, jeśli obszar zawartości Twojej witryny ma tylko 1080px szerokości, przesłanie obrazu o szerokości 2000px jest niepotrzebne. Obrazy dużych zużywają przepustowość i przechowywanie, co prowadzi do wolniejszych czasów ładowania strony. Zawsze zmienia rozmiar obrazów, aby pasować do maksymalnych wymiarów wyświetlanych w Twojej witrynie.

Testować na urządzeniach

Nawet przy odpowiednich wymiarach obrazy mogą zachowywać się inaczej na różnych urządzeniach i przeglądarkach. Zawsze testuj swoje obrazy na wielu urządzeniach - komputerach stacjonarnych, tabletach i smartfonach - aby upewnić się, że wyglądają ostro i ładują się szybko. Narzędzia, takie jak test mobilny Google lub narzędzia programistyczne przeglądarki, mogą pomóc w znalezieniu i naprawie problemów z obrazem dla wszystkich rozmiarów ekranu.

Rozważ kompresję obrazu

Nawet przy odpowiednich wymiarach obrazy mogą być nadal zbyt duże. Narzędzia kompresyjne mogą zmniejszyć rozmiary plików bez poświęcania jakości. Na przykład wysokiej jakości obraz JPG lub WebP może być ściśnięty, aby ładować szybciej, a jednocześnie wyglądać świetnie. Łączenie właściwych wymiarów z kompresją zapewnia dobre obrazy i utrzymują minimalne rozmiar strony.

Jakie są najlepsze narzędzia do rozmiaru obrazów w WordPress?

Istnieje kilka sposobów na łatwą rozmiar obrazów dla WordPress: z wtyczką, wbudowanymi funkcjami motywu premium, takiego jak Divi lub z Divi AI. Zbadajmy je bardziej, aby lepiej zrozumieć, co robią.

1. Wtyczki WordPress

Korzystanie z wtyczki optymalizacji obrazu jest jednym z najlepszych sposobów zmiany rozmiaru obrazów. Zazwyczaj pozwalają na wykonywanie działań, takich jak masowa optymalizacja obrazów lub rozmiar obrazów, ponieważ są one przesyłane do galerii multimediów WordPress. Wiele oferuje również zaawansowane funkcje, takie jak konwersja WebP, leniwe ładowanie i różne poziomy kompresji obrazu.

• Optymalizator obrazu EWWW: solidna opcja z funkcjami takimi jak optymalizacja masowa, optymalizacja tła i konwersja do formatu WebP. Optymalizator obrazu EWWW oferuje bezpłatny plan z ograniczonym użyciem i płatnymi planami od 8 USD miesięcznie.
• SHORTPIXEL: Znany z doskonałych algorytmów kompresji i możliwości znacznego zmniejszania wielkości plików obrazu przy jednoczesnym utrzymaniu jakości. ShortPixel oferuje bezpłatny plan z ograniczonym użytkowaniem i miesięcznymi planami od 9,99 USD miesięcznie.
• Optimole: podkreśla szybkość i wydajność. Wykorzystuje system oparty na chmurze do optymalizacji obrazu i dostarczania. Optimole oferuje bezpłatny plan z ograniczonym użyciem i płatnymi planami od 22,99 USD miesięcznie.
• WP Smush : popularna i wysoko oceniana opcja. Smush oferuje bezpłatne i płatne plany (począwszy od 3 USD miesięcznie) z funkcjami takimi jak automatyczna optymalizacja, utrata/bezstratna kompresja, leniwe ładowanie i konwersja WebP.
• Wyobraź sobie: wtyczka napędzana AI, która koncentruje się na kompresji wysokiej jakości przy minimalnej straty. Wyobraźnia zapewnia bezpłatny plan z ograniczonym użyciem i płatnymi planami od 11,99 USD miesięcznie.

2. Divi (WordPress Teme & Page Builder)

Divi to coś więcej niż motyw WordPress - to pełna ramy budowania responsywnych stron internetowych. Zapewnia solidnego konfrontacji wizualnej z responsywnymi elementami sterującymi, które pozwalają korzystać z najlepszego rozmiaru obrazu do prędkości witryny telefonu komórkowego.

Divi obsługuje mobilne rozmiary obrazów za pomocą responsywnego systemu edycji i ustawień projektowania. Po dodaniu obrazów w Divi możesz ustawić różne obrazy dla widoków komputerowych, tabletów i mobilnych. Jest to część responsywnych funkcji projektowych Divi, umożliwiając optymalizację obrazów dla każdego typu urządzenia. Możesz dostosować ustawienia, takie jak rozmiar, pozycja, przesunięcie poziome i więcej, specjalnie dla urządzeń mobilnych, zapewniając, że obrazy wyglądają idealnie na wszystkich rozmiarach ekranu.

Zmiana obrazów dla mniejszych ekranów

W dowolnym module projektowym, który zawiera obraz, responsywne elementy sterujące Divi pozwalają wyświetlić jeden obraz tła dla komputera stacjonarnego, podczas gdy inny jest wyświetlany dla tabletów i urządzeń mobilnych. Na przykład podczas edytowania sekcji bohatera na stronie internetowej Divi możesz dodać obraz tła o pomiar 1920px x 1080px , który jest idealnym rozmiarem dla dużych ekranów. Przeglądanie tego samego obrazu na urządzeniu mobilnym może nie wyglądać tak dobrze, w zależności od używanego obrazu. Dlatego Divi zawiera ustawienia umożliwiające dodanie mniejszego obrazu tła (lub całkowicie innego obrazu) dla mniejszych ekranów.

Pozycjonowanie tła

Divi pozwala również kontrolować sposób ustawiania obrazów tła na różnych rozmiarach ekranu. Każdy moduł, kolumna, wiersz i sekcja ma te elementy sterujące, co ułatwia upewnienie się, że obraz wygląda świetnie bez względu na to, z jakich użytkowników urządzeń korzystają.

Na przykład możesz ustawić obraz tła wyśrodkowanego na pulpicie, ale zmienić go na górę lub na dole na urządzeniach mobilnych. Zapewnia to, że najważniejsza część obrazu jest zawsze widoczna, bez względu na rozmiar ekranu. Jest to świetny sposób na wykorzystanie jednego obrazu i utrzymanie wielkości strony.

Divi ma wbudowane leniwe ładowanie

Po dodaniu obrazów lub tła za pomocą Divi motyw zajmuje się ciężkim podnoszeniem, automatycznie stosując leniwe ładowanie. Obrazy nie załadują się, dopóki użytkownik nie przewidzie się do tej sekcji, utrzymując twoją stronę snapę i responsywność. Divi wykorzystuje atrybuty HTML obsługiwane przez nowoczesne przeglądarki, zapewniając odroczenie obrazów przy minimalnym kosztach przetwarzania. Rezultatem są szybsze prędkości strony i gładsze wrażenia użytkownika. Zmniejszając liczbę obrazów załadowanych z góry, Divi pomaga ulepszyć kluczowe wskaźniki, takie jak największa zawartość farby (LCP) i zwiększa wydajność podstawowej witalności internetowej.

Aby dowiedzieć się więcej o korzystaniu z obrazów w Divi, sprawdź nasz ostateczny przewodnik po korzystaniu z obrazów w Divi.

Zdobądź Divi

3. Divi ai

Innym sposobem korzystania z Divi, aby zapewnić najlepszy rozmiar obrazu na stronie telefonu komórkowego, jest użycie DIVI AI do generowania idealnych obrazów. Divi AI jest jak osobisty asystent projektowania twoich stron internetowych. Pojownik tekstowy może generować tekst, kod, strony internetowe, pełne strony internetowe i idealne zdjęcia.

Na przykład potrzebujesz wizerunku do majestatycznego pokrytego śniegiem zasięg do wypożyczalni snowboardu. Przeszukałeś witryny obrazów bez opłat licencyjnych, ale nie możesz znaleźć tego, czego chcesz. Divi AI może wygenerować dla Ciebie ten obraz z określonym rozmiarem.

A dzięki responsywnym sterom Divi możesz również użyć Divi AI do generowania obrazów dla mniejszych ekranów.

Divi AI nie tylko tworzy piękne obrazy. Tworzy inteligentne obrazy. Możesz powiedzieć Divi AI dokładnie, jaki rozmiar potrzebujesz i dostarcza.

Zdobądź Divi Ai

Divi sprawia, że ​​zmiany rozmiaru witryn mobilnych jest proste

Znalezienie najlepszego rozmiaru obrazu dla telefonu komórkowego prędkość strony internetowej nie musi być wyzwaniem. Jeśli zdecydujesz się budować strony internetowe z Divi, będziesz dobrze wyposażony w radzenie sobie z powolnym ładowaniem. Wbudowane funkcje optymalizacji obrazu Divi, w tym responsywne rozmiar i leniwe ładowanie, działają za kulisami, aby zapewnić idealnie wyświetlane obrazy dla dowolnego rozmiaru ekranu. Ale korzyści wynikające z Divi na tym nie kończą się. Dzięki Divi AI możesz generować wysokiej jakości obrazy w dokładnych potrzebnych wymiarach, eliminując nieporęczne, powolne strony internetowe.

Aby uzyskać jeszcze większą kontrolę, wykorzystaj moc wtyczek, takich jak EWWW Optymalizator obrazu, aby dalej kompresować obrazy i dopracować prędkość witryny. Łączenie mocnych stron Divi z potężnymi narzędziami pozwala tworzyć witrynę, która wygląda niesamowicie i szybko się ładuje, sprawiając, że odwiedzający jest zadowoleni, a Twoja firma będzie się rozwijać.

Czy chcesz dowiedzieć się więcej o przyspieszeniu swojej witryny? Sprawdź te posty z naszego bloga:

• Jak zwiększyć wgląd Google Pagesspeed dla WordPress
• 12 najlepszych wtyczek optymalizacji prędkości WordPress (ranking)
• Optymalizacja prędkości Divi: The Ultimate Guide
• 5 najszybszych firm hostingowych WordPress (testowane)