I optimeiddio lluniau ar gyfer eich gwefan, newidiwch faint pob un i'r maint mae'n cael ei ddangos go iawn, cywasgwch o, cadwch o mewn fformat modern fel WebP, a rhowch enw a disgrifiad clir iddo. O'i wneud yn iawn, mae llun 5MB o'ch ffôn yn troi'n tua 150 i 300KB ac yn edrych yr un fath ar y sgrin.
Lluniau ydy'r peth trymaf ar wefan busnes bach fel arfer. Eu cael nhw'n iawn ydy'r ffordd gyflymaf o wneud gwefan araf yn gyflymach.
Pam mae'n bwysig
Mae llun yn syth o ffôn modern yn aml yn 4,000 picsel o led neu fwy a sawl megabeit. Gall eich gwefan ei ddangos 800 neu 1,600 picsel o led. Mae pob ymwelydd yn dal i lawrlwytho'r ffeil lawn, ar ba bynnag signal sydd ganddyn nhw. Mae deg llun fel hynny ar un dudalen yn dudalen does neb yn aros amdani.
Mae Google yn mesur hyn hefyd. Mae lluniau mawr yn un o'r rhesymau mwyaf cyffredin pam mae tudalen yn methu Core Web Vitals, sy'n bwydo i sut mae'n rhestru tudalennau. Gweler sut i gyflymu'ch gwefan am yr achosion eraill.
Cam 1: newid y maint i'r maint mae'n cael ei ddangos
Darganfyddwch pa mor llydan mae pob llun yn ymddangos ar eich gwefan, a newid ei faint i tua hynny, gan ganiatáu ychydig yn ychwanegol ar gyfer sgriniau miniog. Fel canllaw bras:
| Lle mae'n cael ei ddefnyddio | Lled i'w gadw |
|---|---|
| Baner neu bennawd lled llawn | 1,600 i 2,000 picsel |
| Llun yn y prif destun | 1,000 i 1,200 picsel |
| Llun bach mewn oriel | 400 i 600 picsel |
| Logo | Defnyddiwch SVG os gallwch chi, fel arall dwbl y maint mae'n cael ei ddangos |
Gallwch chi newid maint ar gyfrifiadur efo'r apiau lluniau sydd wedi'u cynnwys (Photos ar Windows, Preview ar Mac), neu efo offeryn am ddim fel Squoosh.
Cam 2: ei gywasgu
Mae cywasgu'n gwneud y ffeil yn llai drwy dynnu manylion fydd eich llygad ddim yn sylwi arnyn nhw. Ar gyfer lluniau, mae gosodiad ansawdd o tua 75 i 80 y cant fel arfer yn amhosib ei wahaniaethu oddi wrth y gwreiddiol. Mae Squoosh yn gadael i chi gymharu ochr yn ochr wrth i chi lusgo'r llithrydd.
Cam 3: defnyddio'r fformat iawn
- WebP ar gyfer lluniau a'r rhan fwyaf o ddelweddau. Yn llai na JPEG ar yr un ansawdd, ac yn cael ei gefnogi gan bob porwr modern.
- AVIF sy'n llai eto, ac yn cael ei gefnogi'n eang erbyn hyn, er nad ydy rhai hen feddalwedd yn gallu ei agor.
- JPEG sy'n iawn os nad ydy system eich gwefan yn derbyn WebP.
- PNG dim ond ar gyfer graffeg efo ymylon miniog neu dryloywder, fel sgrinluniau neu logos. Byth ar gyfer lluniau.
- SVG ar gyfer logos ac eiconau, lle gall eich dylunydd roi un i chi.
Cam 4: ei enwi a'i ddisgrifio
Cyn uwchlwytho, ailenwch y ffeil o IMG_4827.jpg i rywbeth sy'n dweud be ydy o: estyniad-cegin-abermaw.webp. Mae'n arwydd bach i Google am be mae'r llun yn ei ddangos.
Wedyn ychwanegwch destun amgen (alt text) pan ydych chi'n ei uwchlwytho: disgrifiad byr, plaen o'r llun, fel "Cegin dderw newydd efo llawr carreg". Mae darllenwyr sgrin yn ei ddarllen yn uchel i bobl sy'n methu gweld y llun, ac mae Google yn ei ddefnyddio i ddeall y llun. Disgrifiwch o; peidiwch â'i stwffio efo geiriau allweddol.
Cam 5: gadael i luniau lwytho pan mae eu hangen
Does dim angen i luniau ymhellach i lawr y dudalen lwytho nes bod rhywun yn sgrolio atyn nhw. Llwytho diog (lazy loading) ydy'r enw ar hyn. Mae'r rhan fwyaf o systemau gwefannau modern yn ei wneud yn awtomatig. Os ydych chi ar WordPress, mae wedi'i gynnwys ar gyfer y rhan fwyaf o luniau. Yr unig eithriad ydy'r prif lun ar dop y dudalen, a ddylai lwytho'n syth.
Os ydych chi ar Wix, Squarespace neu WordPress
- Mae Wix a Squarespace yn newid maint a throsi lluniau i chi, i ryw raddau. Mae'n dal yn help uwchlwytho ffeiliau o faint call yn lle lluniau ffôn maint llawn.
- Mae WordPress yn creu sawl maint o bob llun sy'n cael ei uwchlwytho. Gall ategyn optimeiddio lluniau eu cywasgu a'u trosi i WebP yn awtomatig.
Trefn sydyn ar gyfer pob llun newydd
- Newid y maint i'r lled y bydd yn cael ei ddangos
- Cywasgu i ansawdd o tua 75 i 80 y cant
- Cadw fel WebP
- Ei ailenwi i ddisgrifio be mae'n ei ddangos
- Ychwanegu testun amgen pan ydych chi'n ei uwchlwytho
Isio gwybod ydy lluniau'n arafu'ch gwefan? Mae'r gwiriad gwefan am ddim yn rhedeg prawf cyflymder Google ar eich gwefan ac yn dweud wrthych chi, mewn Cymraeg clir, be sy'n werth ei drwsio gyntaf.
