Ako vylepšiť obrázky v

Ako vylepšiť obrázky v


Je to už dávno, čo sa obrázky načítali cez internet príliš veľké. Webové stránky dnes bez nich nemôžu existovať. Aj keď sa rýchlosť internetu v priebehu rokov dramaticky zvýšila, je dôležité, aby ste sa vo svojom blogu starali o obrázky.

Nahranie obrázkov na vaše stránky je jednoduché, to však neznamená, že by ste to mali robiť bez akejkoľvek prípravy. Neoptimalizované obrázky môžu v skutočnosti vaše stránky poškodiť mnohými spôsobmi; od ovplyvnenia spôsobu, akým si vás návštevníci myslia, na rýchlosť vašich webových stránok a poradia SEO. Ak ste na to ešte nepremýšľali, sme tu, aby sme vám ukázali niekoľko spôsobov, ako vylepšiť obrázky vo WordPress.

V tejto príručke vám ukážeme:

  • Ako optimalizovať obrázky pre WordPress, aby ste urýchlili svoje stránky a vylepšili SEO
  • Zmeňte spôsob, akým program WordPress komprimuje obrázky JPEG
  • Najobľúbenejšie doplnky na optimalizáciu obrázkov pre WordPress
  • Pridajte lenivé načítanie svojich videí a obrázkov
  • Atraktívne zobrazujte pred a po obrázkoch
  • Ako vytvárať interaktívne obrázky – kresliť, pridávať popisy a odkazy
  • Ako regenerovať ďalšie veľkosti obrázkov
  • Odstráňte atribúty obrázka šírka a výška pomocou jQuery
  • Ako vytvoriť vlastné veľkosti obrázkov v aplikácii Media Uploader
  • Vytvorte automatickú snímku obrazovky ľubovoľného webu a zverejnite ho ako obrázok vo svojom príspevku

Contents

Ako optimalizovať obrázky pre WordPress, aby ste zrýchlili svoje stránky a vylepšili SEO

Prečo by ste mali optimalizovať obrázky pre WordPress? Ak sa budete usilovať, môžete očakávať nasledujúce:

  • Rýchlejšie miesto
  • Lepšie SEO
  • Menšie zálohy
  • Menšie využitie šírky pásma
  • Šťastnejší používatelia

Mali by ste tiež vedieť, že existujú rôzne fázy, v ktorých môžete obrázky optimalizovať. O obrázky sa môžete postarať ešte predtým, ako ich odovzdáte na blog, alebo to môžete urobiť po odovzdaní.

Rýchlo vyskúšajte obrázky na svojich stránkach

Skôr ako začnete pracovať na optimalizácii, môžete rýchlo skontrolovať rýchlosť a výkonnosť svojich stránok. Použitím niektorého z nástrojov zo zoznamu sa rýchlo dozviete, v akom tvare sú obrázky na vašom webe.

Radi používame GTmetrix ktoré vám dokonca ukážu presné obrázky, ktoré spôsobujú pomalé načítavanie vašich stránok.

Pred odovzdaním optimalizujte obrázky pre WordPress

Pri blogovaní väčšina ľudí nevykonáva všetky potrebné kroky na optimalizáciu svojich obrázkov. Zvyčajne by ľudia urobili fotografiu z fotoaparátu alebo smartfónu, stiahli si jednu z Internetu alebo ju vytvorili pomocou počítačového softvéru.

Nemyslia na formáty, rozmery obrázkov ani názvy súborov. Ak obrázok vyzerá dobre, jednoducho predpokladajú, že je pripravený na internet. Ak svoje obrázky nekontrolujete, staviate sa k katastrofe.

Zmena veľkosti obrázkov

Zmena veľkosti obrázkov

Neprenášajte obrázky na svoj web WordPress, kým nezkontrolujete šírku a výšku každého obrázka. Ak napríklad zobrazujete obrázky s maximálnou veľkosťou 700px, nie je potrebné odovzdávať širší obrázok. Ak tak urobíte, budete mať väčší súbor, vďaka ktorému bude vaša stránka pomalšia, zatiaľ čo výstup bude rovnaký. WordPress vytvorí ďalšiu veľkosť, ale to nie je ospravedlnenie nepripravovať obrázky pred odovzdaním.

Zmena veľkosti obrázkov je rýchla a ľahká. Existuje veľa bezplatných nástrojov, ako je Microsoft Paint, ktoré vám s tým pomôžu. Môžete dokonca nájsť bezplatné online nástroje na zmenu veľkosti obrázkov, ako sú Ľahká zmena veľkosti.

Rozmery obrázka sa budú líšiť od témy k téme. Ak si nie ste istí, ktorý z nich by ste mali použiť, prečítajte si bližšie tému WordPress a pozrite si obrázky, vyhľadajte dokumentáciu alebo požiadajte o pomoc so žiadosťou o pomoc..

Zmeňte kvalitu

Po zmene rozmerov by ste mali zvážiť zmenu kvality obrázkov. V závislosti od softvéru existujú rôzne spôsoby úpravy kvality obrázkov. Napríklad vždy populárny Photoshop vám umožňuje ukladať obrázky na web. Táto možnosť vám umožní ukladať obrázky v nižšej kvalite, ale budú optimalizované pre vaše stránky.

Ak sa rozhodnete obrázok uložiť aj vo formáte JPEG, Photoshop vás požiada o výber úrovne kvality. V tomto prípade zníženie kvality z 12 na iba 8 dramaticky zmenší veľkosť obrázka, zatiaľ čo rozdiel v kvalite nebude taký veľký.

Ak stále nepoužívate žiadny softvér na zmenu kvality svojich obrázkov, môžete vyskúšať zadarmo online Tiny PNG nástrojom. Stačí nahrať obrázok a zistiť, aký rozdiel to môže mať.

Vyberte správny formát

Aj po zmene veľkosti a kvality by ste mali zvážiť zmenu formátu. Pre začiatočníkov stačí vybrať správny formát a z obrázku môžete vziať niekoľko kilobajtov, ak nie viac.

Obrazové formáty

Všeobecné pravidlo je veľmi jednoduché. Ak máte fotografiu, urobte z nej JPEG. Ak máte logo, vektorový obrázok alebo veľmi jednoduchú grafiku generovanú počítačom, choďte s PNG. Ak máte skutočne malý obrázok bez prechodov alebo ak chcete zobraziť jednoduchú animáciu, ako je tá uvedená vyššie, môžete použiť GIF. Vo všeobecnosti budú obrázky PNG oveľa väčšie ako obrázky vo formáte JPEG a zmena formátu vám môže priniesť výhody.

V mnohých prípadoch nedôjde pri zmene formátovania k výrazným kvalitatívnym rozdielom, ale môžete očakávať rozdiel vo veľkosti. Až nabudúce odovzdáte fotografiu PNG, nasnímajte ju a skúste ju uložiť ako JPEG, aby ste videli rozdiel. Podrobnejšie vysvetlenie nájdete na stránke rozdiel medzi PNG, JPEG, GIF a SVG.

Postarajte sa o názvy súborov

Aj keď názov súboru môže znieť nedôležité, je to skutočne niečo, o čom by ste mali byť veľmi informovaní. Názov vášho obrazového súboru obsahuje hodnotné informácie pre SEO. Ak chcete, aby ostatní mohli nájsť váš obrázok v službách Google a ďalších vyhľadávacích nástrojoch, mali by ste mu dať správne meno.

Odporúčame vám pomenovať obrázky bez použitia medzier. Nezabudnite uviesť kľúčové slová, ak chcete, aby sa stránka a obrázok hodnotili. Ak napríklad odovzdávate obrázok Ferrari v Kalifornii, názov súboru by mal byť „ferrari-california.jpg“. Ak používate doplnok SEO pre WordPress, už viete, že kontroluje vaše alt tagy na kľúčové slová. Áno, je skutočne dôležité mať správne meno.

Po nahraní optimalizujte obrázky pre WordPress

Po príprave obrázkov na počítači môžete pokračovať v odovzdávaní. Dúfajme, že vaše obrázky sú tej správnej veľkosti a kvality. Uistili ste sa, že formát a názov súboru sú správne. Po odovzdaní vás WordPress požiada o ďalšie informácie. Nevynechajte meta informácie; vyplňte podrobnosti o svojich obrázkoch, aby ste ich mohli jednoducho usporiadať a pripraviť sa na SEO.

Názov, popis, alternatívny text a popis

Pri starostlivosti o technické podrobnosti by ste nemali zabudnúť na SEO. Názov a popis vždy pridajte na svoje médium. Pomôže vám to so správou médií WordPress a bude tiež pracovať na zlepšení SEO. Nezabudnite tiež na alt značku, ktorá sa zobrazí pre návštevníkov, ktorí nevedia správne vidieť váš obrázok. Nielen to bude užitočné pre vašich používateľov, ale tiež vám pomôže so SEO. Vaša stránka sa bude hodnotiť lepšie a používatelia budú môcť ľahšie nájsť nové obrázky.

Aj keď nepotrebujete titulky stále, nezabudnite ich pridať pre obrázky, ktoré vyžadujú ďalšie vysvetlenia (napríklad snímky obrazovky)..

Upravujte obrázky pomocou WordPress

Ak si uvedomíte, že obrázok ešte potrebuje ďalšie úpravy, mali by ste vedieť, že vám to WordPress umožňuje urobiť aj po odovzdaní súboru. Zmeňte obrázky rotácie, orezania a mierky už ste nahrali. Môžete dokonca upraviť iba miniatúru alebo všetky ostatné veľkosti. Natívny editor programu WordPress je veľmi jednoduchý, ale môžete ho občas ušetriť.

Znovu vygenerujte všetky miniatúry

Väčšina predchádzajúcich techník vám pomôže s novými obrázkovými súbormi, ktoré sa stále chystáte odovzdať. Čo ak však už máte na svoje stránky WordPress nahrané stovky, ak nie tisíce súborov? Nerobte si starosti; stále môžete tieto obrázky optimalizovať a meniť ich veľkosť.

Pre rýchlu opravu by vás mohlo zaujímať bezplatný doplnok Regenerate Thumbnails, ktorý používa viac ako milión používateľov. Ak chcete väčšiu kontrolu nad obrázkami, mali by ste vyskúšať niektoré z najlepších doplnkov WordPress na optimalizáciu obrázkov, ktoré vám ukážeme v nasledujúcich riadkoch tohto článku..

Ako regenerovať ďalšie veľkosti obrázkov

Použite doplnky WordPress

Existujú samozrejme desiatky doplnkov WordPress, ktoré vám môžu pomôcť optimalizovať obrázky na vašom webe. Prejdite nadol a pozrite si najlepšie doplnky WordPress na optimalizáciu obrázkov.

Lazy V prípade potreby načítajte obrázky

Kvalita obrázkov bude niekedy omnoho dôležitejšia ako ich veľkosť. Platí to najmä pre fotografov, ktorí chcú, aby ich fotografie boli prvotriedne. Nemôžu riskovať zníženie veľkosti ani kvality súborov. To však ešte neznamená, že by ste mali zabudnúť na optimalizáciu. Ak chcete v tomto prípade optimalizovať obrázky pre WordPress, mali by ste zvážiť lenivé načítanie.

Lazy load je technika, ktorá načíta obrázky iba vtedy, keď ich používatelia potrebujú (prejdite na ne). Napríklad, ak ste do jedného článku nahrali dvadsať kvalitných fotografií, výrazne by spomalili vaše stránky. Ak však obrázky lenivite načítate, článok by bol bleskový a fotografie by sa načítali iba v prípade potreby – v okamihu, keď sa k nim používateľ dostane..

Majte responzívne obrázky

Aj keď väčšina tém WordPress reaguje, nemusí to nevyhnutne znamenať, že obrázky reagujú tiež. Keďže nechcete, aby sa na malú obrazovku načítal veľký obrázok, budete si musieť zaregistrovať ďalšie veľkosti obrázkov pre svoj web. Ak vaša téma nepoužíva responzívne obrázky, zvážte najatie profesionála pre danú prácu – nie je to také ľahké, ako by mohlo znieť.

Optimalizujte obrázky pre sociálne médiá

Ak sa chcete uistiť, že vaše obrázky na sociálnych médiách vyzerajú dobre, budete musieť urobiť ďalší krok a optimalizovať metaznačky a označenie schém..

Ak používate doplnok SEO ako Yoast, nezabudnite skontrolovať nastavenia. Napríklad, Yoast vám umožní nastaviť niekoľko vecí týkajúcich sa sociálnych médií. Prejdite na stránku SEO -> Sociálne siete a zadajte informácie o službách Facebook, Twitter, Google+ a Pinterest.

Ak chcete viac a chcete optimalizovať obrázky pre ďalšie weby sociálnych médií, pozrite sa WPSSO – presné značky metadát + Značenie schémy pre optimalizáciu zdieľania v sociálnych sieťach a doplnok SEO.

Zmeňte spôsob, akým program WordPress komprimuje obrázky JPEG

Ak na svoju webovú stránku WordPress nahrávate veľa obrázkov JPEG, možno ste si všimli, že strácajú svoju pôvodnú kvalitu. Ak ste sa pýtali, či je na vine WordPress, teraz budete mať svoju odpoveď – áno, je to tak!

Po odovzdaní obrázka vo formáte JPEG, WordPress automaticky zmení kompresiu a rozhodne, že chcete stratiť kvalitu obrázka. Aby sme boli konkrétnejší, WP používa na vašich JPGE 90% kompresiu. Je to skvelé, ak sa vaše obrázky používajú iba ako miniatúry príspevkov alebo sa majú zobraziť v príspevku, ale ak odovzdávate fotografie, chcete, aby boli čo najlepšie, správne?

Našťastie na to budete potrebovať iba jeden riadok kódu.

Zastavenie kompresie obrázkov JPEG:

Ak nechcete, aby sa vaše obrázky JPEG komprimovali, jednoducho skopírujte a prilepte nasledujúci kód do súboru functions.php:

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

Nezabudnite uložiť zmeny a ste pripravení nahrať nové obrázky.

Na druhej strane pre vás nemusia byť obrázky také veľké. Možno budete chcieť, aby boli komprimované ešte viac a ušetrili tak čas načítania stránok. Ak zmeníte posledné číslo v tomto riadku kódu, zmeníte kvalitu novo odovzdaných obrázkov.

Kompresia obrázkov JPEG ešte viac:

Čím nižšie číslo, tým viac obrázkov bude komprimovaných. Ak chcete napríklad komprimovať tieto súbory JPEG ešte viac, budete potrebovať tento kód:

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

Nezabudnite; predvolená úroveň kompresie je 90.

dôležitý: Toto ovplyvní iba obrázky, ktoré nahráte po vložení kódu do súboru features.php. Na zmenu veľkosti a kvality obrázkov, ktoré už máte v knižnici, potrebujete doplnok. Pozrite sa, ako regenerovať ďalšie veľkosti obrázkov.

Najobľúbenejšie doplnky na optimalizáciu obrázkov pre WordPress

Na začiatku tohto článku sme hovorili o tom, ako optimalizovať obrázky pre WordPress, aby ste zrýchlili svoje stránky a vylepšili SEO. Ako ste videli, existuje niekoľko rôznych metód, ktoré môžete použiť. Je dôležité starať sa o obrázky ešte pred ich odovzdaním na svoj blog. Ak sú však obrázky už na webe, môže sa stať, že nebude možné znovu vytvoriť jednotlivé obrázky zvlášť a potom ich znova nahrať..

Nerobte si starosti; nikto od vás neočakáva, že tak urobíte. Zostaňte s nami v nasledujúcich minútach, keď sa chystáme ukázať najobľúbenejšie doplnky na optimalizáciu obrázkov pre WordPress.

Ak chcete optimalizovať obrázky, stačí vybrať zo zoznamu doplnok. Budete ho musieť nakonfigurovať a vybrať veci, ktoré doplnok urobí za vás. Potom budete môcť uvoľniť a delegovať prácu na doplnok podľa vášho výberu, zatiaľ čo môžete začať organizovať svoje mediálne súbory.

Nasledujúce doplnky vám pomôžu skomprimovať obrázky na ktoromkoľvek webe WordPress, ktorý máte. Zrýchlia načítanie stránky a nakoniec vám pomôžu vylepšiť SEO.

WP Smush

CENA: zadarmo

S viac ako 700 000 aktívnymi inštaláciami musí byť program WP Smush jedným z najlepších doplnkov na optimalizáciu obrázkov pre WordPress. Je možné rýchlo optimalizovať obrázky pomocou rôznych kompresných techník. Skvelá vec pri kompresii obrázkov pomocou programu WP Smush je, že obrázky sa nestratia o kvalitu. Neveríte nám? Vyskúšajte doplnok.

Keď sme hovorili o príprave obrázkov pre WordPress, uviedli sme, že zmena veľkosti je rozhodujúcou súčasťou procesu optimalizácie. S týmto doplnkom sa nemusíte obávať, pretože program WP Smush vám umožňuje nastaviť maximálne rozmery. Po dokončení sa všetky väčšie obrázky pred pridaním do knižnice automaticky zmenšia.

Tento fantastický doplnok dokáže pracovať so súbormi JPEG, GIF a PNG. Funguje so všetkými vašimi adresármi, automaticky sa stará o prílohy a dokonca pracuje aj na viacerých lokalitách. Na každý obrázok môžete pracovať manuálne alebo hromadne upravovať päťdesiat z nich. Ak chcete ešte lepšie výsledky a viac možností, vyskúšajte program WP Smush PRO.

EWWW Image Optimizer

CENA: zadarmo

Za zábavným menom je pre WordPress jeden z najpopulárnejších doplnkov na optimalizáciu obrázkov. Rovnako ako vyššie uvedený, aj EWWW Image Optimizer dokáže komprimovať vaše obrázky bez toho, aby to ovplyvnilo ich kvalitu. Keď sa nad tým zamyslíte, že doplnok môže vaše stránky zrýchliť v priebehu niekoľkých sekúnd, už ste na ceste k ich stiahnutiu. Keď to urobíte, budete mať možnosť optimalizovať obrázky hromadne a galérie ako GRAND FlaGallery, NextCellent a NextGEN dokonca získajú svoje vlastné stránky na hromadnú optimalizáciu..

Všetky obrázky používajúce triedu WP_Image_Editor vo WordPress budú automaticky optimalizované, zatiaľ čo kúzla môžete manuálne použiť na všetkých ostatných. Páčilo sa nám, že ste vybrali priečinky, ktoré chcete optimalizovať. Ak chcete získať viac podrobností o tom, ktoré doplnky používajú túto triedu, otvorte oficiálneho zástupcu EWWW Image Optimizer page na úložisku WordPress.

Komprimujte obrázky JPEG a PNG

CENA: zadarmo

Tiny Compress Images

Ak roztomilá panda, ktorá drží logo WordPress, vás núti, aby ste sa o tomto doplnku dozvedeli viac, nevieme, čo bude. A ak vyzerá panda dobre, je to preto, že je to tá istá, ktorá vám pomáha komprimovať obrázky na webových stránkach TinyPNG. Áno, zdá sa, že zviera je všestrannejšie, ako sme si pôvodne mysleli. Zamerajme sa však na doplnok.

Ak pôjdete s týmto doplnkom, Panda automaticky optimalizuje vaše obrázky. Zakaždým, keď nahráte nový, doplnok prevezme a vykoná svoju prácu. Napriek tomu môžete jednotlivé obrázky optimalizovať alebo to urobiť hromadne len tak, že prejdete do knižnice médií.

Kompresia obrázkov JPEG a PNG dokonca podporuje animované súbory PNG, funguje perfektne na viacerých lokalitách, je kompatibilná s WooComerce a nebude mať problémy s WP Offload S3.

Skvelá vec, o doplnku je, že vám umožňuje nastaviť maximálnu šírku a výšku atribútov pre všetky obrázky. Ak ste sa obávali toho, čo urobí, metaúdaje, nebojte sa; panda zachová všetky informácie neporušené.

Neexistujú žiadne obmedzenia veľkosti súboru, môžete nastaviť miniaplikáciu na hlavnom paneli a funguje to dokonca aj s mobilnou aplikáciou WordPress. Pretože toto všetko má komprimované obrázky JPEG a PNG, má viac ako 100 000 aktívnych inštalácií a zaslúži si miesto na zozname najlepších doplnkov na optimalizáciu obrázkov pre WordPress..

Imsanity

CENA: zadarmo

Imsanity

Aj keď vás titulný obrázok pre tento doplnok môže vystrašiť, venujte si chvíľu a pozrite sa na všetky funkcie aplikácie Imsanity. Oh, dokonca aj názov doplnku znie šialene, však? Akonáhle budete v poriadku s názvom doplnku, uvidíte, že má čo ponúknuť.

Imsanity dokáže automaticky zmeniť mierku obrázkov, umožňuje nastaviť maximálne rozmery a dokonca ponúka možnosť hromadnej zmeny veľkosti. Toto je dôležité, ak už máte na svojom blogu stovky obrázkov, ktoré si vyžadujú optimalizáciu.

Tento bezplatný doplnok je vynikajúcou voľbou, ak sa nechcete príliš usilovať o jeho nastavenie. Stačí len nainštalovať a aktivovať Imsanity, nastaviť niekoľko možností a môžete na to zabudnúť; bude riadiť svoju vlastnú cestu k optimalizácii obrazu.

Milovali sme možnosť, ktorá vám umožňuje prevádzať obrázky BMP do formátu JPG. Len v prípade, že máte veľa súborov BMP, ktoré ste omylom odovzdali pred časom, bude to záchranca.

Nástroj na optimalizáciu obrázkov ShortPixel

CENA: zadarmo

Nástroj na optimalizáciu obrázkov ShortPixel

S viac ako 30 000 aktívnymi inštaláciami je ShortPixel Image stále jedným z najpopulárnejších doplnkov na optimalizáciu obrázkov pre WordPress. Doplnok je vybavený funkciami a bude nevyhnutnosťou pre weby, ktoré majú veľa obrázkov na optimalizáciu.

Aplikácia ShortPixel Image Optimizer nielen optimalizuje dokumenty JPG, PNG, GIF a PDF, ale tiež vám umožní previesť akýkoľvek obrázok JPEG, PNG alebo GIF na WebP. Doplnok funguje dobre s ostatnými doplnkami galérie a nezáleží na tom, či vaše stránky používajú protokol HTTP alebo HTTPS. Umožní vám odstrániť EXIF ​​údaje z obrázkov (niečo, čo budú mať fotografi radi).

Doplnok rozpoznáva obrázky, ktoré už boli optimalizované, takže ich v prípade potreby preskočí. Získate povolenie alebo zakázanie automatickej optimalizácie a vďaka tomuto fantastickému doplnku môžete robiť omnoho viac. Navštívte oficiálnu stránku v úložisku a pozrite si všetky funkcie.

Optimus – WordPress Image Optimizer

CENA: zadarmo

Optimus

Rovnako ako predtým uvedený doplnok, aj Optimus optimalizuje vaše obrázky pre WordPress a urobí tak bez ovplyvnenia kvality vašich obrázkov. Môžete nechať doplnok pracovať automaticky, alebo môžete túto možnosť vypnúť a obrázky optimalizovať iba v prípade potreby.

Optimus pracuje na viacerých lokalitách, nie je cudzí webovým stránkam elektronického obchodu WordPress a je úplne optimalizovaný pre aplikácie WordPress Mobile Apps a Windows Live Writer. Zrýchlí vaše stránky bez toho, aby ste sa museli dotknúť riadku kódu. Doplnok ponúka omnoho viac, ale budete sa musieť prihlásiť pre prémiovú verziu. Viac informácií nájdete na oficiálnej stránke v úložisku doplnkov WordPress.

Pridajte lenivé načítanie svojich videí a obrázkov do WordPress

Keď na svoju webovú stránku pridáte veľa obrazového a obrazového materiálu, je zrejmé, že sa začne načítavať pomalšie. Bez ohľadu na to, odkiaľ pochádzajú, videá a veľké obrázky na vašom webe pôsobia ako ťažká váha a prinútia vašich návštevníkov čakať oveľa dlhšie, ako je potrebné na načítanie celého obsahu. S WordPress by to nemalo byť veľa a tu je spôsob, ako situáciu ľahko vyriešiť.

Ak viete, ako postupovať v PHP, existuje skvelý článok o pridávaní lenivého načítania obrázkov a nekonečného posunu napísaného našimi kolegami na tému Elegantné motívy.

Ak nie, v niekoľkých nasledujúcich riadkoch uvedieme niektoré z najpopulárnejších lenivých načítavacích modulov, ktoré budú zrýchlite načítavanie stránok. A nemusíte robiť ani veľa, ale musíte nainštalovať doplnok a nastaviť ho v niekoľkých rýchlych krokoch.

Lazy Load for Videos

CENA: zadarmo

Lazy Load for Videos

Ak máte veľa videí YouTube a Vimeo, mali by ste zvážiť inštaláciu tohto doplnku. Keď ho nastavíte, doplnok vloží do vášho videa obrázok, a preto sa váš web načíta oveľa rýchlejšie. Keď návštevník prejde na video, tento obrázok sa zobrazí s tlačidlom „prehrať“. Po kliknutí sa video začne načítavať a prehrávať. Na stránkach vývojára si môžete pozrieť jednoduché ukážku.

WP YouTube Lyte

CENA: zadarmo

WP YouTube Lyte

Tento doplnok vykoná svoju prácu rýchlo a ľahko. Po inštalácii jednoducho pridajte odkaz na svoje video YouTube alebo ho použite pomocou skráteného kódu. Môžete si vybrať medzi pridaním normálneho videa, zoznamu skladieb alebo iba zvuku z vybraného videa. Vaše videá na YouTube potom dostanú obrázok, ktorý umožní lenivé načítanie. Kliknutím na obrázok spustíte prehrávanie videa alebo zvuku.
Pozrite si ukážku na webe vývojára.

a3 Lazy Load

CENA: zadarmo
DEMO 1
DEMO 2

a3 Lazy Load

Táto je venovaná vášmu mobilnému webu. Ak máte veľa obrázkov a / alebo videí, ktoré chcete svojim návštevníkom zobraziť na mobilných zariadeniach, mali by ste sa pozrieť na a3 Lazy Load. Umožní vám pridať lenivé načítanie k obrázkom a videám a doplnok vám dokonca umožní zvoliť prechodné efekty, ktoré sa zobrazia používateľom pri posúvaní obsahu, ktorý sa načíta,.

V oblasti správcu môžete ľahko zapnúť a vypnúť obsah, ktorý chcete lenivo načítať. Pre tých, ktorí sú zapnutí, sa obsah načíta iba vtedy, keď návštevník prejde na túto časť obsahu.
K dispozícii je pekne zobrazené demo, ktoré obsahuje 1 000 obrázkov – každý sa načíta iba vtedy, keď naň prejdete. Keďže tento doplnok lenivo načíta videá, kliknutím na vyššie uvedený odkaz sa zobrazí ukážka videa.

BJ Lazy Load

CENA: zadarmo

BJ Lazy Load

Ak nepotrebujete podporu videí a nechcete, aby sa obrázky len načítali, mali by ste vyskúšať tento doplnok WP. Po inštalácii a nastavení nahradí vaše obrázky, miniatúry, obrázky Gravatar a dokonca aj prvky iframe zástupným symbolom. Podobne ako v prípade predtým spomenutého doplnku, načíta obsah až vtedy, keď k nemu užívateľ príde.

Či už ide o obrázky alebo videá, ktoré chcete lenivým spôsobom načítať, jeden z vyššie uvedených doplnkov vám pomôže za pár sekúnd. Všetky z nich sú zadarmo, takže nie je ospravedlnenie, že ste nevyskúšali aspoň jeden z doplnkov a zistili, akú veľkú váhu bude mať vaše rameno. Samozrejme existuje mnoho ďalších doplnkov s rovnakou funkciou a môžete si ich prezerať a vyskúšať všetky.

Atraktívne zobrazujte pred a po obrázkoch

Sme si istí, že ste už videli veľa príkladov obrázkov pred / po. Neviem o tebe, ale prvá vec, ktorú máme na pamäti, keď vidíme frázu „pred a po“, je fitness tréningový program, kde ľudia ukazujú svoje telá pred a po tréningovom programe.

Ak o tom premýšľate, väčšina webových stránok používa na prezentáciu rozdielov jednoduchý prístup – urobia obidva obrázky a umiestnia ich jeden vedľa druhého alebo dokonca jeden nad druhý. Ak chcete rovnaký výsledok, nečítali by ste tento článok, pretože už viete, ako to urobiť.

Čo keby sme vám povedali, že existuje vizuálne ohromujúci spôsob, ako to vyriešiť pred / po probléme a je to len na dosah ruky? Je tu a po nastavení budete vývojárov chváliť, pretože konečný výsledok je skutočne vynikajúci.

Dvadsať dvadsať

CENA: zadarmo

Dvadsať dvadsať

Twenty Twenty je názov tohto úžasného doplnku, ktorý si môžete zadarmo stiahnuť v úložisku doplnkov WordPress.

Doplnok vám umožní umiestniť jeden obrázok na druhý a umožní vám hrať sa pomocou posúvača, aby ste ho mohli skryť / odhaliť. Prečítajte si ukážku a uvidíte, o čom hovoríme.

OK, teraz, keď ste pripojení k tomuto malému doplnku, pozrime sa, ako vytvoriť tento ohromujúci efekt. Aj keď je relatívne ľahké znovu vytvoriť demo efekt, stále musíte poznať svoju cestu okolo základného HTML. Poďme:

  1. Vytvorte nový príspevok alebo otvorte existujúci príspevok
  2. Vložte dva obrázky do príspevku. Ak pracujete vo vizuálnom editore, mali by ste vidieť obrázok jeden nad druhým. Ak pracujete v textovom editore, mali by ste vidieť kód podobný tomuto:
  3. 
    
    
    
  4. Pred prvý obrázok zadajte značku [dvadsaťosem]
  5. Po druhej zadajte značku [/ dvadsaťosem]
  6. V textovom editore by ste mali skončiť s niečím podobným:

    [Twentytwenty]
    
    
    
    [/ Twentytwenty]
    
  7. Uistite sa, že vaše obrázky majú rovnakú veľkosť, aby ste dosiahli najlepšie výsledky
  8. Prezrite si ukážku alebo publikujte svoj príspevok a vychutnajte si vizuálne ohromenie pred a po obrázkoch

Ako vytvárať interaktívne obrázky – kresliť, pridávať popisy a odkazy

Dnes je ťažké prevádzkovať web bez multimédií. Obrázky, videá a hudba sú súčasťou prakticky každej webovej stránky. Priemerný užívateľ internetu je silne závislý od vizuálnych stimulov, takže sa musíte starať o vizuálne a interaktívne časti vašej stránky. Prijímajú sa články s obrázkami 94% viac zobrazení ako tí bez nich. Je tiež známe, že multimédiá na webových stránkach môžu zvýšiť NI v marketingu obsahu.

Dúfame, že vás nemusíme presvedčiť, aby ste sa starali o obrázky na svojich stránkach. Aj keď nepoužívate obrázky vo článkoch (ktoré by ste mali), používate odporúčané obrázky, však? Existuje pomerne veľa doplnkov do galérie, ktoré vám môžu pomôcť spravovať obrázky na vašom webe WordPress, môžete mať témy týkajúce sa fotografie, pripojiť Instagram k svojmu webu WordPress a urobiť omnoho viac. Ale čo keby ste chceli vytvoriť interaktívnejší obsah?

Pre začiatočníkov by vás mohlo zaujímať pridanie obrázkového efektu, ktorý budú mať používatelia radi. Nezabudnite na Virtuálnu realitu vo WordPress, ktorá sa stáva populárnejšou po tom, ako Automattic predstavil VR na WordPress.com. Stále však niečo chýba. Je možné vytvárať interaktívne obrázky s klikateľnými časťami? Áno, je to možné a chystáme sa vám ukázať, aké zábavné a ľahké to je.

Upozorniť

CENA: zadarmo
DEMO

Prvá vec, ktorá sa vám bude páčiť, je, že je úplne zadarmo! Rovnako ako s akýmkoľvek iným doplnkom z úložiska WordPress si ho môžete stiahnuť, nainštalovať a aktivovať v priebehu niekoľkých minút. Bezplatná verzia vám umožní pracovať s jedným interaktívnym obrázkom. Ak chcete viac, budete sa musieť prihlásiť pre verziu PRO, o čom však budeme hovoriť neskôr.

Doplnok reaguje a nemusíte sa obávať správneho zobrazovania interaktívnych obrázkov na akomkoľvek zariadení. Nielen, že sa obrázok bude škálovať podľa veľkosti obrazovky, ale bude fungovať aj vo väčšine moderných a starších prehliadačov (stolné a mobilné). Upozorniť pri použití kreslenia používa prvky plátna, keď sa zobrazujú v nových prehľadávačoch, zatiaľ čo ak ich načítate do staršieho, vráti sa na obrázkové mapy..

Vlastnosti

Predtým, ako sa dostaneme k príkladu, ktorý vám ukáže, aký silný je tento jednoduchý doplnok, pozrime sa, čo môžete očakávať od upozorňovacej hry:

  • kresliť – Po odovzdaní obrázka budete mať možnosť nakresliť naň obrazce. Vyberte ľubovoľnú časť obrázka, ktorú bude možné vybrať / kliknúť
  • farby – Prispôsobte farby tak, aby ste prispôsobili hotspoty dizajnu vašich stránok
  • Zvýraznite na hover – Zobraziť ďalšiu časť obrázka, ak sa používateľ pohybuje nad vybratou časťou
  • Zobraziť ďalšie informácie – Zobraziť ďalšie informácie o vybranej časti obrázka
  • Prejdite na adresu URL – Presmerujte používateľov na ľubovoľnú adresu URL, ak kliknú na výber

Nakreslite nastavenia pozornosti

Príklad – interaktívna mapa Havaja

Použijeme príklad z demonštračnej stránky, aby sme vám ukázali, čo presne s Draw Attention môžete urobiť. Poďme sa teda pozrieť, ako vyzerá interaktívna mapa Havaja, keď bola vytvorená pomocou doplnku.

Prvá vec, ktorú by ste museli urobiť, je nájsť obraz Havajských ostrovov. Po navigácii do Upozorniť -> Upraviť obrázok, mali by ste obrázok nahrať do oblasti na pravom bočnom paneli. Po načítaní obrázka sa zábava môže začať.

Tu získate výber farieb pre zvýraznenie (farba, orámovanie, nepriehľadnosť atď.), Upravte „ďalšie informačné pole“ (obrázok, názov, farba textu atď.). Ak nechcete manuálne vybrať každú farbu obrázka, môžete si na pravej bočnej lište rýchlo vybrať farebnú schému..

Upozorniť - ako vytvárať interaktívne obrázky vo WordPress

Naj magickejšia časť sa odohráva v Oblasti hotspotov obrazovka nastavení. Tu získate svoj obrázok naložený v plnej veľkosti. Teraz musíte iba začať kresliť a vytvoriť nový hotspot. Môžete pridať ľubovoľný počet bodov, čo znamená, že môžete vytvoriť komplexný výber, ako chcete. Získate toľko hotspotov, z ktorých každý môže mať svoje vlastné nastavenia.

V tomto príklade by ste teda mali vybrať jeden z ostrovov. Vyberte názov pre ostrov, pridajte popis a ďalší obrázok, ktorý sa zobrazí, keď sa používateľ podarí umiestniť hotspot (pravá časť vyššie uvedeného obrázka GIF).

Mali by ste opakovať postup pre každý z ostrovov, ktoré chcete byť interaktívne. Akonáhle budete mať hotspoty pripravené, skopírujte krátky kód z pravej strany. Vložte krátky kód na príspevok, stránku, widget alebo kamkoľvek, kde chcete ukázať svoju novú interaktívnu mapu, a máte hotovo! Ak chcete používateľov presmerovať na akúkoľvek inú stránku, keď kliknú na výber, stačí namiesto popisu vybrať webovú adresu. Ľahké ako to!

PRO verzia

Zatiaľ čo bezplatná verzia bude perfektná, ak potrebujete iba jeden obrázok, PRO verzia vám umožní mať na vašom webe toľko interaktívnych obrázkov, koľko chcete. Aj keď to bude najdôležitejšie, aby ste zvážili, verzia PRO vám poskytne ešte viac ako viac obrázkov.

Funkcia Možnosti rozloženia vám umožní zobraziť viac informácií o vybratých častiach obrázka. Napríklad sa vám zobrazia informácie v lightboxe alebo na jednoduchom paneli nástrojov, ktorý sa objaví po tom, čo sa používateľ presunie na vybranú časť obrázka..

K dispozícii je tiež dvadsať preddefinovaných farebných paliet, takže nemusíte každú farbu prispôsobovať ručne. Verzia PRO vás bude stáť 74 dolárov za licenciu na jednu stránku, ale ak potrebujete viac ako jeden interaktívny obrázok, bude to bez premýšľania..

Ako regenerovať ďalšie veľkosti obrázkov

Je relatívne ľahké zaregistrovať nové veľkosti obrázkov v téme WordPress. Po tom, čo ste svojmu systému povedali, aké veľké by mali byť vaše obrázky, pomenovali ich a rozhodli ste sa ich orezať, môžete obrázky distribuovať kdekoľvek chcete. Ale čo staré obrázky?

Ak ste použili niektorú z techník, ktoré sme vám ukázali, pripravili ste trávnik na nové obrázky. Či už používate novo zaregistrované veľkosti obrázkov pre miniatúry príspevkov, alebo povolíte autorom ich použitie v príspevkoch, nové pravidlá sa vzťahujú iba na obrázky, ktoré sa odovzdajú po vykonaní zmeny v súbore function.php. Ak chcete zmeniť staršie obrázky, odporúčame vám použiť doplnok Regenerate Thumbnails (Regenerovať miniatúry).

Regenerovať miniatúry:

CENA: zadarmo
  1. Ísť do Doplnky-> Pridať nové
  2. Hľadať “Regenerate Thumbnails”
  3. Nainštalujte a aktivujte doplnok
  4. Prejdite na Nástroje-> Regen.Thumbnails

Ak chcete zmeniť veľkosť všetkých svojich obrázkov, jednoducho kliknite na tlačidlo „Regenerovať všetky miniatúry“ a počkajte, kým doplnok vykoná tvrdú prácu..

Ako regenerovať ďalšie veľkosti obrázkov

Ak chcete vidieť obrázky, ktorých veľkosť sa bude meniť, alebo ak chcete zmeniť veľkosť iba niektorých obrázkov, prejdite do knižnice médií, kde nájdete novú možnosť v časti Hromadné akcie a jednu vedľa každého obrázka v galéria.

Dobré na doplnku je, že neodstráni pôvodné obrázky. Vytvoria sa iba nové veľkosti obrázkov, ktoré môžete použiť vo svojom motíve, zatiaľ čo pôvodné budú ponechané na ich neskoršie použitie alebo ich manuálne odstránite, ak sa rozhodnete, že ich nepotrebujete..

To je všetko. Užite si svoje nové miniatúry alebo sa pozrite Jednoduché veľkosti obrázkov plugin, ktorý dokáže urobiť to isté.

Odstráňte atribúty obrázka šírka a výška pomocou jQuery

Pri pridávaní obrázkov do príspevku WordPress systém k obrázku automaticky pridá atribúty výšky a šírky. To je zvyčajne dobrá vec, ale niekedy sa vám nebude páčiť skutočnosť, že každý obrázok dostane tieto atribúty.

Ak chcete odstrániť atribúty priamo v mieste odovzdania, môžete to urobiť pomocou jednoduchej funkcie, ktorú sme vám naposledy ukázali.

Ale ak si prečítate článok alebo si vyskúšate túto funkciu sami, všimli ste si, že to ovplyvní iba obrázky odovzdané po nainštalovaní funkcie do vášho systému WP. Ak už máte databázu plnú príspevkov s vloženými obrázkami, vyššie uvedená funkcia vám pri starých atribútoch obrázka veľmi nepomôže.

Keďže pravdepodobne nemôžete prejsť každý obrázok ručne a vymazať šírku a výšku jeden po druhom, pravdepodobne budete potrebovať ďalšiu funkciu, ktorá odstráni tieto atribúty pre všetky existujúce obrázky vložené do vašich príspevkov. V takom prípade ste na správnom mieste, pretože vám chceme ukázať jednoduchý spôsob automatického odstránenia atribútov obrázka šírky a výšky pomocou niekoľkých riadkov kódu jQuery. Nebudete sa báť predchádzajúcej vety – nemusíte ani vedieť, čo je jQuery, postupujte podľa nasledujúcich troch krokov a budete hotoví v okamihu.

Odstráňte atribúty obrázka šírka a výška:

  1. Otvorte súbor header.php z priečinka s témou
  2. Skopírujte a prilepte tento kód kamkoľvek medzi a tagy:
  3.  
  4. Uložiť zmeny

A ste hotoví! Kód urobí svoju mágiu po otvorení príspevku, ktorý obsahuje obrázok a z neho odstráni značky šírky a výšky.

Ako vytvoriť vlastné veľkosti obrázkov v aplikácii Media Uploader

Ak na nahrávanie obrázkov v programe WordPress používate aplikáciu Media Uploader, pravdepodobne ste už videli veľa možností pre obrázky. Medzi mnohými si môžete vybrať veľkosť obrázka, ktorú môžete poslať do svojho článku.

Na výber sú možnosti miniatúry, strednej, veľkej a plnej veľkosti, ale všetky tieto možnosti majú preddefinované hodnoty. Ak teda používate vlastný motív, častejšie sa vám zasekáva zmena šírky a výšky každého obrázka znova a znova..

V skutočnosti to nemusíte robiť. Existuje úhľadná malá funkcia s názvom add_image_size (), ktorá je skvelým nástrojom pre vývojárov. A po tomto článku bude pre vás tiež užitočný.

Povedzme, že váš motív má vlastnú šírku a vy chcete ľahko vložiť obrázky, aby sa tam perfektne zmestili. Povedzme, že šírka je 666 px (nebudeme sa zaoberať dôvodom, prečo ste nastavili šírku na toto číslo, je to vaša voľba). Ak to chcete urobiť, musíte do aplikácie Media Uploader pridať ďalší prepínač. Pomocou nižšie uvedeného kódu pridáte ďalšiu veľkosť, ktorá je polovičnou veľkosťou pôvodnej veľkosti.

  1. Otvorte súbor features.php
  2. Skopírujte a prilepte tento kód:
  3. function custom_image_sizes () {
    add_image_size ('one-size', 333, 333, true);
    add_image_size ('other-size', 666, 666, true);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    funkcia show_image_sizes (veľkosti $) {
    $ veľkosti ['one-size'] = __ ('Custom Size 1', 'isitwp');
    $ veľkosti ['other-size'] = __ ('Custom Size 2', 'isitwp');
    návratnosť $ $;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Uložiť zmeny
  5. Skúste pridať obrázok z vášho zariadenia na odovzdávanie médií, kde by ste mali vidieť svoje nové možnosti veľkosti v časti „Nastavenia zobrazenia príloh“

Vytvorte automatickú snímku obrazovky ľubovoľného webu a zverejnite ho ako obrázok vo svojom príspevku

Ak chcete zobraziť miniatúru webovej stránky, musíte ísť na webovú stránku, vytlačiť ju alebo si urobiť snímku obrazovky s programom alebo doplnkom prehliadača. Potom budete musieť obrázok upraviť, orezať na správnu veľkosť a nahrať do svojho WordPress, aby ste mohli použiť snímku obrazovky v príspevku.

Ak túto snímku nemusíte robiť občas, nebude to problém, ale ak častejšie používate snímky obrazovky z rôznych webových stránok, budete radi, keď budete počuť, že existuje úžasná funkcia, ktorá ušetrí vám čas a nervy.

V tejto časti sprievodcu sa chystáme ukázať kompletnú funkciu, ktorá vytvorí skrátený kód, ktorý môžete použiť na vytváranie snímok ľubovoľnej webovej stránky, ktorú chcete..

Vytvoriť automatický screenshot:

  1. Otvorte function.php
  2. Skopírujte a prilepte nasledujúci kód:
  3. function wp_webscreen ($ atts, $ content = NULL) {
    extrakt (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // šírka
    "h" => '450' // výška
    ), $ atts));
    
    $ img = ''. $ alt. ',;
    return $ img;
    }
    add_shortcode ("screen", "wp_webscreen");
  4. Zmeňte predvolené premenné v poli
  5. Uložiť zmeny

Táto funkcia vytvára skrátený kód, ktorý môžete ľahko použiť kdekoľvek na svojej webovej stránke WordPress. Či už chcete napríklad použiť snímku obrazovky webovej stránky v príspevku, miniaplikácii na bočnom paneli alebo v päte, jednoducho skráťte skrátený kód na správnom mieste:

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

Čo je skvelé na tejto funkcii je to, že uloží obrázok ako dynamickú adresu URL, čo znamená, že keď vytvoríte snímku s krátkym kódom, v budúcnosti sa automaticky obnoví a vždy zobrazí aktuálny vzhľad webových stránok uvedených v krátkom kóde..

Upozorňujeme, že z tohto môžete priamo zmeniť parametre krátkeho kódu. Ak chcete urobiť snímku inej adresy URL alebo urobiť snímku v inej dimenzii, nemusíte upravovať kód v súbore features.php..

Príklad:

Povedzme, že chcete urobiť snímku obrazovky Google a zväčšiť ju na 200 × 400 pixelov:

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

Všetko môžete ešte ľahšie uložiť uložením krátkeho kódu do tlačidla, takže ho môžete vložiť do príspevku jediným kliknutím na tlačidlo.

záver

Ak chcete vylepšiť obrázky na svojom webe WordPress, nemusíte inštalovať všetky doplnky a funkcie, ktoré sme spomenuli. Dúfame však, že ste našli aspoň niekoľko tipov, ktoré vám pomôžu optimalizovať obrázky alebo ich vylepšiť akýmkoľvek spôsobom.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map