Zapisywanie obrazów w Internecie zawsze było dla wielu tajemnicą. Przesyłanie ciężkich obrazów (oryginalny rozmiar obrazu przy szerokości 5000px, nieoptymalizowane obrazy) nie tylko spowoduje problemy z doświadczeniem użytkownika w witrynie, ale także wpłynie na strategię SEO (szybkość ładowania, współczynnik odrzuceń, ranking itp.).,
Ten artykuł jest podzielony na kilka części, obejmujących wszystko, co musisz wiedzieć, jak przygotować swoje obrazy do Internetu. W pierwszej części postu wymienimy zalecane rozmiary obrazów dla Twojej witryny Flothemes. Następnie w artykule opisano, jak sprawdzić różne sekcje w witrynie, aby zidentyfikować odpowiednie rozmiary obrazów przed przesłaniem ich do Internetu. Wyjaśnimy również, jak poprawnie eksportować / zapisywać obrazy, aby były zoptymalizowane pod kątem szybkości.,
na koniec przedstawimy kilka wskazówek SEO dotyczących prawidłowego tytułowania obrazów podczas ich zapisywania i dlaczego używanie znaczników ALT poprawi SEO. W przypadku już przesłanych obrazów do witryny pokażemy, jak zidentyfikować obrazy, które są zbyt duże i spowalniają witrynę. Zaczynajmy!
dlaczego Rozmiar obrazu i wydajność strony są ważne?
Nieoptymalizowane obrazy spowalniają strony internetowe. Powolne strony internetowe = złe wrażenia użytkownika, mniejsze szanse na pozycję w wyszukiwarkach Google i ostatecznie mniej zapytań i klientów.,
Zapisywanie obrazów o odpowiednich wymiarach i optymalizacja obrazów dla Internetu może pomóc w kilku rzeczach:
- szybkość – według badań przeprowadzonych przez Google, jeśli strona ładuje się w ciągu ponad 5 sekund, prawdopodobieństwo, że użytkownik mobilny opuści tę stronę wzrasta o 90%. Zmieniając rozmiar i zmniejszając rozmiary obrazów, przyspieszasz tworzenie stron w witrynie.
- User experience-dobra jakość, efektowne obrazy pomagają odwiedzającym uzyskać bardziej angażujące wrażenia podczas przeglądania Twojej witryny., Utrzymując te obrazy zoptymalizowane i szybkie ładowanie – zapewniasz bezproblemową i płynną obsługę odwiedzających, co motywuje ich do spędzania więcej czasu na Twojej witrynie i odkrywania treści.
- ranking SEO-Szybkość witryny jest czynnikiem rankingowym. Im szybsza jest Twoja witryna, tym lepiej możesz potencjalnie uzyskać rangę. Strony internetowe ze zoptymalizowanymi obrazami ładują się znacznie szybciej zarówno na komputerach, jak i urządzeniach mobilnych.
- sprzedaż-szybszy czas ładowania i lepsze SEO mogą pomóc przyciągnąć więcej użytkowników do twojej witryny, co zwiększa Twoje szanse na zapytanie i zarezerwowanie.,
uwaga: gdy mówimy o rozmiarze obrazu, mamy na myśli wymiar obrazu w pikselach.
jakie są najlepsze zdjęcia do Internetu i Flothemes?
podczas przesyłania obrazów do sieci należy wziąć pod uwagę wiele rzeczy, takich jak do czego służy obraz, jak duży powinien być plik i jaki rodzaj obrazu powinien być używany w różnych obszarach witryny.,
Użyj i wpisz Obraz
istnieją różne przypadki, w których będziesz chciał użyć różnych rozmiarów obrazów dla różnych obszarów witryny, poniżej omówię najczęstsze obszary i opcje rozmiaru, których możesz użyć dla każdego. Należy pamiętać, że są to zalecane, przyjazne dla siatkówki, opcje rozmiaru, biorąc pod uwagę, że większość użytkowników przegląda witrynę na urządzeniu mobilnym lub średniej wielkości 13-15 cali. Jeśli jednak chcesz, aby strona wyglądała świetnie dla Twojego monitora 27 (który ma naprawdę wysoką rozdzielczość), pamiętaj, że może to nie być to, z czego korzystają Twoi potencjalni klienci.,
Jeśli chcesz być bardziej precyzyjny, jak użytkownicy przeglądają Twoją witrynę i Twoje portfolio, możesz sprawdzić urządzenia używane do uzyskania dostępu do twojej witryny za pośrednictwem Google Analytics (przejdź do Audience – Technology – Browser& rozdzielczość ekranu systemu operacyjnego) i dostosować zalecany rozmiar do wymaganej proporcji przeciętnego użytkownika.
obrazy o pełnej szerokości
2400x1600px, jpeg, zapisane w Internecie i zoptymalizowane
w całej witrynie możesz mieć sekcje, w których musisz używać obrazów o pełnej szerokości, które obejmują cały ekran od lewej do prawej., Obszary te mogą być obrazy bohaterów, pokazy slajdów pełnoekranowe, obrazy banerów. Aby upewnić się, że obrazy o pełnej szerokości wyglądają dobrze na każdym dużym lub małym urządzeniu, zalecany rozmiar to 2400x1600px. Zauważ, że urządzenia mają inny współczynnik niż ten, który fotografujesz i możliwe jest, że Twoje obrazy zostaną przycięte podczas oglądania w Internecie. Jako zalecenie staraj się wykonywać szersze ujęcia niż zwykle dla treści internetowych, aby uniknąć przycinania ważnych treści obrazu.,
wewnątrz obrazów treści
pozioma – maksymalna szerokość 1500px, jpeg, zapisana dla stron internetowych i zoptymalizowana
pionowa – maksymalna szerokość 1000px, jpeg, zapisana dla stron internetowych i zoptymalizowane
na stronach Twojej witryny będą sekcje składające się z obrazów, obszarów tekstowych, przycisków wywołania akcji itp. Zasadniczo są to sekcje, w których obrazy są częścią zawartości wewnętrznej (odczytywane jako „nie na pełną szerokość”)., W takich przypadkach, o ile zalecany rozmiar nie jest określony tak, jak niektóre z naszych bloków Flothemes, możesz postępować zgodnie z powyższymi zaleceniami dla obrazów poziomych i pionowych. Na podstawie twojego stosunku wysokość dostosuje się odpowiednio podczas zapisywania zdjęć.,Pokaż galerie: upewnij się, że wszystkie mają tę samą wysokość zalecaną 1500px, niezależnie od tego, czy są poziome czy pionowe
obrazy postów na blogu
- jeśli przygotowujesz zdjęcia do przesłania wewnątrz post na blogu, upewnij się, że wszystkie są tej samej szerokości, zalecane 1500px, niezależnie od tego, czy są poziome czy pionowe
wyróżnione obrazy
istnieją 3 typy wyróżnionych obrazów: portret, krajobraz i obrazy bohaterów., Rozmiar obrazów pionowych i poziomych jest taki sam jak w przypadku obrazów wewnątrz zawartości, podczas gdy rozmiar zalecany dla obrazów bohaterów jest zakryty pod obrazami o pełnej szerokości. Kluczem do posiadania dobrych wyróżnionych obrazów jest spójność. Jeśli chcesz użyć wszystkich portretów, upewnij się, że są tego samego rozmiaru, to samo dotyczy obrazów krajobrazowych i bohaterów. Jeśli używasz siatki murowanej, powyższy rozmiar nie jest tak istotny, upewnij się, że obrazy mają szerokość co najmniej 1000px.,
Jeśli masz problemy z wymiarem obrazu, zapoznaj się z opcjami rozmiaru obrazu w Ustawieniach Flothemes, aby upewnić się, że są one poprawnie skonfigurowane.
sposoby, aby znaleźć odpowiednie rozmiary obrazów dla Twojej strony
może być możliwe, że zalecane rozmiary powyżej nie będą pasować do Twoich potrzeb ze względu na konkretny układ. Jeśli nie masz pewności co do właściwego wymiaru obrazu, na szczęście istnieje kilka sposobów, które mogą pomóc w łatwym sprawdzeniu obrazów witryny i określeniu prawidłowego rozmiaru potrzebnego dla każdego elementu w witrynie.,
ważną rzeczą do zapamiętania jest to, że w przypadku urządzeń retina musisz podwoić gęstość pikseli obrazu. Oznacza to, że potrzebujesz obrazów dwukrotnie większych dla urządzeń do siatkówki, aby wyglądały ładnie i wyraziście. Po znalezieniu odpowiednich rozmiarów obrazów dla każdej sekcji w witrynie będziesz chciał podwoić te rozmiary, a dopiero potem wyeksportować je i przesłać do witryny.
a., Korzystanie z rozszerzenia Image Size Info
pierwszą metodą znajdowania rozmiarów obrazów dla witryny jest użycie rozszerzenia Image Size Info dla Chrome (jeśli nie używasz Chrome na komputerze, zalecamy używanie go podczas tworzenia witryny). Po zainstalowaniu rozszerzenia To narzędzie pozwoli Ci poznać rozmiary obrazów każdego elementu obrazu w Twojej witrynie.
Sprawdź obrazy na swojej stronie, Rób notatki, a następnie dzięki tej wiedzy będziesz w stanie dostosować swoje zdjęcia dokładnie tak, aby pasowały do przestrzeni, które są przeznaczone w projekcie motywu., Pamiętaj tylko, że dzięki ekranom retina Twoje obrazy muszą być dwa razy większe niż przewidziana przestrzeń. Więc jeśli masz miejsce na obraz 750x500px, dla siatkówki powinno być 1500x1000px podczas przesyłania do WordPress (lub innej platformy).
na przykład: gdy sprawdzamy obraz z tym rozszerzeniem, jest on wyświetlany w rozdzielczości 780x520px, ale jego rzeczywisty rozmiar to 1560x1040px. Dzieje się tak dlatego, że podczas kontroli obrazu używamy ekranu siatkówki. W takim przypadku możesz użyć rozmiarów wymiarów, aby wybrać rozmiar obrazu.,
na urządzeniu nie-retina wyświetlane rozmiary i wymiary pozostaną takie same. W takim przypadku podwoić Liczby i przesłać obrazy w tym rozmiarze.
głównym ograniczeniem tego narzędzia jest to, że nie może sprawdzać obrazów tła pod kątem rozmiaru. W wielu motywach obrazy tła są używane zamiast elementów HTML obrazów, ponieważ są bardziej elastyczne podczas wyświetlania obrazów. Jeśli nie możesz sprawdzić obrazów, ponieważ są to obrazy tła, możesz użyć następnej metody, aby przejrzeć rozmiary obrazów w witrynie.
b., Korzystając z narzędzia Inspektor
w przeglądarkach Chrome i Safari Możesz również użyć narzędzia Inspektor programistów, aby znaleźć rozmiary obrazów w witrynie. Zasada będzie taka sama jak wcześniej, sprawdź różne elementy na stronie i zanotuj rozmiary. Podwój rozmiary obrazów dla urządzeń retina, a następnie prześlij je do WordPress, gdy zostaną zoptymalizowane pod kątem stron internetowych i poprawnie zatytułowane pod kątem SEO.
Ograniczenia tej metody polegają na tym, że jeśli witryna używa elementów responsywnych ustawionych w wartościach REM, obrazy mogą być zmniejszane podczas korzystania z inspektora w tym samym oknie., Jeśli witryna korzysta również z elementów responsywnych, będą one większe na większych ekranach i mniejsze na innych. Podczas sprawdzania witryny najlepiej jest używać większego ekranu, aby uzyskać najbardziej dokładny rozmiar obrazu. W każdym razie korzystanie z tej metody da ci dobre wskazanie rozmiarów Twojej witryny i pozwoli ci podejść do dodawania obrazów do witryny z większą starannością.
Chrome
Chrome ma wbudowane narzędzia programistyczne, dlatego jest najpopularniejszą przeglądarką w sieci dla programistów i projektantów., Poniższy film wyjaśnia, w jaki sposób można sprawdzić obrazy na swojej stronie, aby dowiedzieć się ich rozmiarów:
Firefox
Firefox, podobnie jak chrome, mają wbudowane narzędzie Inspektora, które pozwala sprawdzić obrazy dla Twojej witryny.
Safari
Jeśli używasz Safari, możesz użyć narzędzia Inspektor, aby zobaczyć rozmiary obrazów. Zapoznaj się z poniższym przewodnikiem dotyczącym włączania narzędzi programistycznych.,
teraz możesz przejść do różnych sekcji w swojej witrynie i przygotować wymiary obrazu.
w przypadku galerii będziesz chciał spojrzeć na wysokość obrazów, ponieważ są one ogólnie ograniczone wysokością (więc szerokość może być ustawiona na auto).
w przypadku postów na blogu należy zwrócić uwagę na szerokość obrazów, ponieważ są one ograniczone szerokością (wysokość może być automatyczna).,
w przypadku pozostałych elementów Witryny należy użyć metody opisanej powyżej, aby uzyskać prawidłowe wymiary i przesłać je w optymalnych wymiarach dla witryny.
teraz, gdy wiesz, jakich wymiarów potrzebujesz dla wszystkich elementów na swojej stronie, wyjaśnimy, jak zoptymalizować wszystkie obrazy pod kątem rozmiaru, czyli rozmiaru danych. Rozmiar plików obrazów jest również bardzo ważny dla sieci. Przesyłanie nadętych i ciężkich obrazów na swojej stronie internetowej obciąży zasoby serwera, spowolni Twoją witrynę i w efekcie stworzy negatywne wrażenia użytkownika.,
Optymalizacja i zapisywanie obrazów w Internecie
podczas optymalizacji i zapisywania obrazów w Internecie należy wziąć pod uwagę wiele rzeczy. Powinieneś rozważyć, jakiego typu pliku użyć, JPG, PNG lub GIF w zależności od celu. Będziesz chciał poprawnie oznaczyć swoje obrazy do celów SEO i będziesz chciał je zapisać w odpowiednim formacie kolorów(sRGB dla sieci).
w zależności od przeznaczenia, musisz zapisać obrazy w jednym z następujących formatów .jpg,gif, lub .png. JPG będzie najczęstszym formatem podczas zapisywania obrazów na stronie portfolio, będą również najlżejsze pod względem rozmiaru.,
w przypadku nazw plików upewnij się, że są one odpowiednie dla każdego obrazu lub posta na blogu. Używaj tylko liter, cyfr, podkreślników i myślników. Staraj się używać tylko angielskich liter. Znaki z innych języków, znaki zapytania, spacje, znaki procentowe mogą być przesyłane nieprawidłowo lub powodować nieoczekiwane zachowanie w galeriach lub postach na blogu.
na przykład, jeśli właśnie zrobiłeś ślub boho w Biltmore Santa Barbara, Oznacz obrazy, boho-wedding-biltmore-santa-barbara_0001.jpg będzie to znacznie bardziej przyjazne dla SEO i może zapewnić lepszą pozycję w rankingu Twojej witryny.,
Optymalizacja obrazów w Lightroom
spójrzmy prawdzie w oczy, istnieje wiele różnych ustawień do wyboru i nieskończone kombinacje liczb do wprowadzenia. Jeśli jednak znasz już format obrazu i wymagane wymiary obrazu pliku, jest to o wiele łatwiejsze.
w programie Lightroom możesz przejść do okna dialogowego eksportu na 3 sposoby:
Podświetl i wyeksportuj
możesz po prostu podświetlić / wybrać dowolne zdjęcie z biblioteki Lightroom i kliknąć je prawym przyciskiem myszy. Z menu podręcznego wybierz opcję Eksportuj.,
plik i eksport
drugi sposób to przejście do pliku -> eksport
za pomocą skrótu klawiaturowego
trzeci i najszybszy sposób to użycie klawiatury Skrót:
Shift + Command + E (⇧+⌘+E)
nie ma znaczenia, jak się tam dostaniesz. Każdy z nich zadziała, więc wybierz najłatwiejszy do zapamiętania.,
okno dialogowe eksportu programu Lightroom
teraz, gdy wiesz, jak eksportować obrazy do Internetu, omówimy sekcje 4 i różne opcje do wyboru w oknie dialogowym eksportu programu Lightroom, aby umożliwić eksport zoptymalizowanych obrazów do Internetu.
1. Nazwa pliku
każdy eksport może mieć własne ustawienia zmiany nazwy. Jeśli zostanie zachowana opcja domyślna, obrazy będą miały taką samą nazwę jak oryginalne pliki i zostaną zapisane w FORMACIE JPEG., Zalecamy jednak zaznaczenie pola” Zmień nazwę na” i wybranie jednego z wielu szablonów zmiany nazw, które Lightroom oferuje, aby dostosować wyeksportowane obrazy. W nazwach plików zmieniliśmy nazwy plików obrazów Na „Custom Name – Sequence”, gdzie niestandardowy tekst jest ściśle powiązany z naszym tytułem posta na blogu lub słowami kluczowymi na blogu.
2. W Ustawieniach pliku
upewnij się, że Format Obrazu jest ustawiony na JPEG. Jest to najbardziej przyjazna dla sieci opcja. Twoja jakość nie powinna być mniejsza niż 65., Normalnie ustawiamy na 75. Przestrzeń kolorów musi być sRGB. Jest to przestrzeń kolorów używana przez sieć, więc będzie renderować najlepiej. Nie zaznaczaj pola ” Ogranicz Rozmiar Pliku do:”. Zaznaczenie tego pola znacząco obniży jakość pliku.
podsumowując, podczas zapisywania obrazów użyj następujących ustawień:
- jakość 75%
- .format jpeg (.png dla logo i ikon)
- kolory sRGB
3. Zmiana rozmiaru obrazu
zaznacz pole Zmień rozmiar i wybierz szerokość & wysokość., W polu W: H: określ W (Szerokość w pikselach) na wymaganą wartość (1500px dla postów na blogu i 2880 dla pokazów slajdów). Pozostawiając wartość w H (Wysokość) pustą zostanie ustawiona na automatyczny rozmiar.
W przypadku galerii możesz zostawić W jako puste, a ustawić H (Wysokość) na 1500px, powinno to być optymalne dla większości tematów.
powyższe rozmiary są już zoptymalizowane dla urządzeń siatkówki.
4. Wyjście Wyostrzanie
zaznacz pole obok „Wyostrz dla” i wybierz wartość „wysoki”.
Możesz teraz eksportować obrazy i śledzić ten proces w dowolnym momencie eksportowania obrazów.,
ustawienia jakości obrazu
w wymarzonym świecie fotografa zawsze eksportujemy zdjęcia w maksymalnej jakości. W rzeczywistości dowiadujemy się, że eksport o maksymalnej jakości nie jest wymagany. W rozmiarach internetowych różnice w jakości są często trudne do zauważenia, a to oznacza, że możemy nieznacznie zmniejszyć jakość, znacznie zmniejszając rozmiar pliku.
dopóki obrazy nie są miękkie, twoi klienci nie będą wiedzieć, jaka jest różnica między tym, co zrobiłeś, a obrazem wyświetlanym w Twojej witrynie.
dotyczy to również kolorów obrazów., Każdy ekran jest skalibrowany inaczej, więc martwienie się o małe różnice kolorów między obrazem w przeglądarce i w wybranym narzędziu do edycji jest stratą czasu, chyba że pogorszy to jakość obrazu.
na górnym końcu skali jakości występują malejące zwroty. Różnica w postrzeganej jakości między ustawieniem jakości 75% A 100% jest trudna do zauważenia, ale znacznie zwiększa rozmiar pliku.
biorąc pod uwagę powyższe wyniki, wybierając eksport o jakości 65-75., Zapewnia właściwą równowagę między jakością i optymalnym rozmiarem pliku obrazu.
teraz twoja kolej, aby zmienić nazwy plików, wyeksportować je do sieci, zapisać je do sieci i będziesz miał naprawdę dobrze zoptymalizowane obrazy do sieci.
dodatkowy krok: zoptymalizuj obrazy przed przesłaniem ich na swoją stronę
istnieje jeden ostatni krok, który może pomóc ci drastycznie usunąć nadmiar danych z obrazów i zmniejszyć rozmiar pliku – mówimy o narzędziach takich jak JPEGmini lub TinyJPG.
te narzędzia mogą pomóc w dalszej optymalizacji obrazów., Wybierz jeden i przeprowadź przez niego swoje obrazy:
- JPEGmini – ta aplikacja pozwala skompresować obrazy i zmniejszyć ich Rozmiar pliku bez widocznego wpływu na jakość obrazu. Jeśli masz wersję Pro, istnieje rozszerzenie dla Lightroom, które zrobi to automatycznie podczas eksportu – wysoce zalecane narzędzie dla każdego fotografa.
- TinyJPG lub TinyPNG – możesz uruchamiać swoje obrazy za pomocą tinyJPG lub tinyPNG, aby skompresować swoje obrazy. Istnieją jednak 2 ograniczenia., W bezpłatnej wersji tego narzędzia można kompresować tylko 20 obrazów na raz, a Rozmiar Pliku na obrazy powinien wynosić poniżej 5 MB.
będzie to ostatni krok w tworzeniu szybkich obrazów zoptymalizowanych pod kątem stron internetowych, aby Twoja witryna była szybka, a obrazy wyglądały świetnie!
Dowiedz się więcej, czytając ten obszerny przewodnik na temat optymalizacji obrazów dla witryny WordPress.
Image SEO
teraz, gdy masz swoje obrazy wielkości, zoptymalizowane i przesłane do witryny – teraz będziesz chciał dodać znaczniki ALT! Jest to ostatni krok w tworzeniu zoptymalizowanych obrazów do celów SEO., Znacznik ALT jest tym, czego Wyszukiwarki używają do odczytu obrazów. Bez nich twoje obrazy praktycznie nie istnieją w Internecie.
na szczęście dzięki WordPressowi możesz przejść do swojej biblioteki multimediów po przesłaniu i oznaczyć każdy obraz., Jeden wielki plugin, który pozwoli Ci to zrobić szybko jest WP meta SEO, po dodaniu można przejść do WP meta SEO > informacje o obrazie i dodać znaczniki ALT do dowolnych obrazów, gdzie nie jest obecny, po zakończeniu wtyczki można de-aktywować:
istnieje również kilka wtyczek, które automatycznie dodają znaczniki alt. Ranking Math jest dobrym rozwiązaniem wtyczki do tego, po prostu zainstaluj go i automatycznie doda znaczniki ALT po przesłaniu z opisu obrazu lub tytułu.,
przeczytaj ten przewodnik SEO obrazów, aby dowiedzieć się więcej wskazówek i sztuczek i upewnij się, że jak najlepiej wykorzystasz swoje obrazy w wynikach wyszukiwania.
więc to tyle. 3 kroki do optymalizacji obrazów dla Twojej witryny.
zacznij od określenia wymiarów obrazu, a następnie zapisz je poprawnie w Internecie, dodaj odpowiednie tytuły i zoptymalizuj ich rozmiar. Na koniec dodaj znaczniki alt, aby poprawić SEO za pośrednictwem WordPress (powinno być możliwe dodawanie znaczników ALT we wszystkich systemach zarządzania treścią, zapoznaj się z dokumentacją, aby dowiedzieć się, jak lub skontaktuj się z obsługą).,
znajdowanie Nieoptymalizowanych obrazów
Jeśli już przesłałeś zdjęcia na swoją stronę i chcesz wiedzieć, jak znaleźć te, które spowalniają Twoją stronę, sprawdź poniższy film. Narzędzia takie jak Gtmetrix lub Pingdom, lub za pomocą konsoli przeglądarki łatwo pozwoli Ci znaleźć obrazy, które są zbyt duże dla sieci.
Jeśli chcesz dowiedzieć się więcej o optymalizacji witryny pod kątem szybkości, sprawdź ten przydatny przewodnik.
Flothemes
Leave a Reply