miten lisätä kuvia WordPress vuonna 2022a opetusohjelma lisäämällä kuvia Classic ja Gutenberg Editors (+vähentää tiedoston kokoa)

tänään, olemme hajottaa miten lisätä kuvia WordPress ja pienentää niiden tiedoston kokoa (pitää sivut & viestit ladataan mahdollisimman nopeasti).

kun vasta opettelee blogin perustamisen perusteita, niin siinä on paljon selvitettävää, tajuan sen. Olemme puhuneet siitä, miten muuttaa fontin kokoa, Muuttaa fontin väriä, tehdä klikattava linkki ja niin paljon muuta täällä.

hyvä uutinen on, että vuonna 2022 WordPressissä on erittäin helppo oppia lisäämään kuvia kaikilla käytettävyyspäivityksillä ja parannuksilla, joita he ovat nähneet viimeisen vuosikymmenen aikana.

tässä pikaopastuksessa näytän, miten kuvia lisätään WordPress-viesteihin sekä klassisella Editorilla (jota käytän mieluiten) että niiden uudemman Gutenberg-editorin kautta.

nyt sukelletaan kuvien lisäämiseen WordPress—viesteihisi-ja samalla pienennetään niiden tiedostokokoa mahdollisimman paljon, jotta pysytään SEO: n parhaiden käytäntöjen mukaisina ja sivut latautuvat mahdollisimman nopeasti.

miten lisätä kuvia WordPress (ja pienentää tiedoston kokoa) 2022

1. Kuvien lisääminen klassisen WordPress-Editorin julkaisuihin
2. Kuvien lisääminen Gutenbergin WordPress-Editorin julkaisuihin
3. varustellun Kuvan lisääminen WordPress-julkaisuun

nyt nopeasti, ennen kuin sukellamme tähän opetusohjelmaan kuvien lisäämisestä WordPress-palveluun, näytän sinulle, miten kuvan tiedostokokoa voidaan pienentää (helping your posts load faster) 2 helpolla askeleella.

asenna (ilmainen) Pakkaus JPEG & PNG-kuvien liitännäinen Tiny PNG

voit ladata ilmaisen pakkaa JPEG & PNG Images Plugin WordPress täältä WordPress plugin kirjastosta.

Vaihtoehtoisesti voit myös etsiä plugin ja asentaa sen suoraan sisällä plugin menu, saatavilla vasemmalla puolella blogin admin osio täällä-tai tutustu tämä nopea opetusohjelma Miten asentaa WordPress plugin:

kun olet asentanut pakkaa JPEG & PNG-kuvat Plugin, jokainen uusi kuva, jonka lataat WordPress-blogiisi, optimoidaan automaattisesti ja tiedoston kokoa pienennetään mahdollisimman paljon kuvan laadusta tinkimättä.

Huomaa: Tämä on markkinoiden ylivoimaisesti paras kuvanpakkausliitännäinen. Se mahdollistaa jopa 500 vapaa kuva painallusta kuukaudessa (mikä on paljon enemmän kuin todennäköisesti tarvitset) ennen päivittämistä maksettu suunnitelma $.009 / image beyond your first 500 joka kuukausi. Se on vakava bargain ja et löydä parempaa Pakkaus plugin, joka antaa sinulle enemmän ilmaisia hyvityksiä.

Jos kuitenkin haluat tehdä kuvapakkauksen suoraan omalla tietokoneellasi (rajoittamaton ilmaiseksi), suosittelen ImageOptim-sovellusta.

Upload your Images

That ’ s it! Oikeasti, se on niin helppoa.

kun olet asentanut Pakkaus plugin blogiisi—tai olet pakannut yksittäisiä kuvia tietokoneellesi ensin—olet valmis lataamaan ne viesteihisi tai WordPress-sivuihisi.

nyt, nyt kaivaa miten lisätä kuvia WordPress.

1. Kuvien lisääminen viesteihin klassisessa WordPress-Editorissa

jos olet kuten minä ja silti pidät enemmän klassisesta WordPress-Editor-asettelusta julkaisujesi lisäämiseen/muokkaamiseen, seuraa perässä täältä.

toisaalta, jos käytät uudempaa Gutenberg-editoria viestisi sisältöön, hyppää seuraavaan osioon tätä läpivalaisua varten. Jos et ole varma, mitä editoria käytät, kurkista alla oleviin kuvankaappauksiin ja vertaa niitä siihen, miltä editor näyttää. Haluatko käyttää klassista editoria,mutta et ole varma, miten saat sen? Kestää 2 minuuttia seurata yhdessä Yoastin yksinkertainen opetusohjelma asentamisesta Classic Editor WordPress blog.

1. Avaa viesti, johon lisäät kuvia (ja etsi oikea kohta)

ensin sinun on varmistettava, että olet sen viestin sisällä, johon haluat lisätä kuvan.

tämän jälkeen haluat suunnistaa kohdistimen juuri siihen kohtaan viestissäsi, johon haluat lisätä kuvan.

2. Napsauta muokkaimen

yläreunassa olevaa ”Lisää Media” – painiketta, joka näyttää tältä juuri tässä:

kun napsautat ”Lisää Media” – painiketta, sinulle esitetään näyttö, johon voit ladata kuvatiedoston.

3. Napsauta ”Upload Files”

Napsauta välilehteä ”Upload Files” ja sinut viedään näytölle, jossa voit valita valitsintyökalulla kuvatiedoston siitä, missä se sijaitsee tietokoneellasi.

Vaihtoehtoisesti, jos vedät kuvatiedoston työpöydältä ja lataamalla sen-voit ohittaa ”Upload Files” – näytön ja vain siirtyä suoraan vetämällä kuvan ja pudottamalla sen (seuraavassa vaiheessa on demo tästä).

4. Lataa Kuvatiedostosi

mieluummin raahaan kuvatiedostoja työpöydältäni ja pudotan ne tiedoston lataajaan (sen sijaan, että käyttäisin valitsinta paikantaakseni ne tietokoneellani), koska se on paljon nopeampaa.

tässä nopea video / GIF-esittely siitä, miten lisätä kuva työpöydältäsi WordPress-palveluun:

kun olet ladannut kuvasi, Pakkaus plugin toimii se taika auttaa pienentämään tiedoston kokoa (kulissien takana).

Huom.: Ennen kuin viimeistelet kuvavalintasi ja klikkaat ”Lisää viestiin”, sinun kannattaa kirjoittaa kuvalle SEO—ystävällinen Alt-teksti-jotain, joka kuvaa kuvan tapahtumien luonnetta, ja mieluiten kudonta yhdessä kohdesanoista, joita toivot artikkelin lopulta sijoittuvan (orgaanisissa hakutuloksissa).

5. Valitse Kuvavalintasi ja napsauta ”lisää postiin”

lopuksi, sinulla on muutama kuvavalinta määriteltävänä. Näihin kuuluvat:

• Kuvan kohdistuksen säätäminen viestissäsi (valitsen aina keskityksen kohdistuksen)
• kuvalinkin tekeminen toiselle sivulle tai blogin postaukseen (tai ulkoinen linkki, johon haluat ohjata lukijat)
• näytön koko (suosittelen aina lataamista täysikokoisena, jotta Kuvan laatu ei heikkenisi)

kun olet valinnut nämä vaihtoehdot, olet valmis klikkaamaan ”lisää postiin”ja olet valmis menemään!

tuo nappi on täällä näytön oikeassa alakulmassa:

nyt sinut viedään takaisin muokkausikkunaan ja näet juuri lisäämäsi kuvan istumassa juuri siinä, mihin latasit sen.

muista, että sinulla on vielä joitakin nopeita & helppoja muokkausvaihtoehtoja, jos päätät muuttaa jotain uuden levykuvasi näytöllä:

• voit muuttaa kuvan kokoa manuaalisesti tarttumalla yhteen kulmista ja vetämällä sitä ylös tai alas koossa
• voit klikata kuvan keskipistettä alaspäin ja raahata sitä postauksessasi asettaaksesi sen uudelleen
• voit aina poistaa kuvan napsauttamalla ”backspace” tai ”delete” näppäimistöllä ja aloittaa alusta

ja siinä se on! Olet oppinut lisäämään kuvan WordPress Classic Editor.

2. Lisäämällä kuvia Gutenberg WordPress Editor

in Gutenberg WordPress Editor, post editointi vaihtoehtoja näyttää paljon erilainen kuin mitä näet Classic Editor.

Gutenberg pyrkii lisäämään/muokkaamaan sisältöä järjestelmällä, joka koostuu ”palikoista”, kuten tekstilohkoista, otsikkolohkoista, kuvapalikoista ja niin edelleen. Joten sukelletaan lisäämällä kuvia Gutenberg.

1. Valitse” Lisää kuva ” – kuvake

varmistettuasi, että olet lisäämässä kuvan oikeaan paikkaan viestissäsi, valitse ”Lisää kuva” – kuvake. Se näyttää tältä tässä.:

kun klikkaat ”Lisää kuva” – kuvaketta, sinulla on muutama vaihtoehto, miten voit lisätä kuvan viestiisi.

2. Valitse, miten lisäät kuvan

Gutenbergissä, sinulla on muutama nopea vaihtoehto, miten voit lisätä kuvan WordPressissä. Tähän sisältyy:

• Upload (joka avaa valintaruudun, jonka avulla voit valita kuvatiedoston tietokoneeltasi)
• mediakirjasto (joka vie sinut olemassa olevaan kuvatiedostoosi—josta voit myös vetää & drop in an image)
• Lisää URL-osoitteesta (jos verkossa on kuva, jonka haluat tuoda, voit liittää tähän linkkiin tästä)

tässä tilannekuva näistä vaihtoehdoista (henkilökohtaisesti, minä vain klikkaa ”ladata” ja nopeasti napata kuvan Haluan työpöydältä):

3. Lataa kuva

kun olet valinnut kuvan, jonka haluat ladata, klikkaa ”Avaa” – painiketta ja se lisätään viestiisi.

nyt kun olet lisännyt kuvan, pienempi pikkukuva siitä ilmestyy uutena lohkona viestiisi.

tässä kuvakaappaus siitä, miltä se näyttää:

4. Image Settings & Quick Editing Options

ennen siirtymistä, you ’ ll want to get your image settings in (as per SEO best practices).

ja aivan kuten klassisella Editorilla, voit määritellä paljon erilaisia asetuksia ja ominaisuuksia kuvalle. Gutenbergin kanssa se on vain tehty vähän eri tavalla. Kuvaasetukset ovat sen sijaan oikealla sivupalkissa (kun olet ensin napsauttanut kuvaa kerran).

tältä ne asetukset näyttävät:

muista määritellä kuva-asetukset ainakin näille kahdelle ominaisuudelle:

• kirjoittaminen SEO-ystävällistä vaihtoehtoista tekstiä, joka kuvaa kuvaa ja kutoo avainsanalauseella
• kuvan koko (näytän kuvat aina täysikokoisina välttääkseni laadun heikkenemisen)

Voit myös klikata ”Style” -asetuksiin lisätäksesi vivahteikkaampia stailausominaisuuksia & sisäänrakennetuilla rajausominaisuuksilla Gutenbergin kanssa.

5. Liikkuvan kuvan noin sisällä postitse kautta Gutenberg

yksi erittäin viileä sivuvaikutus Gutenberg editorin keskittyä noin käyttäen ”lohkot” sisältöä, on, kuinka helposti voit siirtää kuvia (tai sisältöä lohkot, että asia) noin sisällä postitse.

kun olet napsauttanut kerran kuvaa, jonka haluat järjestää uudelleen postauksessasi, näet ”ylös” ja ”alas”—nuolet aivan kuvan vieressä.

klikkaa näitä nuolia liikuttaaksesi kuvaasi ylös tai alas viestisi sisällä, näin:

ja se siitä! Voitte mennä.

olet nyt oppinut lisäämään kuvan WordPressiin myös Gutenbergin muokkaimessa 🙂

3. Suositellun kuvan lisääminen WordPress

Suositeltavat kuvat ovat välttämättömiä WordPress—blogissa-koska ne ovat kuvia, jotka näkyvät blogikirjoitustesi yläosassa (ja sekä hakutuloksissa että sosiaalisen median alustoilla, kun sisältöäsi jaetaan).

viimeisenä mutta ei vähäisimpänä, Näin voit lisätä varustellun kuvan viestiin (tai sivulle) WordPressissä.

lähellä WordPress-editori-ikkunan oikeaa alakulmaa näet osion, johon voit lisätä kuvan. Klikkaa ”Set featured image” ja sinut viedään vakiokuvan latausruutuun, jossa voit lisätä kuvan, jonka haluat olevan esillä viestisi yläosassa (myös hakutuloksissa ja sosiaalisilla alustoilla).

kun olet ladannut haluamasi kuvan ja napauttanut ”Set featured image”, sinut viedään takaisin muokkaimen näytölle ja näet pienen pikkukuvan, joka näkyy oikeassa alakulmassa (varmistaaksesi, että olet lisännyt oikean kuvan) näin:

Pretty simple, right?

jos valitsit väärän kuvan (tai haluat tehdä muutoksia myöhemmin), voit klikata ”Poista kuva” – tekstiä ja sinulla on mahdollisuus valita tai ladata toinen kuva julkaistavaksi viestissäsi.

lopulliset ajatukset siitä, miten lisätä kuva WordPressissä

kuvien lisäämisen viesteihisi WordPressissä ei tarvitse olla vaikeaa.

käytitpä blogissasi klassista editoria tai gutenbergia, WordPress-tiimi on tehnyt kovasti töitä, jotta kuvien lisääminen olisi helppoa.

jos sinulla on vielä ongelmia, jätä minulle kommentti tämän viestin alareunaan ja olen iloinen voidessani auttaa sinua vianmäärityksessä kaikissa ongelmissasi.

siinä kaikki tältä päivältä!

kävimme juuri läpi miten lisätä kuvia WordPress 👏

Like what you see? Rekisteröidy saada lisää blogging tutorials ja neuvoja.

Haluatko Lisää Bloggausohjeita?

pään yli ja tsekkaa mun ultimate guide to starting a blog and making money it this year.