Jak poprawić i zoptymalizować obrazy dla WordPress

Minęło dużo czasu, odkąd obrazy były zbyt duże, aby można je było załadować przez Internet. Dziś strony internetowe nie mogą bez nich istnieć. Mimo że prędkość Internetu znacznie wzrosła na przestrzeni lat, ważne jest, abyś dbał o zdjęcia na swoim blogu.

Tylko dlatego, że przesyłanie obrazów do Twojej witryny jest łatwe, nie oznacza to, że powinieneś to robić bez żadnych przygotowań. Niezoptymalizowane obrazy mogą w rzeczywistości zaszkodzić Twojej witrynie na wiele sposobów; od wpływu na sposób, w jaki użytkownicy myślą o Tobie, po szybkość Twojej witryny i rankingi SEO. Jeśli nadal o tym nie pomyślałeś, jesteśmy tutaj, aby pokazać Ci kilka sposobów ulepszania obrazów w WordPressie.

Jak zoptymalizować obrazy dla WordPressa, aby przyspieszyć działanie witryny i poprawić SEO?

Dlaczego powinieneś optymalizować obrazy pod WordPress? Jeśli podejmiesz wysiłek, możesz spodziewać się następujących rzeczy:

• Szybsza strona
• Lepsze SEO
• Mniejsze kopie zapasowe
• Mniejsze wykorzystanie przepustowości
• Zadowoleni użytkownicy

Powinieneś również wiedzieć, że istnieją różne etapy, na których możesz zoptymalizować obrazy. Możesz zająć się zdjęciami jeszcze przed przesłaniem ich do bloga lub możesz to zrobić po przesłaniu.

Szybko przetestuj obrazy w swojej witrynie

Zanim zaczniesz pracę nad optymalizacją, możesz szybko sprawdzić swoją witrynę pod kątem szybkości i wydajności. Korzystając z dowolnego narzędzia z listy, szybko dowiesz się, w jakim kształcie mają obrazy w Twojej witrynie.

Lubimy używać GTmetrix, który pokaże Ci nawet dokładne obrazy, które powodują wolniejsze ładowanie się Twojej witryny.

Zoptymalizuj obrazy dla WordPressa przed przesłaniem

Podczas blogowania większość ludzi nie podejmuje wszystkich niezbędnych kroków w celu optymalizacji swoich zdjęć. Zwykle ludzie po prostu robili zdjęcie aparatem lub smartfonem, ściągali je z Internetu lub tworzyli za pomocą oprogramowania komputerowego.

Nie myślą o formatach, wymiarach obrazu ani nazwach plików. Jeśli zdjęcie wygląda dobrze, zakładają po prostu, że jest gotowe do internetu. Jeśli nie sprawdzisz swoich zdjęć, zmierzasz w kierunku katastrofy.

Zmień rozmiar obrazów

Nie przesyłaj obrazów do witryny WordPress przed sprawdzeniem szerokości i wysokości każdego obrazu. Jeśli na przykład wyświetlasz obrazy w maksymalnej rozdzielczości 700px, naprawdę nie ma potrzeby przesyłania szerszego obrazu. Jeśli to zrobisz, będziesz mieć większy plik, który spowolni twoją witrynę, a wynik będzie taki sam. WordPress utworzy dodatkowy rozmiar, ale to nie jest wymówka, aby nie przygotowywać obrazów przed przesłaniem.

Zmiana rozmiaru obrazów jest szybka i łatwa. Istnieje wiele darmowych narzędzi, takich jak Microsoft Paint, które ci w tym pomogą. Możesz nawet znaleźć bezpłatne narzędzia online do zmiany rozmiaru obrazów, takie jak Easy Resize.

Wymiary obrazu będą się różnić w zależności od motywu. Jeśli nie masz pewności, którego z nich użyć, przyjrzyj się bliżej motywowi WordPress i obejrzyj zdjęcia, poszukaj dokumentacji lub poproś o pomoc.

Zmień jakość

Po zmianie wymiarów powinieneś rozważyć zmianę jakości obrazów. W zależności od oprogramowania istnieją różne sposoby modyfikowania jakości zdjęć. Na przykład zawsze popularny Photoshop umożliwia zapisywanie obrazów w Internecie. Ta opcja pozwoli Ci zapisywać obrazy w niższej jakości, ale będą one zoptymalizowane pod kątem Twojej witryny.

Ponadto, jeśli zdecydujesz się zapisać zdjęcie jako JPEG, Photoshop poprosi Cię o wybranie poziomu jakości. W takim przypadku obniżenie jakości z 12 do zaledwie 8 drastycznie zmniejszy rozmiar obrazu, podczas gdy różnica w jakości nie będzie tak duża.

Jeśli nadal nie używasz żadnego oprogramowania do zmiany jakości swoich zdjęć, możesz wypróbować darmowe narzędzie online Tiny PNG. Po prostu prześlij zdjęcie i zobacz, jaka może to zmienić.

Wybierz odpowiedni format

Nawet po zmianie rozmiaru i jakości powinieneś rozważyć zmianę formatu. Na początek, wybierając odpowiedni format, możesz usunąć kilka kilobajtów z obrazu, jeśli nie więcej.

Ogólna zasada jest bardzo prosta. Jeśli masz zdjęcie, zrób je w formacie JPEG. Jeśli masz logo, obraz wektorowy lub bardzo prostą grafikę wygenerowaną komputerowo, wybierz PNG. Jeśli masz naprawdę mały obrazek bez gradientów lub chcesz pokazać prostą animację, taką jak ta pokazana powyżej, możesz użyć GIF-a. Ogólnie obrazy PNG będą znacznie większe niż obrazy JPEG i możesz skorzystać ze zmiany formatu.

W wielu przypadkach ponowne formatowanie obrazów nie spowoduje znaczących różnic w jakości, podczas gdy można spodziewać się różnicy w rozmiarze. Następnym razem, zanim prześlesz zdjęcia PNG, zrób zdjęcie i spróbuj zapisać je jako JPEG, aby zobaczyć różnicę. Aby uzyskać bardziej szczegółowe wyjaśnienie, sprawdź różnicę między PNG, JPEG, GIF i SVG.

Zadbaj o nazwy plików

Chociaż nazwa pliku może brzmieć nieistotnie, w rzeczywistości powinieneś być tego świadomy. Nazwa pliku graficznego zawiera cenną informację dla SEO. Jeśli chcesz, aby inni mogli znaleźć Twój obraz w Google i innych wyszukiwarkach, powinieneś nadać mu odpowiednią nazwę.

Proponujemy nazwać obrazy bez spacji. Nie zapomnij dodać słów kluczowych, jeśli chcesz, aby strona i obrazek się pozycjonował. Na przykład, jeśli przesyłasz zdjęcie Ferrari California, nazwa pliku powinna brzmieć „ferrari-california.jpg”. Jeśli korzystasz z wtyczki SEO dla WordPress, wiesz już, że sprawdza ona Twoje tagi alt pod kątem słów kluczowych. Tak, to naprawdę takie ważne, aby mieć odpowiednią nazwę obrazu.

Zoptymalizuj obrazy dla WordPress po przesłaniu

Po przygotowaniu zdjęć na komputerze możesz kontynuować przesyłanie. Mamy nadzieję, że Twoje obrazy mają odpowiedni rozmiar i jakość. Upewniłeś się, że format i nazwa pliku są poprawne. Po przesłaniu WordPress poprosi Cię o dodatkowe informacje. Nie pomijaj metainformacji; uzupełnij szczegóły dotyczące swoich zdjęć, aby móc je łatwo uporządkować i przygotować się do SEO.

Tytuł, opis, tekst alternatywny i podpis

Dbając o szczegóły techniczne nie należy zapominać o pozycjonowaniu. Zawsze dodawaj tytuł i opis do swoich multimediów. Pomoże to w zarządzaniu mediami WordPress, a także przyczyni się do lepszego SEO. Nie zapomnij też o tagu alt, który będzie wyświetlany odwiedzającym, którzy nie mogą prawidłowo zobaczyć Twojego obrazu. Nie tylko będzie to pomocne dla Twoich użytkowników, ale także pomoże Ci w pozycjonowaniu. Twoja strona będzie miała lepszą pozycję w rankingu, a użytkownicy będą mogli łatwiej znaleźć Twoje nowe obrazy.

Chociaż nie będziesz potrzebować podpisów przez cały czas, pamiętaj, aby dodawać je do obrazów, które wymagają dodatkowych wyjaśnień (na przykład zrzutów ekranu).

Edytuj obrazy za pomocą WordPress

Jeśli zdasz sobie sprawę, że zdjęcie nadal wymaga dalszej edycji, powinieneś wiedzieć, że WordPress pozwala to zrobić nawet po przesłaniu pliku. Zmień obrót, przycinanie i skalowanie już przesłanych zdjęć. Możesz nawet edytować tylko miniaturę lub wszystkie inne rozmiary. Natywny edytor WordPressa jest bardzo prosty, ale można go od czasu do czasu zaoszczędzić.

Zregeneruj wszystkie miniatury

Większość poprzednich technik pomoże Ci w tworzeniu nowych plików graficznych, które nadal zamierzasz przesłać. Ale co, jeśli masz setki, jeśli nie tysiące plików, które zostały już przesłane do Twojej witryny WordPress? Nie martw się; nadal możesz optymalizować te obrazy i zmieniać ich rozmiary.

Aby szybko naprawić, możesz być zainteresowany darmową wtyczką Regenerate Thumbnails, z której korzysta ponad milion użytkowników. Jeśli chcesz mieć większą kontrolę nad obrazami, powinieneś sprawdzić niektóre z najlepszych wtyczek WordPress do optymalizacji obrazu, które pokażemy w kolejnych wierszach tego artykułu.

Korzystaj z wtyczek WordPress

Oczywiście istnieją dziesiątki wtyczek WordPress, które pomogą Ci zoptymalizować obrazy w Twojej witrynie. Przewiń w dół, aby zobaczyć najlepsze wtyczki WordPress do optymalizacji obrazów.

Lazy Załaduj obrazy w razie potrzeby

Czasami jakość zdjęć będzie znacznie ważniejsza niż ich wielkość. Dotyczy to głównie fotografów, którzy chcą, aby ich zdjęcia były na najwyższym poziomie. Nie mogą ryzykować zmniejszenia rozmiaru ani jakości plików. Nie oznacza to jednak, że powinieneś zapomnieć o optymalizacji. Aby zoptymalizować obrazy dla WordPressa w tym przypadku, powinieneś rozważyć leniwe ładowanie.

Lazy load to technika, która ładuje obrazy tylko wtedy, gdy użytkownicy ich potrzebują (przewiń do nich). Na przykład, jeśli prześlesz dwadzieścia wysokiej jakości zdjęć w jednym artykule, znacznie spowolnią one twoją witrynę. Ale jeśli leniwie wczytujesz zdjęcia, artykuł byłby błyskawiczny, a zdjęcia ładowałyby się tylko wtedy, gdy są potrzebne – w momencie, gdy użytkownik do nich dotrze.

Miej responsywne obrazy

Chociaż większość motywów WordPress jest responsywnych, niekoniecznie oznacza to, że Twoje obrazy również są responsywne. Ponieważ nie chcesz, aby duży obraz ładował się na małym ekranie, musisz zarejestrować dodatkowe rozmiary obrazu dla swojej witryny. Jeśli Twój motyw nie zawiera responsywnych obrazów, rozważ zatrudnienie specjalisty — nie jest to tak proste, jak mogłoby się wydawać.

Optymalizuj obrazy pod kątem mediów społecznościowych

Jeśli chcesz mieć pewność, że Twoje obrazy będą dobrze wyglądać w mediach społecznościowych, będziesz musiał zrobić dodatkowy krok i zoptymalizować metatagi oraz znaczniki schematu.

Jeśli używasz wtyczki SEO, takiej jak Yoast, nie zapomnij sprawdzić ustawień. Na przykład Yoast pozwoli Ci skonfigurować kilka rzeczy związanych z mediami społecznościowymi. Przejdź więc do SEO -> Społeczności i wprowadź informacje na Facebooku, Twitterze, Google+ i Pinterest.

Jeśli chcesz więcej i chcesz zoptymalizować obrazy dla dodatkowych witryn mediów społecznościowych, sprawdź wtyczkę WPSSO – Accurate Meta Tags + Schema Markup for Social Sharing Optimization & SEO.

Zmień sposób, w jaki WordPress kompresuje obrazy JPEG

Jeśli przesyłasz kilka obrazów JPEG na swoją witrynę WordPress, być może zauważyłeś, że tracą oryginalną jakość. Jeśli zastanawiałeś się, czy to wina WordPressa, teraz masz odpowiedź – tak, to prawda!

Po przesłaniu obrazu w formacie JPEG WordPress automatycznie zmienia kompresję i decyduje, że obraz ma stracić na jakości. Mówiąc dokładniej, WP używa kompresji 90% w plikach JPG. To świetnie, jeśli Twoje zdjęcia mają być używane tylko jako miniatury postów lub pokazywane w poście, ale jeśli przesyłasz swoje zdjęcia, chcesz, aby były jak najlepsze, prawda?

Na szczęście, aby to zmienić, potrzebujesz tylko jednej linii kodu.

Zatrzymaj kompresję obrazów JPEG:

Jeśli nie chcesz, aby Twoje obrazy JPEG były kompresowane, po prostu skopiuj i wklej następujący kod do pliku functions.php:

 add_filter('jpeg_quality', function($arg){return 100;});

Nie zapomnij zapisać zmian i możesz przesłać nowe obrazy.

Z drugiej strony obrazy mogą nie być dla ciebie tak ważne. Możesz więc chcieć, aby były jeszcze bardziej skompresowane i zaoszczędzić czas podczas ładowania witryny. Jeśli zmienisz ostatnią liczbę w tym wierszu kodu, zmienisz jakość nowo przesyłanych obrazów.

Kompresuj obrazy JPEG jeszcze bardziej:

Im niższa liczba, tym więcej zdjęć zostanie skompresowanych. Na przykład, aby jeszcze bardziej skompresować pliki JPEG, będziesz potrzebować tego kodu:

 add_filter('jpeg_quality', function($arg){return 80;});

Nie zapomnij; domyślny poziom kompresji to 90.

Najpopularniejsze wtyczki do optymalizacji obrazu dla WordPress

Na początku tego artykułu rozmawialiśmy o tym, jak zoptymalizować obrazy dla WordPressa, aby przyspieszyć działanie witryny i poprawić SEO. Jak widać, istnieje kilka różnych metod, z których możesz skorzystać. Ważne jest, aby dbać o obrazy jeszcze przed przesłaniem ich do bloga. Ale kiedy zdjęcia są już dostępne w witrynie, może okazać się niemożliwe ponowne zoptymalizowanie każdego zdjęcia z osobna, a następnie ponowne ich przesłanie.

Nie martw się; nikt nie oczekuje, że to zrobisz w pierwszej kolejności. Zostań z nami w ciągu najbliższych minut, ponieważ zaraz pokażemy Ci najpopularniejsze wtyczki do optymalizacji obrazu dla WordPressa.

Aby zoptymalizować obrazy, wystarczy wybrać wtyczkę z listy. Będziesz musiał go skonfigurować i wybrać rzeczy, które wtyczka zrobi za Ciebie. Następnie będziesz mógł się zrelaksować i delegować pracę do wybranej wtyczki, a jednocześnie możesz rozpocząć porządkowanie plików multimedialnych.

Poniższe wtyczki pomogą Ci skompresować obrazy w dowolnej posiadanej witrynie WordPress. Sprawią, że strona będzie się ładować szybciej i ostatecznie pomogą Ci poprawić SEO.

Wtyczka WP Smush

CENA: Bezpłatnie

Z ponad 700 000 aktywnych instalacji, WP Smush musi być jedną z najlepszych wtyczek do optymalizacji obrazu dla WordPress. Może szybko optymalizować obrazy przy użyciu różnych technik kompresji. Wspaniałą rzeczą w kompresowaniu obrazów za pomocą WP Smush jest to, że obrazy nie tracą na jakości. Nie wierzysz nam? Przetestuj wtyczkę.

Kiedy rozmawialiśmy o przygotowywaniu zdjęć dla WordPressa, wspomnieliśmy, że zmiana rozmiaru jest kluczową częścią procesu optymalizacji. Dzięki tej wtyczce nie musisz się o to martwić, ponieważ WP Smush pozwala ustawić maksymalne wymiary. Po wykonaniu tej czynności wszystkie większe obrazy zostaną automatycznie zmniejszone przed dodaniem ich do biblioteki.

Ta fantastyczna wtyczka może współpracować z plikami JPEG, GIF i PNG. Działa ze wszystkimi twoimi katalogami, automatycznie zajmuje się załącznikami, a nawet działa na wielu stronach. Możesz ręcznie operować na każdym obrazie lub zbiorczo edytować pięćdziesiąt z nich. Jeśli chcesz jeszcze lepszych wyników i więcej opcji, sprawdź WP Smush PRO.

Wtyczka Optymalizatora obrazu EWWW

CENA: Bezpłatnie

Pod śmieszną nazwą kryje się jedna z najpopularniejszych wtyczek do optymalizacji obrazu dla WordPressa. Podobnie jak wcześniej wspomniany, EWWW Image Optimizer może kompresować obrazy bez wpływu na ich jakość. Kiedy myślisz o tym, że wtyczka może przyspieszyć twoją stronę w kilka sekund, będziesz już na dobrej drodze do jej pobrania. Gdy to zrobisz, będziesz mógł zbiorczo zoptymalizować obrazy, a galerie takie jak GRAND FlaGallery, NextCellent i NextGEN otrzymają nawet własne strony Optymalizacji zbiorczej.

Wszystkie obrazy korzystające z klasy WP_Image_Editor w WordPressie zostaną automatycznie zoptymalizowane , podczas gdy możesz ręcznie pracować magią na wszystkich innych. Podoba nam się, że możesz wybrać foldery, które chcesz zoptymalizować. Aby uzyskać więcej informacji na ten temat i które wtyczki używają tej klasy, otwórz oficjalną stronę EWWW Image Optimizer w repozytorium WordPress.

Kompresuj wtyczkę obrazów JPEG i PNG

CENA: Bezpłatnie

Jeśli urocza mała panda z logo WordPress nie sprawia, że ​​chcesz dowiedzieć się więcej o tej wtyczce, nie wiemy, co to zrobi. A jeśli panda wygląda znajomo, to dlatego, że jest to ta sama, która pomaga kompresować obrazy na stronie TinyPNG. Tak, wydaje się, że zwierzę jest bardziej wszechstronne niż początkowo sądziliśmy. Ale skupmy się na wtyczce.

Jeśli użyjesz tej wtyczki, Panda automatycznie zoptymalizuje Twoje obrazy. Za każdym razem, gdy prześlesz nowy, wtyczka przejmie kontrolę i wykona swoją pracę. Mimo to możesz zoptymalizować pojedyncze zdjęcia lub zrobić to zbiorczo, przechodząc do biblioteki multimediów.

Kompresuj obrazy JPEG i PNG obsługują nawet animowane pliki PNG, działa idealnie na wielu witrynach, jest kompatybilny z WooComerce i nie będzie miał problemów z WP Offload S3.

Wspaniałą rzeczą we wtyczce jest to, że pozwala ustawić maksymalną szerokość i wysokość atrybutów dla wszystkich obrazów. Jeśli martwisz się, co zrobi z metadanymi, nie martw się; panda zachowa wszystkie informacje w nienaruszonym stanie.

Nie ma ograniczeń rozmiaru plików, możesz ustawić widżet pulpitu nawigacyjnego, a nawet działa z aplikacją mobilną WordPress. Ponieważ to wszystko, Compress JPEG & PNG images ma ponad 100 000 aktywnych instalacji i zasługuje na miejsce na liście najlepszych wtyczek do optymalizacji obrazu dla WordPressa.

Wtyczka Imsanity

CENA: Bezpłatnie

Chociaż obraz okładki tej wtyczki może Cię odstraszyć, poświęć chwilę i spójrz na wszystkie funkcje Imsanity. Och, nawet nazwa wtyczki brzmi obłędnie, prawda? Gdy już będziesz w porządku z nazwą wtyczki, zobaczysz, że ma ona wiele do zaoferowania.

Imsanity może automatycznie skalować obrazy, umożliwia ustawienie maksymalnych wymiarów, a nawet oferuje opcję masowej zmiany rozmiaru. Jest to ważne, jeśli masz już na swoim blogu setki zdjęć, które wymagają optymalizacji.

Ta darmowa wtyczka jest świetną opcją, jeśli nie chcesz zbyt często męczyć się z ustawieniami wtyczki. Wystarczy zainstalować i aktywować Imsanity, ustawić kilka opcji i możesz o tym zapomnieć; będzie zarządzać własnym sposobem na optymalizację obrazu.

Bardzo podobała nam się opcja, która pozwala konwertować obrazy BMP na JPG. Na wypadek, gdybyś miał dużo plików BMP, które omyłkowo przesłałeś jakiś czas temu, będzie to ratunek.

Wtyczka ShortPixel Image Optimizer

CENA: Bezpłatnie

Z ponad 30 000 aktywnych instalacji, ShortPixel Image jest nadal jedną z najpopularniejszych wtyczek do optymalizacji obrazu dla WordPress. Wtyczka jest pełna funkcji i będzie obowiązkowa dla witryn, które mają wiele obrazów do optymalizacji.

ShortPixel Image Optimizer nie tylko zoptymalizuje dla Ciebie dokumenty JPG, PNG, GIF i PDF, ale także pozwoli Ci przekonwertować dowolny obraz JPEG, PNG lub GIF na WebP . Wtyczka działa dobrze z innymi wtyczkami galerii i nie ma znaczenia, czy Twoja witryna korzysta z protokołu HTTP czy HTTPS. Umożliwi to usunięcie danych EXIF ​​ze zdjęć (coś, co fotografowie pokochają).

Wtyczka rozpoznaje obrazy, które już zoptymalizowała, więc w razie potrzeby pominie je. Możesz zezwolić lub nie zezwolić na automatyczną optymalizację i zrobić wiele, wiele więcej dzięki tej fantastycznej wtyczce. Sprawdź oficjalną stronę repozytorium, aby zobaczyć wszystkie funkcje.

Optimus – Optymalizator obrazu WordPress

CENA: Bezpłatnie

Podobnie jak wspomniana wcześniej wtyczka, Optimus zoptymalizuje twoje obrazy pod WordPress i zrobi to bez wpływu na jakość twoich zdjęć. Możesz pozwolić wtyczce działać automatycznie lub wyłączyć tę opcję i optymalizować obrazy tylko w razie potrzeby.

Optimus działa na wielu witrynach, nie jest obcy witrynom e-commerce WordPress i jest całkowicie zoptymalizowany pod kątem aplikacji mobilnych WordPress i programu Windows Live Writer. Przyspieszy to działanie witryny bez konieczności dotykania wiersza kodu. Wtyczka oferuje znacznie więcej, ale będziesz musiał wybrać wersję premium. Aby zobaczyć więcej, przejdź do oficjalnej strony w repozytorium wtyczek WordPress.

Dodaj leniwe ładowanie do swoich filmów i obrazów w WordPress

Gdy zaczniesz dodawać dużo materiałów wideo i graficznych do swojej witryny, oczywiste jest, że zacznie się ona ładować wolniej. Bez względu na to, skąd pochodzą, filmy i duże obrazy będą stanowić duży ciężar w Twojej witrynie i sprawią, że odwiedzający będą czekać znacznie dłużej, niż jest to konieczne, aby załadować całą zawartość. W przypadku WordPressa nie powinno to być wielkim problemem, a oto jak możesz łatwo naprawić sytuację.

Jeśli znasz się na PHP, istnieje świetny artykuł o dodawaniu leniwego ładowania obrazów i nieskończonego przewijania napisany przez naszych kolegów w Elegant Themes.

Jeśli nie, w kilku następnych wierszach wymienimy niektóre z najpopularniejszych wtyczek z leniwym ładowaniem, które przyspieszą ładowanie Twojej witryny . I nie będziesz musiał wiele robić, tylko zainstalować wtyczkę i skonfigurować ją w kilku szybkich krokach.

Lazy Load for Videos

CENA: Bezpłatnie

Jeśli masz dużo filmów z YouTube i Vimeo, powinieneś rozważyć zainstalowanie tej wtyczki. Po skonfigurowaniu wtyczka umieści obraz na Twoim filmie, dzięki czemu Twoja witryna będzie się ładować znacznie szybciej. Gdy odwiedzający przewinie do filmu, ten obraz zostanie wyświetlony z przyciskiem „odtwórz”. Po kliknięciu wideo zacznie się ładować i odtwarzać. Proste demo można obejrzeć na stronie dewelopera.

WP YouTube Lyte

CENA: Bezpłatnie

Ta wtyczka wykona swoją pracę w szybki i łatwy sposób. Po zainstalowaniu wystarczy dodać link do swojego filmu na Youtube lub użyć skrótu, aby go dodać. Możesz wybrać między dodaniem normalnego wideo, listy odtwarzania lub tylko audio z wybranego wideo. Następnie Twoje filmy z YouTube otrzymają obraz, który umożliwi leniwe ładowanie. Wystarczy kliknąć obraz, aby rozpocząć odtwarzanie wideo lub audio.
Zobacz demo na stronie dewelopera.

a3 Leniwe obciążenie

CENA: Bezpłatnie

Ten jest poświęcony Twojej witrynie mobilnej. Jeśli masz dużo zdjęć i/lub filmów, które chcesz pokazać odwiedzającym na urządzeniach mobilnych, powinieneś zajrzeć do a3 Lazy Load. Umożliwi to dodanie leniwego ładowania do obrazów i filmów, a wtyczka pozwoli nawet wybrać efekty przejścia, które będą wyświetlane użytkownikom podczas przewijania ładowanej treści.

W obszarze administracyjnym możesz łatwo włączać i wyłączać treści, które chcesz leniwie ładować. W przypadku osób włączonych treść zostanie załadowana tylko w momencie, gdy użytkownik przewinie do tej części treści.
Jest ładnie pokazane demo, które zawiera 1000 obrazów – każdy jest ładowany dopiero po przewinięciu do niego. Ponieważ ta wtyczka również jest leniwym ładowaniem filmów, dostępna jest demonstracja wideo, którą można zobaczyć, klikając powyższy link.

BJ leniwy ładunek

CENA: Bezpłatnie

Jeśli nie potrzebujesz obsługi filmów i chcesz, aby Twoje obrazy ładowały się tylko leniwie, powinieneś sprawdzić tę wtyczkę WP. Po zainstalowaniu i skonfigurowaniu zastąpi Twoje obrazy, miniatury, zdjęcia Gravatara, a nawet ramki iframe symbolem zastępczym. Podobnie jak wcześniej wspomniana wtyczka, załaduje zawartość dopiero po wejściu do niej użytkownika.

Niezależnie od tego, czy chcesz leniwie ładować obrazy, czy filmy, jedna z wyżej wymienionych wtyczek pomoże Ci w ciągu sekundy. Wszystkie są bezpłatne, więc nie ma wymówki, aby nie wypróbować przynajmniej jednej z wtyczek i zobaczyć, ile to wytrzyma. Oczywiście istnieje wiele innych wtyczek o tej samej funkcji i możesz je przeglądać i wypróbowywać.

Wyświetlaj obrazy przed i po w atrakcyjny sposób

Jesteśmy pewni, że widziałeś już wiele przykładów zdjęć przed/po. Nie wiem jak wy, ale pierwszą rzeczą, o której myślimy, gdy widzimy frazę „przed i po” jest program treningu fitness, w którym ludzie pokazują swoje ciała przed i po programie treningowym.

Jeśli się nad tym zastanowić, większość stron internetowych stosuje proste podejście do pokazania różnic – biorą oba obrazy i umieszczają je jeden obok drugiego lub nawet jeden nad drugim. Jeśli chcesz tego samego wyniku, nie czytałbyś tego artykułu, ponieważ już wiesz, jak to zrobić.

Co by było, gdybyśmy ci powiedzieli, że istnieje oszałamiający wizualnie sposób na rozwiązanie tego problemu przed/po i jest on w zasięgu twojej ręki? Cóż, jest i po konfiguracji pochwalisz programistów, ponieważ efekt końcowy jest naprawdę fajny.

Dwadzieścia Dwadzieścia

CENA: Bezpłatnie

Twenty Twenty to nazwa tej niesamowitej wtyczki, którą możesz pobrać za darmo w repozytorium wtyczek WordPress.

Wtyczka pozwoli Ci umieścić jeden obraz nad drugim i pozwoli Ci bawić się suwakiem, dzięki czemu możesz ukryć / odsłonić obraz. Proszę, zobacz demo, a zobaczysz, o czym mówimy.

OK, teraz, gdy jesteś uzależniony od tej małej wtyczki, zobaczmy, jak stworzyć ten oszałamiający efekt. Chociaż odtworzenie efektu demonstracyjnego jest stosunkowo łatwe, nadal będziesz musiał znać podstawowy HTML. Chodźmy:

1. Utwórz nowy post lub otwórz istniejący
2. Wstaw dwa obrazy do posta. Jeśli pracujesz w edytorze wizualnym, powinieneś zobaczyć obraz jeden nad drugim. Jeśli pracujesz w edytorze tekstu, powinieneś zobaczyć kod podobny do tego:

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
wysokość="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
wysokość="200" /></a>

3. Wpisz [twentytwenty] tag przed pierwszym obrazem
4. Po drugim wpisz tag [/twentytwenty]

Powinieneś otrzymać coś takiego w swoim edytorze tekstu:

5. Upewnij się, że Twoje zdjęcia mają ten sam rozmiar, aby osiągnąć najlepsze rezultaty
6. Wyświetl podgląd lub opublikuj swój post i ciesz się oszałamiającymi wizualnie zdjęciami przed i po

Jak tworzyć interaktywne obrazy – rysować, dodawać opisy i linki

Dziś trudno jest prowadzić serwis bez multimediów. Obrazy, filmy i muzyka są częścią praktycznie każdej strony internetowej. Przeciętny internauta jest silnie uzależniony od bodźców wizualnych, więc musisz zadbać o wizualną i interaktywną część swojej witryny. Artykuły ze zdjęciami uzyskują o 94% więcej wyświetleń niż te bez zdjęć. Wiadomo też, że multimedia na stronach internetowych mogą zwiększyć ROI z marketingu treści.

Mamy nadzieję, że nie musisz przekonywać Cię do dbania o obrazy w Twojej witrynie. Nawet jeśli nie używasz obrazów w artykułach (co powinieneś), używasz polecanych obrazów, prawda? Istnieje wiele wtyczek galerii, które mogą pomóc w zarządzaniu obrazami w witrynie WordPress, możesz mieć motywy związane z fotografią, połączyć Instagram z witryną WordPress i zrobić wiele więcej. Ale co, gdybyś chciał tworzyć bardziej interaktywne treści?

Na początek możesz chcieć dodać efekt przed zdjęciem, który pokochają Twoi użytkownicy. Nie zapomnij o wirtualnej rzeczywistości w WordPressie, która staje się coraz bardziej popularna po tym, jak Automattic wprowadził VR na WordPress.com. Ciągle czegoś brakuje. Czy możliwe jest tworzenie interaktywnych obrazów z klikalnymi częściami? Tak, to możliwe i zaraz pokażemy, jakie to łatwe i przyjemne.

Przyciągnąć uwagę

CENA: Bezpłatnie

Pierwszą rzeczą, która Ci się spodoba w tej wtyczce, jest to, że jest całkowicie darmowa! Tak jak każdą inną wtyczkę z repozytorium WordPressa, możesz ją pobrać, zainstalować i aktywować w ciągu kilku minut. Darmowa wersja pozwoli Ci pracować z jednym interaktywnym obrazem. Jeśli chcesz więcej, musisz zdecydować się na wersję PRO, ale porozmawiamy o tym później.

Wtyczka jest responsywna i nie musisz się martwić, że interaktywne obrazy będą poprawnie wyświetlane na dowolnym urządzeniu. Nie tylko obraz będzie się skalował w zależności od rozmiaru ekranu, ale będzie działał w większości nowoczesnych i starszych przeglądarek (komputerowych i mobilnych). Funkcja Draw Attention wykorzystuje elementy canvas podczas wyświetlania w nowych przeglądarkach, natomiast po wczytaniu w starszej przeglądarce powróci do map obrazów.

Cechy

Zanim przejdziemy do przykładu, który pokaże, jak potężna jest ta prosta wtyczka, zobaczmy, czego można się spodziewać po Draw Attention:

• Rysuj – po przesłaniu obrazu będziesz mieć możliwość narysowania na nim kształtów. Wybierz dowolną część obrazu, która będzie dostępna do wybrania/kliknięcia
• Kolory — dostosuj kolory, aby dopasować hotspoty do projektu witryny
• Podświetl po najechaniu – pokaż inną część obrazu, jeśli użytkownik najedzie kursorem na wybraną część
• Pokaż więcej informacji – wyświetla więcej informacji o wybranej części obrazu
• Przejdź do adresu URL – przekieruj użytkowników na dowolny adres URL, jeśli klikną zaznaczenie

Przykład – Interaktywna mapa Hawajów

Posłużymy się przykładem z witryny demonstracyjnej, aby pokazać, co dokładnie możesz zrobić za pomocą programu Przyciągnij uwagę. Zobaczmy więc, jak wygląda interaktywna mapa Hawajów utworzona za pomocą wtyczki.

Pierwszą rzeczą, którą musisz zrobić, to znaleźć obraz wysp na Hawajach. Po przejściu do opcji Zwróć uwagę -> Edytuj obraz powinieneś przesłać obraz do obszaru na prawym pasku bocznym. Po załadowaniu obrazu zabawa może się rozpocząć.

Tutaj możesz wybrać kolory dla podświetleń (kolor, obramowanie, krycie itp.), Styl „więcej informacji” (obraz, tytuł, kolor tekstu itp.). Jeśli nie chcesz ręcznie wybierać każdego koloru obrazu, możesz szybko wybrać schemat kolorów z prawego paska bocznego.

Najbardziej magiczna część dzieje się na ekranie ustawień Hotspot Areas . Tutaj otrzymasz swój obraz załadowany w pełnym rozmiarze. Wszystko, co musisz teraz zrobić, to zacząć rysować i tworzyć nowy hotspot. Możesz dodać tyle punktów, ile chcesz, co oznacza, że ​​możesz tworzyć obszerne wybory, jak chcesz. Możesz utworzyć tyle hotspotów, a każdy z nich może mieć własne ustawienia.

Tak więc w tym przykładzie powinieneś wybrać jedną z wysp. Wybierz tytuł wyspy, dodaj opis i dodatkowy obraz, który pojawi się, gdy użytkownik najedzie na hotspot (prawa część obrazu GIF pokazanego powyżej).

Powinieneś powtórzyć ten proces dla każdej wyspy, na której chcesz być interaktywny. Po przygotowaniu hotspotów po prostu skopiuj krótki kod z prawej strony. Wklej krótki kod do posta, strony, widżetu lub gdziekolwiek chcesz pokazać swoją nową interaktywną mapę i gotowe! Jeśli chcesz przekierować użytkowników na dowolną inną stronę po kliknięciu opcji, wystarczy wybrać adres URL zamiast opisu. To proste!

Wersja PRO

Podczas gdy darmowa wersja będzie idealna, jeśli potrzebujesz tylko jednego obrazu, wersja PRO pozwoli Ci mieć tyle interaktywnych obrazów na swojej stronie, ile chcesz. Chociaż będzie to najważniejsza rzecz do rozważenia, wersja PRO zapewni Ci nawet więcej niż wiele obrazów.

Funkcja Opcje układu pozwoli Ci wyświetlić więcej informacji o wybranych częściach obrazu. Na przykład możesz wyświetlić informacje w lightbox lub na prostym pasku narzędzi, który pojawi się, gdy użytkownik najedzie na wybraną część obrazu.

Dostępnych jest również dwadzieścia predefiniowanych palet kolorów, więc nie musisz ręcznie dostosowywać każdego koloru. Wersja PRO będzie kosztować 74 USD za licencję na jedną stronę, ale jeśli potrzebujesz więcej niż jednego interaktywnego obrazu, będzie to oczywiste.

Jak zregenerować dodatkowe rozmiary obrazu

Rejestrowanie nowych rozmiarów obrazów w motywie WordPress jest stosunkowo łatwe. Po tym, jak powiesz systemowi, jak duże powinny być twoje obrazy, nazwałeś je i zdecydowałeś, jak je przyciąć, możesz swobodnie rozpowszechniać obrazy w dowolnym miejscu. Ale co ze starymi obrazami?

Jeśli użyłeś jednej z przedstawionych przez nas technik, przygotowałeś murawę na nowe obrazy. Niezależnie od tego, czy używasz nowo zarejestrowanych rozmiarów obrazów dla miniaturek postów, czy zezwalasz autorom na używanie ich w postach, nowe zasady dotyczą tylko tych obrazów, które są przesyłane po wprowadzeniu zmian w pliku functions.php. Aby zmienić starsze obrazy, sugerujemy użycie wtyczki Regenerate Thumbnails.

Regeneruj miniatury:

CENA: Bezpłatnie

1. Przejdź do Wtyczki->Dodaj nowy
2. Wyszukaj „Regeneruj miniatury”
3. Zainstaluj i aktywuj wtyczkę
4. Przejdź do Narzędzia->Regen.Miniatury

Jeśli chcesz zmienić rozmiar wszystkich swoich obrazów, po prostu kliknij przycisk „Regeneruj wszystkie miniatury” i poczekaj, aż wtyczka wykona ciężką pracę.

Jeśli chcesz zobaczyć obrazy, których rozmiar zostanie zmieniony, lub jeśli chcesz zmienić rozmiar tylko niektórych obrazów, przejdź do Biblioteki multimediów, gdzie znajdziesz nową opcję w sekcji „Działania zbiorcze” i jedną obok każdego obrazu w Galeria.

Zaletą wtyczki jest to, że nie usuwa ona oryginalnych obrazów. Utworzy tylko nowe rozmiary obrazów, których możesz użyć w swoim motywie, podczas gdy oryginalne zostaną pozostawione do późniejszego użycia lub usunięcia ręcznie, jeśli zdecydujesz, że ich nie potrzebujesz.

Otóż ​​to. Ciesz się nowymi miniaturami lub wypróbuj wtyczkę Simple Image Sizes, która może zrobić to samo.

Usuń atrybuty szerokości i wysokości obrazu za pomocą jQuery

Podczas dodawania obrazów do posta WordPress system automatycznie dodaje do obrazu atrybuty wysokości i szerokości. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<skrypt>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Zapisz zmiany

I jesteś skończony! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Otwórz plik functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Zapisz zmiany
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Otwórz functions.php
2. Skopiuj i wklej następujący kod:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Zapisz zmiany

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Wniosek

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.