Lataa yksi laadukas lähdekuva

Yksi laadukas lähdekuva käynnistää AI Commercen automaattisen kuvankäsittelyn. Tuotekuvan tai tekstieditorin kuvalataus hyväksyy JPEG-, PNG-, GIF-, WebP-, AVIF- ja SVG-kuvia, mutta eri kuvatyypeillä ja hallinnan näkymillä voi olla omat tarkemmat rajansa.

Valitse lähdekuva näin:

• käytä riittävää resoluutiota suurimpaan suunniteltuun esityskokoon;
• säilytä kuvasuhde, jota kyseinen kuva-alue käyttää;
• vältä tarpeettoman suurta tiedostoa;
• käytä läpinäkyvyyttä vain, kun sitä tarvitaan;
• lisää kuva AI Commercen omaan tuote-, kategoria- tai sisältötyönkulkuun.

Kuvan lisääminen ulkoiseen järjestelmään ei yksin takaa optimointia. Optimointi koskee kuvia, jotka jaellaan kaupan oman verkkotunnuksen /images/- tai /uploads/-polusta AI Commercen kuvajakeluputken kautta.

Anna kaupan valita sopiva koko

Anna kaupan valita kuvalle sopiva koko responsiivisen srcset-määrityksen avulla. Nykyinen kauppa muodostaa lähdekuvasta leveysvaihtoehtoja 100, 400, 800, 1200 ja 1700 pikseliä ja ilmoittaa selaimelle, missä näyttökoossa mitäkin vaihtoehtoa tarvitaan.

Selain valitsee vaihtoehdoista laitteen näytölle ja elementin kokoon sopivan tiedoston. Tämä vähentää tarvetta tallentaa käsin erillisiä mobiili-, tabletti- ja työpöytäversioita.

AI Commerce ei muodosta kaikkia mahdollisia koko- ja formaattiyhdistelmiä heti kuvan lataushetkellä. Kuvajakelu luo pyydetyn muunnoksen ensimmäisen sitä tarvitsevan pyynnön yhteydessä ja tallentaa muunnoksen välimuistiin myöhempiä pyyntöjä varten.

Ymmärrä formaatin muunnos

Kuvan formaatin muunnos pystyy tuottamaan JPEG-, WebP-, AVIF- ja PNG-vastauksia. Se voi samalla muuttaa kuvan leveyttä tai korkeutta ja pakata tuloksen. JPEG-muunnoksessa läpinäkyvä tausta täytetään valkoiseksi.

Kuvan URL:n tiedostopääte ei yksin kerro selaimelle toimitettua formaattia. Esimerkiksi alkuperäinen .jpg-kuva voi kuvajakeluputken jälkeen palautua toisessa kuvaformaatissa. Luotettava tieto löytyy HTTP-vastauksen Content-Type-otsakkeesta.

Kauppiaan ei normaalisti tarvitse pakottaa formaattia tai laatua URL-parametreilla. Kauppa lisää tarvitsemansa leveysparametrit ja selain valitsee sille tarjotuista vaihtoehdoista. Integraatioon ei pidä rakentaa omia f-, w-, h- tai q-parametreja ilman erikseen vahvistettua kuvajakelusopimusta.

Hyödynnä välimuistia ja CDN-jakelua

AI Commerce jakaa /images/- ja /uploads/-polkujen kuvat CloudFrontin kautta. Jakelussa tarkistetaan ensin aiemmin muodostettujen kuvien välimuisti. Jos pyydettyä muunnosta ei ole, kuvankäsittelypalvelu hakee alkuperäisen tiedoston, tekee muunnoksen, tallentaa tuloksen muunnosvälimuistiin ja palauttaa sen selaimelle.

Ensimmäinen pyyntö tietylle koko- ja formaattiyhdistelmälle voi siksi olla myöhempiä pyyntöjä hitaampi. Välimuistin tarkkaa säilytysaikaa ei pidä päätellä tästä artikkelista, koska se on ympäristökohtainen käyttöönottoasetus.

Kuvajakelu ei voi muuntaa ulkopuolisen palvelun URL-osoitetta, joka ei kulje AI Commercen /images/- tai /uploads/-reitin kautta. Ulkoisen CMS:n tai kuvapalvelun optimointi kuuluu kyseisen palvelun vastuulle.

Tarkista toimitettu kuva selaimessa

Toimitettu kuva tarkistetaan selaimen kehittäjätyökaluista sen koon ja formaatin varmistamiseksi.

1. Avaa kaupan sivu, jolla kuva näkyy.
2. Avaa selaimen kehittäjätyökalut ja Network-välilehti.
3. Lataa sivu uudelleen.
4. Rajaa pyyntöluettelo kuviin ja valitse tarkistettava kuva.
5. Tarkista pyynnön URL:stä mahdollinen w-parametri.
6. Tarkista vastauksen otsakkeista Content-Type, esimerkiksi image/jpeg, image/webp, image/avif tai image/png.
7. Tarkista siirretty tiedostokoko ja kuvan todelliset mitat.
8. Toista tarkistus kapealla ja leveällä näkymällä.

Pelkkä tiedostopääte ei riitä tarkistukseksi. Jos eri näkymäkoot lataavat aina saman suuren kuvan, kerää sivun URL, kuvan URL, näkymän leveys, Content-Type ja siirretty koko kaupan selvitystä varten.

Huomioi SEO ja saavutettavuus erikseen

Kuvan SEO ja saavutettavuus eivät synny automaattisesta muunnoksesta. Lisää kuvalle kuvaava alt-teksti, käytä sisältöä vastaavaa tiedostonimeä ja varmista, että kuva on indeksoitavalla julkaistulla sivulla.

Älä oleta selain- tai hakukonerobottikohtaista formaattia ilman vastausotsakkeen tarkistusta. Google-kuvahaun saamaa formaattia ei pidä luvata aina WebP-versioksi AVIF-kuvan sijasta, sillä käytös riippuu käytössä olevasta kuvajakelusta.

Tarkista myös, ettei indeksoitavaa kuvaa ole estetty sivun julkaisu-, näkyvyys- tai robots-asetuksilla.

Ratkaise yleiset ongelmat

Yleiset kuvan optimointiongelmat rajataan kuvan polun, pyydetyn koon, vastausformaatin ja välimuistin avulla.

• Kuva ei muutu kooltaan: varmista, että URL on kaupan /images/- tai /uploads/-polussa ja että pyyntö sisältää kaupan muodostaman leveysvaihtoehdon.
• Ulkoinen kuva ei optimoidu: tuo kuva hyväksytyllä AI Commerce -työkalulla tai käytä ulkoisen palvelun omaa kuvankäsittelyä.
• Kuva näyttää pehmeältä suurella näytöllä: tarkista lähdekuvan resoluutio ja ladattu srcset-vaihtoehto.
• PNG-kuvan läpinäkyvyys katoaa: tarkista Content-Type; JPEG-muunnos täyttää taustan valkoiseksi.
• Ensimmäinen lataus on hidas mutta seuraavat nopeita: pyydetty muunnos on voitu luoda ensimmäisellä pyynnöllä ja palvella sen jälkeen välimuistista.