Sukat ng Larawan sa Email Newsletter

Panatilihing mababa sa 100 KB ang bawat larawan sa newsletter, i-size ang mga larawan sa dalawang beses ng lapad ng display ng mga ito, at gumamit ng JPG o PNG sa halip na WebP. Pinuputol ng Gmail ang anumang mensahe na ang Hypertext Markup Language (HTML) ay lumampas sa humigit-kumulang 102 KB, at pinapalitan ang natitira ng isang View entire message link.

Karamihan sa mga nagpapadala ay natutuklasan ang limitasyon sa pagputol sa mahirap na paraan, kadalasan kapag ang link sa pag-unsubscribe at ang tracking pixel ay napasama sa naputol na bahagi. Ang mga larawan ay madalas ang dahilan, maaaring dahil direkta itong naka-embed sa mensahe o dahil lumaki ang markup sa paligid ng mga ito sa paglipas ng ilang mga kampanya.

Ano talaga ang sinusukat ng limitasyon sa pagputol ng Gmail

Sinusukat ng Gmail ang mismong HTML source ng mensahe, hindi ang mga larawang naka-link dito. Ang isang newsletter na nagli-link sa 10 malalaking litrato ay nananatiling pasok sa limitasyon, habang ang isang mensaheng may mabigat na inline styling at mga naka-embed na larawan ay hindi.

Mahalaga ang pagkakaibang ito dahil magkaiba ang solusyon. Ang mga naka-link na larawan ay hindi binibilang sa 102 KB na sukat, kaya ang pagputol ay karaniwang dulot ng paulit-ulit na inline styles, mahahabang tracking parameter sa bawat link, o mga larawang naka-embed bilang base64 data. Ang pag-alis ng mga naka-embed na larawan at pagbawas sa markup ang lumulutas sa clipping, habang ang pag-compress ng mga naka-link na litrato ang lumulutas sa bilis ng pag-load.

Mga inirerekomendang sukat ng larawan para sa email

Idisenyo ang katawan ng email sa lapad na 600 pixels at i-export ang mga larawan sa 1200 pixels para sa mga screen na may mataas na density. Ang pamantayang 600 pixel ay nanatili sa loob ng maraming taon dahil sakto ito sa bawat preview pane ng desktop client nang hindi nangangailangan ng horizontal scrolling.

Sapat na ang pagdoble sa lapad ng pag-export para sa mga display na may mataas na density at huminto na roon. Ang pag-export nang 3 beses sa lapad ng display ay nagdaragdag lamang ng bigat na hindi naman ipinapakita nang mas maayos ng anumang email client, at ang email ang tanging channel kung saan ang bawat kilobyte ay dina-download sa telepono.

Bakit maling pagpipilian pa rin ang WebP sa email

Hindi pa rin pare-pareho ang suporta ng mga email client para sa WebP, at partikular na hindi mahulaan ang Outlook. Ang email ay isa sa ilang natitirang lugar kung saan ang mga ligtas at lumang format ang tamang gamitin.

Sinusuportahan ng lahat ng web browser ang WebP, na nagiging dahilan upang ipalagay ng mga tao na sinusuportahan din ito ng mga email client. Ang Desktop Outlook ay nagre-render ng mga mensahe gamit ang ganap na naiibang engine, at ilang mga corporate mail system ang nagtatanggal o nabibigo sa mga format na hindi nila kinikilala. Ang isang sirang larawan sa isang newsletter ay mas magastos kaysa sa 30 porsiyentong matitipid sa laki ng file na maibibigay ng WebP, kaya nananatiling tama ang JPG at PNG dito.

Pagpili ng format sa loob ng email

Gumamit ng JPG para sa mga litrato at PNG para sa mga logo, button, at anumang naglalaman ng teksto. Pareho ang patakaran sa web, at mas kapansin-pansin ang mga epekto dahil kadalasang maliit ang mga larawan sa email.

• JPG para sa mga litrato ng produkto, larawan sa header, at anumang larawan ng totoong eksena.
• PNG para sa mga logo, icon, at graphics na may flat na kulay o matatalas na gilid ng teksto.
• Animated GIF lamang kung ang animation ay may mahalagang kahulugan, at panatilihing mababa sa 1 MB.
• Iwasan ang WebP at AVIF, dahil alinman sa mga ito ay hindi mapagkakatiwalaang nagre-render sa lahat ng mail client.
• Iwasan nang tuluyan ang SVG, dahil hinaharang ito ng karamihan sa mga email client para sa mga kadahilanang panseguridad.

Naka-block ang mga larawan bilang default sa maraming client

Maraming tatanggap ang nakakakita sa iyong email nang naka-off ang mga larawan, kaya dapat gumagana pa rin ang mensahe bilang simpleng teksto. Parehong hinaharang ng mga corporate mail system at mga user na nagpapahalaga sa privacy ang mga remote na larawan hanggang sa piliin ng mambabasa na i-load ang mga ito.

Maglagay ng alt text sa bawat larawan, dahil ang mga naka-block na larawan ay nagpapakita ng tekstong iyon bilang kapalit. Huwag kailanman ilagay ang mahahalagang impormasyon, kabilang ang alok, ang deadline, o ang call to action, sa loob lamang ng isang larawan. Ang isang newsletter na binuo mula lamang sa isang malaking graphic ay nagiging isang blangkong parihaba para sa malaking bahagi ng listahan, at hindi rin ito gumagana nang maayos sa mga screen reader.

Paano ihanda ang mga larawan sa newsletter

Upang mapanatiling mabilis at madaling basahin ang isang newsletter, sundin ang 7 hakbang na ito.

1. Idisenyo ang email sa lapad na 600 pixels, na ipinapakita ng bawat desktop client nang walang scrolling.
2. I-crop ang bawat larawan sa eksaktong hugis na gagamitin nito sa layout.
3. I-resize sa dalawang beses ng lapad ng display, at huwag nang lalampas pa roon.
4. I-convert sa JPG para sa mga litrato o PNG para sa mga graphic na naglalaman ng teksto.
5. I-compress ang bawat file sa target na mas mababa sa 100 KB.
6. I-host ang mga larawan sa iyong sending platform o sarili mong server sa halip na i-embed ang mga ito sa mensahe.
7. Magpadala ng pagsubok sa Gmail, Outlook, at isang telepono bago iiskedyul ang kampanya.

Mas mahalaga ang kabuuang bigat ng email kaysa sa alinmang solong larawan

Panatilihing mababa sa 600 KB ang buong mensahe kasama ang mga larawan, dahil binubuksan ng mga subscriber ang mga newsletter sa mga telepono, kadalasan sa mahihinang koneksyon. Ang isang 5 MB na newsletter ay mabagal mag-load at naisasara bago pa man ito maipakita.

Bilangin ang mga larawan bago mag-compress ng anuman. Ang isang newsletter na may 12 litrato na 100 KB bawat isa ay 1.2 MB na agad, na nagpapahiwatig na mas kaunting mga larawan ang kailangan ng layout sa halip na mas maliliit lamang. Ang pagbabawas ng bilang ng larawan ay karaniwang nagpapabuti sa bilis at pagiging madaling basahin, dahil ang mahahabang newsletter na puno ng larawan ay bihirang binabasa hanggang sa dulo.

Binabago ng dark mode ang hitsura ng mga larawan

Ilang client ang nagbabaligtad o nag-aayos ng mga kulay sa dark mode, at ang isang logo sa puting background ay nagiging maliwanag na parihaba sa isang madilim na mensahe. Subukan ang bawat kampanya sa dark mode bago ipadala.

Gumamit ng mga PNG file na may transparent na background para sa mga logo at icon upang maayos itong lumapat sa alinmang kulay. Iwasan ang mga larawang may puting background kung saan ipinapalagay ng disenyo na puti rin ang pahina sa likod ng mga ito. Ligtas sa pangkalahatan ang mga litrato, dahil bihirang baguhin ng mga client ang nilalamang photographic, habang sa mga flat na graphic at mga larawang may teksto karaniwang lumilitaw ang mga problema sa dark mode.

Mga Retina screen at linaw ng larawan

I-export sa dalawang beses ng lapad ng display upang manatiling matalas ang mga larawan sa mga high density screen, pagkatapos ay i-compress nang mas mabigat upang mabawi ang mga dagdag na pixel. Ang isang 1200 pixel na larawan sa quality 70 ay karaniwang mas maganda ang hitsura at mas magaan kaysa sa isang 600 pixel na larawan sa quality 95.

Itakda ang width attribute sa markup sa sukat ng display sa halip na sa sukat ng mismong file, upang mai-render ng client ang larawan sa 600 pixels habang ginagamit ang karagdagang detalye. Ang pag-alis sa width attribute ay nagiging sanhi upang ipakita ng ilang client ang larawan sa buong laki ng pixel nito, na sumisira sa layout sa desktop.

Pagsusuri sa isang kampanya bago ito ipadala

• Magpadala ng pagsubok sa Gmail, Outlook, Apple Mail, at kahit isang telepono.
• Tingnan ang pagsubok nang naka-block ang mga larawan, upang kumpirmahing may saysay pa rin ang mensahe.
• Tiyaking hindi naputol ang mensahe sa Gmail, na nagpapakita ng link na View entire message sa dulo ng hiwa.
• Kumpirmahing may alt text ang bawat larawan na naglalarawan kung ano ang ipinapakita nito.
• Suriin ang hitsura sa dark mode, lalo na para sa mga logo at flat na graphic.
• Pagsamahin ang kabuuang bigat ng lahat ng larawan at kumpirmahing nananatili itong mababa sa 600 KB.

Pagpapanatili ng isang kampanya sa iisang batch

Iproseso nang sabay-sabay ang bawat larawan sa newsletter upang magbahagi ang buong kampanya ng iisang detalye. Karaniwang naglalaman ang isang newsletter ng 5 hanggang 15 larawan, at ang isang lingguhang nagpapadala ay naghahanda ng daan-daan sa loob ng isang taon.

Itakda ang lapad at ang target na KB nang isang beses, ilagay ang mga larawan, at ang bawat file ay magkakatugmang maibabalik. Ang lahat ay tumatakbo sa loob ng iyong browser sa sarili mong processor, kaya ang mga hindi pa inaanunsyong alok, mga listahan ng subscriber na ginawang larawan, at gawaing pang-kampanya ng kliyente ay hindi kailanman nakakarating sa isang server. Para sa isang ahensyang naghahanda ng launch, ang pagpapanatiling lokal ng mga file na iyon ay umiiwas sa pagbubunyag na hindi kayang bigyang-katwiran ng anumang matitipid sa compression.

Magtabi ng template folder ng mga placeholder na may tamang sukat para sa bawat paulit-ulit na layout block, tulad ng header, ang hilera ng produkto na may 2 hanay, at ang logo sa footer. Ang mga lingguhang nagpapadala ay muling gumagamit ng parehong 4 o 5 hugis, at ang pagtutugma ng bagong artwork sa isang umiiral nang detalye ay mas mabilis kaysa sa pagpapasya muli ng mga sukat para sa bawat kampanya.