kuvien Tallentaminen web on aina ollut vähän mysteeri monille. Lataamalla kuvia, jotka ovat raskaita (alkuperäinen kuva mitoitus klo 5000px leveys, optimoimaton kuvia) ei ainoastaan luoda ongelmia käyttäjän kokemus sivuston, mutta myös vaikuttaa teidän SEO strategia (lastaus nopeus, välitön poistumisprosentti, sijoitus jne.).,
Tämä artikkeli on jaettu useita osia, jotka kattavat kaiken mitä sinun tarvitsee tietää, miten valmistautua kuvia web. Postauksen ensimmäisessä osassa listaamme suositellut kuvakoot Flothemes-sivustollesi. Seuraava artikkeli kattaa miten tarkastaa eri osissa sivuston tunnistaa oikean kokoisia kuvia ennen lataamalla ne web. Kerromme myös, miten viedä / tallentaa kuvia oikein,joten ne on optimoitu nopeus.,
lopulta, annamme joitakin kuva SEO vinkkejä siitä, miten otsikko kuvia oikein tallennettaessa niitä ja miksi ALT tageja parantaa SEO. Jo lähetettyjä kuvia sivuston, me näytämme sinulle, miten tunnistaa kuvia, jotka ovat liian suuria ja hidastavat sivuston. Aloitetaan!
miksi kuvakoot ja sivuston suorituskyky ovat tärkeitä?
Optimoimattomat kuvat hidastavat verkkosivuja. Slow websites = huono käyttäjäkokemus, pienemmät mahdollisuudet sijoittua Google-hakuihin ja lopulta vähemmän kyselyjä ja asiakkaita.,
Saving kuvia asianmukaiset mitat ja optimoi kuvia web voi auttaa muutamia asioita:
- Nopeus – mukaan tutkimus tehdään Google, jos web-sivu ladataan yli 5 sekuntia, todennäköisyys, että mobiili käyttäjä jättää, että sivu nousee 90%. Kokoamalla ja pienentämällä kuvakokoja, teet verkkosivujesi sivut nopeammiksi.
- käyttäjäkokemus – hyvä laatu, impactful images auttaa vierailijoita saamaan mukaansatempaavamman kokemuksen heidän selatessaan verkkosivustoasi., Pitämällä näitä kuvia optimoitu ja nopea lastaus – olet varmistetaan saumaton ja sileä kokemus kävijöitä, mikä motivoi heitä viettämään enemmän aikaa sivustollasi ja tutkia sisältöä.
- SEO ranking – Sivuston nopeus on ranking-tekijä. Mitä nopeampi on sivustosi, sitä paremmin voit mahdollisesti sijoittaa. Web-sivut optimoiduilla kuvilla latautuvat paljon nopeammin sekä työpöydälle että mobiililaitteille.
- myynti – nopeammat latausajat ja parempi SEO voivat auttaa tuomaan lisää käyttäjiä sivustoosi, mikä lisää mahdollisuuksiasi tiedustella ja varata.,
Huomautus: Kun puhumme kuvan koosta, tarkoitamme kuvan ulottuvuutta pikseleinä.
Mitkä ovat parhaat koko kuvia web ja Flothemes?
Kun lataat kuvia web on olemassa useita asiat ottaa huomioon, kuten mitä on kuva, käytetään, kuinka suuri olisi tiedostoa on, ja minkälainen kuva tulisi käyttää eri alueita sivuston.,
Kuva Käyttää ja Tyyppi
On olemassa erilaisia tapauksia, joissa haluat käyttää eri kuvakokoja eri alueita sivuston, alla aion kattaa yleisimmät alueet ja mitoitus vaihtoehtoja voit käyttää kunkin. Huomaa, että nämä suositellaan, retina-ystävällinen, mitoitus vaihtoehtoja ottaen huomioon, että suurin osa käyttäjistä sivuston katseluun laitteella, joka on joko mobiili tai 13-15 tuumaa keskimääräinen koko. Kuitenkin, jos olet tavoitteena tehdä sivuston näyttää suuri 27 tuuman näyttö (joka on todella korkea resoluutio), huomaa, että se saattaa olla mitä potentiaaliset asiakkaat käyttävät.,
Jos haluat tarkemmin, miten käyttäjät voivat tarkastella sivuston ja oman salkun, voit tarkistaa laitteiden pääsyn sivuston kautta Google Analytics (siirry Yleisö – Teknologia – Selain & OS – Näytön resoluutio), ja säädä suositeltava koko ottelun vaadittava osa keskimääräinen user.
Täysi Leveys Kuvat
2400x1600px, jpeg, tallentaa web, ja optimoitu
Koko sivuston saatat olla osia, joissa sinun täytyy käyttää täysleveä kuvia, jotka kattavat koko näytön vasemmalta oikealle., Nämä alueet voivat olla sankari kuvia, koko näytön diaesityksiä, banneri kuvia. Varmistaaksesi, että Täysleveät kuvat näyttävät hyvältä kaikissa laitteissa, jotka ovat suuria tai pieniä, suositeltu koko on 2400x1600px. Huomaa, että laitteilla on erilainen suhde kuin mitä kuvaat ja on mahdollista, että kuvat rajataan verkossa katsottaessa. Suosituksena yritä kuvata tavallista laajempia otoksia verkkosisällöllesi, jotta vältät tärkeän kuvasisällön rajaamisen.,
Alla Sisältö Kuvat
Vaaka – max leveys 1500px, jpeg, tallentaa web, ja optimoitu
Vertical – max leveys 1000px, jpeg, tallentaa web, ja optimoitu
sivuston sivut, siellä on osia, jotka koostuvat kuvia, teksti alueet, call to action napit, jne. Pohjimmiltaan nämä ovat osioita, joissa kuvat ovat osa sisällöllistä sisältöä (luetaan ”Ei täysleveyttä”)., Näissä tapauksissa, ellei suositeltava mitoitus on määritelty joitakin Flothemes lohkojen tehdä, voit seurata edellä suosituksia vaaka-ja pystysuunnassa kuvia. Suhteesi perusteella korkeus säätää vastaavasti, kun tallennat kuvia.,näytä galleriat: varmista, että ne ovat kaikki samalla korkeudella suositeltava 1500px, riippumatta, jos ne ovat vaaka-tai pystysuoraan
Blogi Kuvat
- jos olet valmistautuu kuvia ladata sisällä kirjoitus, varmista, että ne ovat kaikki saman levyisiä, suositellaan 1500px, riippumatta, jos ne ovat vaaka-tai pystysuoraan
Vierailla on käytössään seuraavat Kuvat
On olemassa 3 tyyppisiä varustellun kuvia: muotokuva, maisema ja sankari kuvia., Muotokuva ja Maisema-kuva mitoitus noudattaa samaa suositusta kuin Sisällä sisältöä kuvia, vaikka suositeltava koko sankari kuvia on katettu alle täysleveä kuvia. Avain hyvään esikuvaan on johdonmukaisuus. Jos haluat käyttää kaikkia muotokuva varmista, että ne ovat samankokoisia, sama koskee maiseman ja sankari kuvia. Jos käytetään muuraus verkkoon, mitoitus edellä ei ole niin merkityksellinen, Varmista vain, että kuvat ovat vähintään 1000px leveys.,
Jos sinulla on ongelmia kuvan mitoitus varmista katsomaan kuvan mitoitus vaihtoehtoja oman Flothemes asetukset varmista, että ne on määritetty oikein.
tapoja selvittää oikeat kuvakoot webillesi
saattaa olla mahdollista, että yllä mainitut suositellut koot eivät vastaa tarpeitasi tietyn asettelun vuoksi. Jos olet epävarma oikean kuvan ulottuvuus, onneksi, on olemassa muutamia tapoja, jotka voivat auttaa sinua helposti tarkastaa sivuston kuvat, ja tunnistaa oikea mitoitus tarvitaan kunkin osa sivuston.,
on tärkeää muistaa, että verkkokalvolaitteissa kuvapistetiheys on kaksinkertaistettava. Se tarkoittaa, että tarvitset kaksi kertaa enemmän kuvia verkkokalvoille, jotta ne näyttävät nätiltä ja teräviltä. Joten kun olet löytänyt oikean kuvan kokoa jokainen osa sivuston, sinun kannattaa kaksinkertaistaa ne koot, ja vasta sitten viedä ja ladata ne sivustoon.
A., Käyttämällä Kuvan Koko Info-Tiedostotunnistetta
ensimmäinen menetelmä löytää kuvakoot sivuston on käyttämällä Kuvan Koko Info laajennus Chrome (Jos et käytä Chrome tietokoneella, suosittelemme, että käytät sitä, kun luot sivuston). Kun olet asentanut laajennuksen, tämän työkalun avulla voit selvittää kuvakoot jokaisen kuvan elementti sivustossasi.
tutustu kuvia sivuston, tehdä muistiinpanoja, ja sitten tämän tiedon voit räätälöidä valokuvia täsmälleen sopivat tiloihin, koska ne on tarkoitettu teema design., Muista vain, että verkkokalvo-näyttöjen avulla tarvitset kuviesi olevan kaksi kertaa niin suuret kuin aiottu tila. Joten jos sinulla on kuva tilaa 750x500px, retina-sen pitäisi olla 1500x1000px, kun lataaminen WordPress (tai minkä tahansa muun alustan).
esimerkiksi: kun me tarkastaa kuvan, jossa tämän laajennuksen, se on esillä 780x520px, mutta se on todellinen koko on 1560x1040px. Tämä johtuu siitä, että käytämme retina-näyttöä tarkastaessamme kuvaa. Tällöin voit valita kuvan koon mittojen avulla.,
ei-verkkokalvo-laitteella näkyvät ja mitat pysyvät samoina. Tässä tapauksessa kaksinkertaistaa numerot ja ladata kuvia, että koko.
tämän työkalun päärajoitus on, että se ei voi tarkastaa taustakuvia mitoitusta varten. Monissa teemoissa käytetään kuvan HTML-elementtien sijaan taustakuvia, sillä ne ovat kuvien esityksessä joustavampia. Jos et pysty tarkastamaan kuvia, koska ne ovat taustakuvia, voit käyttää seuraavaa menetelmää tarkistaaksesi kuvakoot sivustossasi.
b., Chromella ja Safarilla varustetun Inspector Tool
– työkalun avulla voit myös etsiä sivuston kuvakokoja kehittäjätarkastajan työkalulla. Periaate on sama kuin ennen, tarkastaa eri elementtejä sivuston, ja muistiin kokoja. Kaksinkertainen kuvakoot retina laitteita, ja sitten lähettää ne WordPress, kun ne on optimoitu web-ja otsikoitu oikein SEO.
rajoitukset tämä menetelmä on, että jos sivusto on käyttäen joitakin reagoiva elementtejä REM-arvoja, kuvia voi olla kutistunut, kun käytät tarkastaja samassa ikkunassa., Jos sivusto käyttää myös reagoivia elementtejä, ne ovat suurempia suuremmilla näytöillä ja pienempiä muilla. On parasta käyttää suurempaa näyttöä, jos mahdollista, kun tarkistaa sivuston, joten voit saada tarkin kuvan mitoitus. Joka tapauksessa, käyttämällä tätä menetelmää antaa sinulle hyvän osoituksen koot sivustosi ja voit lähestyä lisäämällä kuvia verkkosivuilla huolellisemmin.
Chrome
Chrome on rakentanut kehittäjätyökaluja, minkä vuoksi se on verkon suosituin selain kehittäjille ja suunnittelijoille., Seuraava video selittää, miten voit tarkastaa kuvia sivuston löytää niiden koot:
Firefox
Firefox, aivan kuten chrome, ne on rakennettu tarkastaja työkalu, jonka avulla voit tarkistaa kuvien sivuston.
Safari
Jos käytät Opera, voit käyttää inspector työkalu nähdä kokoisia kuvia. Tarkista seuraava opas siitä, miten voit ottaa Kehittäjän työkalut käyttöön.,
Nyt voit mennä eri osissa sivuston ja valmistella kuvan mitat.
gallerioissa kannattaa katsoa kuvien korkeutta, sillä ne ovat yleensä korkeuden rajoittamia (joten leveys voidaan asettaa automaattiseksi).
blogikirjoituksia kannattaa huomata, leveys kuvia, koska ne rajoittavat leveys (korkeus voi olla automaattinen).,
loput elementtejä sivuston, sinun pitäisi käyttää edellä kuvatulla menetelmällä saada oikeat mitat, ja ladata ne optimaaliset mitat sivuston.
Nyt kun tiedät mitä mittoja tarvitset kaikki elementit sivuston, kerromme, miten voit optimoida kaikki kuvat koko, se on mitattuna tiedot mitoitus. Kuvien tiedostokoko on myös erittäin tärkeä Webille. Lataaminen paisunut ja raskas kuvien verkkosivuilla rasittaa palvelimen resursseja, hidastaa sivuston, ja vaikutus luoda kielteinen käyttäjäkokemusta.,
Optimoida ja säästää kuvien web
On olemassa useita asioita huomioon, kun optimoimalla ja säästää kuvien web. Sinun pitäisi harkita, mitä tiedostotyyppiä käyttää, JPG, PNG tai GIF riippuen tarkoituksesta. Sinun kannattaa merkitä kuvia oikein SEO tarkoituksiin ja haluat tallentaa ne oikea väri muodossa (sRGB web).
käyttötarkoituksesta riippuen kuvat on tallennettava johonkin seuraavista formaateista .jpg, .gif tai .png. JPG on yleisin muoto tallennettaessa kuvia portfolio verkkosivuilla, ne ovat myös kevyin kooltaan.,
tiedostonimien osalta varmistakaa, että ne sopivat jokaiseen tiettyyn kuvaan tai blogikirjoitukseen. Käytä vain kirjaimia, numeroita, alaviivoja ja yhdysviivoja. Yritä käyttää vain englanninkielisiä kirjaimia. Merkkiä muita kieliä, kysymysmerkkejä, välilyöntiä prosenttimerkin voi ladata väärin tai aiheuttaa odottamatonta toimintaa galleriat tai blogikirjoituksia.
esimerkiksi, jos olet juuri tehnyt boho häät Biltmore Santa Barbara, etiketti kuvia, boho-häät-biltmore-santa-barbara_0001.jpg tämä on paljon enemmän SEO ystävällinen, ja voisi tarjota paremman sijoituksen sivustollesi.,
Optimoimalla kuvia Lightroom
Let ’ s face it, on olemassa paljon erilaisia asetuksia valita ja loputon yhdistelmiä numeroita syöttää. Jos kuitenkin jo tiedät kuvaformaatin ja vaaditut tiedostokuvan mitat, se on paljon helpompaa.
Lightroom, voit saada Vienti-Valintaikkuna 3 tavalla:
Korosta ja Vienti
valitse / valita minkä tahansa valokuvan Lightroom kirjaston ja klikkaa hiiren oikealla kuvan. Valitse pop up-valikosta vientivaihtoehto.,
Tiedoston ja Vienti
toinen tapa on mennä Tiedosto -> Vienti
Käyttämällä pikanäppäintä
kolmas ja nopein tapa on käyttää pikanäppäintä:
shift + command + E (⇧+⌘+E)
Sillä ei ole väliä, miten voit saada siellä. Mikä tahansa näistä toimii, joten valitse helpoin muistaa.,
Lightroom-Vienti-Valintaikkuna
Nyt kun tiedät, miten voit viedä kuvia web, me kattaa 4 kohdat ja erilaisia vaihtoehtoja valita Lightroom-vienti-valintaikkuna, jotta voit viedä optimoida kuvia web.
1. Tiedoston nimi
jokaisessa viennissä voi olla omat uudelleennimeasetukset. Jos pysyt oletuksena vaihtoehto, kuvat on sama nimi kuin alkuperäiset tiedostot, ja tallennetaan JPEG-kuva., Kuitenkin suosittelemme, että olet rasti ”rename” – ruutuun ja valitse yksi monista uudelleennimeäminen malleja, jotka Lightroom tarjoaa muokata vietyjä kuvia. Tiedoston Nimeäminen, me nimettiin kuvan tiedostonimet ”Custom Name – Sequence”, jossa Custom Teksti on tiiviisti yhteydessä meidän blogi nimi tai blogi avainsanoja.
2. Tiedostoasetuksissa
varmista, että Kuvaformaattisi on asetettu JPEG-muotoon. Tämä on kaikkein web-ystävällinen vaihtoehto. Laatusi ei saa olla alle 65., Normaalisti asetamme sen 75: een. Väritilasi on oltava sRGB. Tämä on väri tilaa käytetään web joten se tekee paras. Älä tarkista kohtaa ” rajaa Tiedoston koko:”. Laatikon tarkistaminen heikentäisi tiedostojen laatua merkittävästi.
yhteenvetona, kun säästää kuvia käyttää näitä asetuksia:
- 75% Laatu
- .jpeg-muoto (.png logoille ja kuvakkeille)
- sRGB-värit
3. Kuva Mitoitus
Tarkista laatikko Kokoa Sopivaksi ja valitse Leveys & Korkeus., Laatikossa W: H: määritä W (Leveys pikseleinä) arvoon tarvitaan (1500px blogikirjoituksia, ja 2880 kuvaesityksiä). Jättämällä arvo h (korkeus) tyhjä se asetetaan automaattisesti mitoitus.
gallerioissa voit jättää W: n tyhjäksi ja asettaa H: n (korkeus) 1500px: ään, tämän pitäisi olla optimaalinen useimmille teemoille.
yllä olevat koot on jo optimoitu verkkokalvolaitteille.
4. Ulostulo teroitus
tarkista laatikko vieressä ”terävöittää” ja valitse määrä ”korkea”.
voit nyt viedä kuvat, ja seurata tätä prosessia milloin Viet kuvia.,
Kuvan Laatu Asetukset
valokuvaajan unelma maailma, meidän olisi aina viedä kuvia mahdollisimman laadukkaita. Todellisuudessa huomaamme, että korkealaatuista vientiä ei tarvita. Klo web-koot laadussa on eroja, jotka ovat usein vaikea hahmottaa, ja se tarkoittaa, että voimme vähentää laatua hieman, vähentää tiedoston kokoa huomattavasti.
niin kauan Kuin kuvat eivät ole pehmeä, asiakkaasi ei huomaa eroa sen välillä, mitä kuvan otit ja kuvan thats näkyvät sivuston.
Tämä koskee myös kuvien värejä., Jokainen näyttö on kalibroitu eri tavalla, joten murehtia pieniä väri eroja kuva-selain ja editointi työkalu valinta on ajanhukkaa, ellei se pilaa kuvan laadun.
laatuasteikon yläpäässä tuotot vähenevät. Ero koetun laadun välillä 75% ja 100% laatu-asetus on vaikea nähdä, mutta se kasvattaa tiedoston kokoa huomattavasti.
edellä esitetyn perusteella tuloksia, valitsemalla vienti 65-75 laatu., Se saavuttaa oikean laadun tasapainon ja optimaalisen kuvatiedoston koon.
– Nyt on sinun vuorosi nimetä tiedostoja, viedä ne web, tallentaa ne web ja sinulla on joitakin todella hyvin optimoitu kuvia web.
Bonus vaihe: optimoi kuvat ennen lataamalla ne sivuston
Siellä on yksi viimeinen vaihe, joka voi auttaa rajusti poista ylimääräinen tietoja kuvia ja vähentää tiedoston kokoa – puhumme työkaluja, kuten JPEGmini tai TinyJPG.
nämä työkalut voivat auttaa sinua optimoimaan kuviasi entisestään., Valitse yksi ja käyttää kuvia läpi:
- JPEGmini – tämä sovellus avulla voit pakata kuvia ja pienentää niiden tiedostokokoa ilman mitään näkyvää vaikutusta kuvan laatuun. Jos sinulla on Pro-versio, siellä on laajennus Lightroom, joka tekee tämän automaattisesti vienti – erittäin suositeltava työkalu tahansa valokuvaaja.
- TinyJPG tai TinyPNG – voit suorittaa kuvien kautta tinyJPG tai tinyPNG pakata kuvia edelleen. On 2 rajoituksia kuitenkin., Tämän työkalun ilmaisen version avulla voit pakata vain 20 kuvaa kerrallaan, ja tiedoston koon kuvien tulisi olla alle 5 MB.
– Tämä on viimeinen askel luotaessa nopea web-optimoituja kuvia pitää sivustosi nopeus nopea, ja kuvia näyttää hyvältä!
Lue lisää lukemalla tämä kattava opas siitä, miten optimoida kuvia WordPress-sivusto.
Kuvan SEO
Nyt kun olet saanut kuvat kokoinen, optimoitu ja ladataan sivuston – nyt sinun kannattaa lisätä ALT-tunnisteita! Tämä on viimeinen vaihe luoda optimoitu kuvia SEO tarkoituksiin., ALT-tunniste on mitä hakukoneet käyttävät kuvien lukemiseen. Ilman niitä kuvat ovat netissä aika olemattomia.
onneksi WordPress voit mennä mediakirjastoon lataamisen jälkeen, ja merkitä jokaisen kuvan., Yksi suuri plugin jonka avulla voit tehdä tämän nopeasti, on WP SEO Meta, kun lisätään voit mennä WP SEO Meta > Kuvan Tiedot ja lisätä ALT-Tunnisteita kuvia, jossa se ei ole läsnä, kun olet valmis plugin voidaan de-aktivoida:
On olemassa myös useita lisäosia, jotka lisäävät alt-tageja automaattisesti. Rank Math on hyvä plugin ratkaisu tähän, yksinkertaisesti asentaa sen ja se automaattisesti lisää ALT tageja, kun ladata kuvan kuvaus, tai otsikko.,
Lue tämän kuvan SEO opas löytää lisää vinkkejä ja temppuja ja varmista, että saat irti teidän kuvia hakutuloksissa.
So that ’ s it folks. 3 vaiheet ottaa optimoitu kuvia verkkosivuilla.
Aloita mietitään, kuvan mitat, sitten tallentaa ne oikein web, lisää asianmukaista otsikot ja optimoida niiden kokoa. Lisää lopuksi alt-tunnisteita parantaa SEO kautta WordPress (Sen pitäisi olla mahdollista lisätä ALT-tunnisteita kaikissa content management systems, katso dokumentaatio, selvittää, miten, tai tavoittaa tuki).,
Löytää Optimoimaton Kuvat
Jos olet jo ladannut kuvia sivuston, ja haluat tietää, miten löytää ne, jotka hidastavat sivun, katso seuraava video. Työkaluja, kuten GTMetrix tai Pingdom, tai käyttämällä selaimen konsoli helposti voit löytää kuvia, jotka ovat liian suuria www.
Jos haluat oppia lisää siitä, optimoimalla sivustosi nopeus, katso tämä hyödyllinen opas.
Flothemes
voimaannuttaa
Leave a Reply