Ukuran Gambar Buletin Email yang Tepat

Jaga agar setiap gambar buletin di bawah 100 KB, atur ukuran gambar menjadi dua kali lebar tampilannya, dan gunakan JPG atau PNG daripada WebP. Gmail memotong pesan apa pun yang Hypertext Markup Language (HTML) miliknya melebihi sekitar 102 KB, lalu mengganti sisanya dengan tautan Lihat seluruh pesan.

Sebagian besar pengirim mengetahui batas pemotongan ini dengan cara yang sulit, biasanya ketika tautan berhenti berlangganan dan piksel pelacak jatuh di bawah batas potongan. Gambar sering kali menjadi penyebabnya, baik karena disematkan langsung di dalam pesan atau karena markup di sekitarnya telah membengkak selama beberapa kampanye.

Apa yang sebenarnya diukur oleh batas pemotongan Gmail

Gmail mengukur sumber HTML dari pesan tersebut, bukan gambar yang ditautkannya. Buletin yang menautkan ke 10 foto besar tetap berada di dalam batas aman, sementara pesan dengan gaya inline yang padat dan gambar yang disematkan tidak demikian.

Perbedaan ini penting karena solusinya berbeda. Gambar yang ditautkan tidak dihitung dalam angka 102 KB tersebut, sehingga pemotongan biasanya disebabkan oleh gaya inline yang berulang, parameter pelacakan yang panjang pada setiap tautan, atau gambar yang disematkan sebagai data base64. Menghapus gambar yang disematkan dan merapikan markup akan mengatasi masalah pemotongan, sementara mengompresi foto yang ditautkan akan mengatasi waktu pemuatan.

Ukuran gambar yang direkomendasikan untuk email

Desain badan email dengan lebar 600 piksel dan ekspor gambar pada 1200 piksel untuk layar dengan kepadatan tinggi. Standar 600 piksel telah bertahan selama bertahun-tahun karena cocok dengan setiap panel pratinjau klien desktop tanpa perlu menggulir secara horizontal.

Menggandakan lebar ekspor sudah cukup untuk layar dengan kepadatan tinggi. Mengekspor pada 3 kali lebar tampilan hanya akan menambah ukuran file tanpa membuat tampilannya lebih baik di klien email mana pun, dan email adalah satu-satunya saluran di mana setiap kilobyte diunduh langsung di ponsel.

Mengapa WebP masih menjadi pilihan yang salah dalam email

Dukungan klien email untuk WebP masih belum merata, dan Outlook khususnya tetap tidak dapat diprediksi. Email adalah salah satu dari sedikit tempat yang tersisa di mana format lama yang aman adalah pilihan yang tepat.

Semua peramban web mendukung WebP, yang membuat orang berasumsi bahwa klien email juga demikian. Outlook desktop merender pesan dengan mesin yang sama sekali berbeda, dan beberapa sistem email perusahaan menghapus atau gagal memuat format yang tidak mereka kenali. Gambar yang rusak dalam buletin jauh lebih merugikan daripada penghematan file 30 persen yang ditawarkan WebP, sehingga JPG dan PNG tetap menjadi pilihan yang benar di sini.

Pilihan format di dalam email

Gunakan JPG for foto dan PNG untuk logo, tombol, dan apa pun yang berisi teks. Aturannya sama seperti di web, dan dampaknya lebih terlihat karena gambar email sering kali berukuran kecil.

• JPG untuk foto produk, gambar header, dan gambar apa pun dari pemandangan nyata.
• PNG untuk logo, ikon, dan grafis dengan warna datar atau tepi teks yang tajam.
• GIF Animasi hanya jika animasi tersebut memiliki arti penting, dan dijaga agar tetap di bawah 1 MB.
• Hindari WebP dan AVIF, karena keduanya tidak merender secara andal di semua klien email.
• Hindari SVG sama sekali, karena sebagian besar klien email memblokirnya karena alasan keamanan.

Gambar diblokir secara default di banyak klien

Banyak penerima melihat email Anda dengan gambar dinonaktifkan, sehingga pesan harus tetap dapat dipahami sebagai teks. Sistem email perusahaan dan pengguna yang sadar privasi sama-sama memblokir gambar jarak jauh hingga pembaca memilih untuk memuatnya.

Tulis teks alt pada setiap gambar, karena gambar yang diblokir akan menampilkan teks tersebut sebagai gantinya. Jangan pernah menempatkan informasi penting, termasuk penawaran, batas waktu, atau ajakan bertindak, hanya di dalam gambar saja. Buletin yang dibuat seluruhnya dari satu grafis besar akan menjadi persegi panjang kosong bagi sebagian besar daftar penerima, dan juga berkinerja buruk pada pembaca layar.

Cara menyiapkan gambar buletin

Untuk menjaga buletin tetap cepat dan mudah dibaca, ikuti 7 langkah ini.

1. Desain email dengan lebar 600 piksel, yang dapat dirender oleh setiap klien desktop tanpa perlu menggulir.
2. Pangkas setiap gambar ke bentuk persis yang akan ditempatinya dalam tata letak.
3. Ubah ukuran menjadi dua kali lebar tampilan, dan tidak lebih dari itu.
4. Konversikan ke JPG untuk foto atau PNG untuk grafis yang berisi teks.
5. Kompres setiap file hingga target di bawah 100 KB.
6. Host gambar di platform pengiriman Anda atau server Anda sendiri daripada menyematkannya di dalam pesan.
7. Kirim tes ke Gmail, Outlook, dan ponsel sebelum menjadwalkan kampanye.

Total ukuran email lebih penting daripada satu gambar saja

Jaga agar seluruh pesan di bawah 600 KB termasuk gambar, karena pelanggan membuka buletin di ponsel, sering kali dengan koneksi yang buruk. Buletin berukuran 5 MB akan dimuat dengan lambat dan ditutup sebelum sempat dirender.

Hitung gambar sebelum mengompresi apa pun. Buletin yang membawa 12 foto masing-masing berukuran 100 KB sudah mencapai 1,2 MB, yang menunjukkan bahwa tata letak tersebut membutuhkan lebih sedikit gambar, bukan gambar yang lebih kecil. Mengurangi jumlah gambar biasanya meningkatkan kinerja dan keterbacaan, karena buletin panjang yang padat gambar jarang dibaca hingga selesai.

Mode gelap mengubah tampilan gambar

Beberapa klien membalikkan atau menyesuaikan warna dalam mode gelap, dan logo dengan latar belakang putih akan menjadi persegi panjang terang dalam pesan yang gelap. Uji setiap kampanye dalam mode gelap sebelum mengirimkannya.

Gunakan file PNG dengan latar belakang transparan untuk logo dan ikon agar dapat duduk dengan benar di warna apa pun. Hindari gambar dengan latar belakang putih jika desain mengasumsikan halaman di belakangnya juga berwarna putih. Foto umumnya aman, karena klien jarang mengubah konten foto, sedangkan grafis datar dan gambar teks adalah tempat masalah mode gelap sering muncul.

Layar Retina dan ketajaman gambar

Ekspor pada dua kali lebar tampilan agar gambar tetap tajam di layar dengan kepadatan tinggi, lalu kompres lebih kuat untuk mengimbangi piksel ekstra. Gambar 1200 piksel pada kualitas 70 biasanya terlihat lebih baik dan berukuran lebih ringan daripada gambar 600 piksel pada kualitas 95.

Atur atribut lebar dalam markup ke ukuran tampilan, bukan ukuran file, sehingga klien merender gambar pada 600 piksel sambil tetap menggunakan detail ekstra tersebut. Mengabaikan atribut lebar menyebabkan beberapa klien menampilkan gambar pada ukuran piksel penuhnya, yang merusak tata letak di desktop.

Memeriksa kampanye sebelum dikirim

• Kirim tes ke Gmail, Outlook, Apple Mail, dan setidaknya satu ponsel.
• Lihat tes dengan gambar diblokir, untuk memastikan pesan tetap masuk akal.
• Pastikan pesan tidak terpotong di Gmail, yang menunjukkan tautan Lihat seluruh pesan pada potongan tersebut.
• Pastikan setiap gambar memiliki teks alt yang menjelaskan apa yang ditampilkannya.
• Periksa perenderan mode gelap, terutama untuk logo dan grafis datar.
• Jumlahkan total ukuran semua gambar dan pastikan tetap di bawah 600 KB.

Menyiapkan kampanye dalam satu kelompok

Proses setiap gambar dalam buletin secara bersamaan sehingga seluruh kampanye berbagi satu spesifikasi yang sama. Buletin biasanya membawa 5 hingga 15 gambar, dan pengirim mingguan menyiapkan ratusan gambar dalam setahun.

Atur lebar dan target KB sekali, masukkan gambar-gambarnya, dan setiap file akan kembali dengan spesifikasi yang cocok. Semuanya berjalan di dalam peramban Anda pada prosesor Anda sendiri, sehingga penawaran yang belum diumumkan, daftar pelanggan yang dirender sebagai gambar, dan pekerjaan kampanye klien tidak pernah sampai ke server. Bagi agensi yang sedang menyiapkan peluncuran, menjaga file-file tersebut tetap lokal menghindari kebocoran yang tidak sebanding dengan penghematan kompresi apa pun.

Simpan folder templat berisi placeholder dengan ukuran yang benar untuk setiap blok tata letak yang berulang, seperti header, baris produk 2 kolom, dan logo footer. Pengirim mingguan menggunakan kembali 4 atau 5 bentuk yang sama tanpa batas waktu, dan mencocokkan karya seni baru ke spesifikasi yang ada membutuhkan waktu lebih sedikit daripada menentukan dimensi lagi untuk setiap kampanye.