Reach

Grow

Manage

Automate

Reach

Grow

Manage

Automate

Pentingnya Ukuran File Email

Email

1 min read

Pentingnya Ukuran File Email

Email

1 min read

Pentingnya Ukuran File Email

Ketika berbicara tentang ukuran file dalam email, kita sebenarnya membicarakan 3 topik: ukuran file HTML yang dikirim, ukuran aset eksternal, dan ukuran penuh setelah sepenuhnya dimuat. Kita ingin menjaga semua ukuran file ini sekecil mungkin, tetapi berapa ukuran maksimum dan apa yang harus kita targetkan?

Ukuran File HTML

Ukuran file HTML adalah ukuran dari file .html yang sebenarnya dikirim. Ukuran file ini tidak termasuk ukuran gambar yang disertakan, karena gambar-gambar tersebut akan dihubungkan dari file html ini dan diunduh ketika dibuka.

Ukuran maksimum yang kami rekomendasikan adalah 100KB, karena apa pun yang lebih dari itu dapat menyebabkan masalah keterkiriman dan tampilan. Contohnya, Gmail akan memotong html Anda pada 102KB. Pemotongan ini akan menyembunyikan bagian akhir email Anda dan dapat merusak tata letak Anda.

Kebanyakan email seharusnya mudah berada di bawah 50KB. Namun, terkadang peningkatan progresif yang kompleks atau sejumlah besar konten kampanye menyebabkan ukuran file yang lebih besar. Jika ini terjadi, ada beberapa cara untuk membantu mengurangi ukuran file HTML Anda.

  • Bersihkan kode Anda. Email terus berubah dan kami melihat banyak template dengan kode yang usang di dalamnya. Pembersihan cepat dapat menghemat beberapa KBs.

  • Jangan berlebihan dalam pengkodean. Beberapa template yang kami lihat memiliki kode tambahan yang sebenarnya tidak diperlukan. Pelanggaran terburuk adalah menambahkan elemen tabel tambahan. Sebagian besar tata letak dapat dicapai dengan 5-10 tabel, tetapi kami sering melihat kode dengan 30-40 tabel. Lebih sedikit tabel juga memberikan manfaat tambahan menjadikan kode Anda lebih mudah dibaca.

  • Pindahkan beberapa kode dari HTML ke CSS. Belum aman untuk memindahkan semua gaya Anda ke CSS, tetapi jika dilakukan dengan benar, memindahkan beberapa gaya inline ke gaya tertanam dapat membantu mengurangi kode.

  • Sederhanakan desain Anda. Opsi lain adalah kembali ke tahap desain. Email kolom tunggal menggunakan lebih sedikit kode.

  • Minimalkan kode Anda. Meminimalkan kode akan menghapus spasi dan komentar yang tidak perlu. Ini dapat memiliki dampak besar tetapi berhati-hatilah karena banyak ESP menerapkan batas panjang baris maksimum yang dapat memaksa baris baru dan merusak kode.

Ukuran External Assets

Ukuran aset eksternal adalah ukuran semua gambar dan lembar gaya eksternal Anda. Karena ukuran eksternal jarang ditemukan, kita akan lebih fokus pada gambar untuk saat ini.

Jika Anda menggunakan gambar latar belakang dan kueri media, dimungkinkan dalam lingkungan tertentu tidak semuanya akan diunduh untuk setiap pengguna. Namun, ingat meskipun Anda mendefinisikan display:none;  pada elemen <img>, elemen tersebut tetap akan diunduh. Saat ini tidak ada cara untuk menghentikan ini.

Ukuran maksimum untuk sebagian besar gambar adalah 100KB, tetapi jika Anda memiliki satu gambar resolusi tinggi yang besar atau gif animasi, itu bisa mencapai hingga 500KB. Namun, ini lebih tentang ukuran total, yang akan kita bahas di bagian ukuran email yang dimuat sepenuhnya.

Ada banyak sumber daya yang tersedia untuk membantu dalam mengompres ukuran gambar:

  • ImageOptim – di Mac, atau sebagai layanan web

  • Caesium – di Windows

  • CDN – Banyak CDN memiliki optimasi gambar yang sudah terpasang. Beberapa bahkan akan menyesuaikan kompresi tergantung pada bandwidth yang tersedia.

Berikut adalah beberapa tips lain yang kami rekomendasikan:

  • Pastikan Anda menggunakan format yang paling tepat, .jpg untuk foto, .gif untuk grafik, dan .png saat Anda memerlukan saluran alfa

  • Sederhanakan desain Anda. Sekali lagi kembali ke tahap desain untuk menggunakan lebih sedikit gambar, gambar lebih kecil, atau gambar lebih sederhana yang dapat dikompresi ke ukuran lebih kecil.

Ukuran aset eksternal adalah ukuran semua gambar dan lembar gaya eksternal Anda. Karena ukuran eksternal jarang ditemukan, kita akan lebih fokus pada gambar untuk saat ini.

Jika Anda menggunakan gambar latar belakang dan kueri media, dimungkinkan dalam lingkungan tertentu tidak semuanya akan diunduh untuk setiap pengguna. Namun, ingat meskipun Anda mendefinisikan display:none;  pada elemen <img>, elemen tersebut tetap akan diunduh. Saat ini tidak ada cara untuk menghentikan ini.

Ukuran maksimum untuk sebagian besar gambar adalah 100KB, tetapi jika Anda memiliki satu gambar resolusi tinggi yang besar atau gif animasi, itu bisa mencapai hingga 500KB. Namun, ini lebih tentang ukuran total, yang akan kita bahas di bagian ukuran email yang dimuat sepenuhnya.

Ada banyak sumber daya yang tersedia untuk membantu dalam mengompres ukuran gambar:

  • ImageOptim – di Mac, atau sebagai layanan web

  • Caesium – di Windows

  • CDN – Banyak CDN memiliki optimasi gambar yang sudah terpasang. Beberapa bahkan akan menyesuaikan kompresi tergantung pada bandwidth yang tersedia.

Berikut adalah beberapa tips lain yang kami rekomendasikan:

  • Pastikan Anda menggunakan format yang paling tepat, .jpg untuk foto, .gif untuk grafik, dan .png saat Anda memerlukan saluran alfa

  • Sederhanakan desain Anda. Sekali lagi kembali ke tahap desain untuk menggunakan lebih sedikit gambar, gambar lebih kecil, atau gambar lebih sederhana yang dapat dikompresi ke ukuran lebih kecil.

Ukuran aset eksternal adalah ukuran semua gambar dan lembar gaya eksternal Anda. Karena ukuran eksternal jarang ditemukan, kita akan lebih fokus pada gambar untuk saat ini.

Jika Anda menggunakan gambar latar belakang dan kueri media, dimungkinkan dalam lingkungan tertentu tidak semuanya akan diunduh untuk setiap pengguna. Namun, ingat meskipun Anda mendefinisikan display:none;  pada elemen <img>, elemen tersebut tetap akan diunduh. Saat ini tidak ada cara untuk menghentikan ini.

Ukuran maksimum untuk sebagian besar gambar adalah 100KB, tetapi jika Anda memiliki satu gambar resolusi tinggi yang besar atau gif animasi, itu bisa mencapai hingga 500KB. Namun, ini lebih tentang ukuran total, yang akan kita bahas di bagian ukuran email yang dimuat sepenuhnya.

Ada banyak sumber daya yang tersedia untuk membantu dalam mengompres ukuran gambar:

  • ImageOptim – di Mac, atau sebagai layanan web

  • Caesium – di Windows

  • CDN – Banyak CDN memiliki optimasi gambar yang sudah terpasang. Beberapa bahkan akan menyesuaikan kompresi tergantung pada bandwidth yang tersedia.

Berikut adalah beberapa tips lain yang kami rekomendasikan:

  • Pastikan Anda menggunakan format yang paling tepat, .jpg untuk foto, .gif untuk grafik, dan .png saat Anda memerlukan saluran alfa

  • Sederhanakan desain Anda. Sekali lagi kembali ke tahap desain untuk menggunakan lebih sedikit gambar, gambar lebih kecil, atau gambar lebih sederhana yang dapat dikompresi ke ukuran lebih kecil.

Ukuran Email yang Sepenuhnya Dimuat

Ini adalah ukuran gabungan dari semuanya saat email dibuka dan semuanya diunduh. Ini dapat bervariasi tergantung pada lingkungan di mana email dibuka.

Masalah utama di sini adalah waktu yang diperlukan untuk memuat email. Anda mungkin akan menguji email Anda di kantor dengan koneksi yang sangat cepat, tetapi banyak penerima Anda mungkin menggunakan perangkat mobile dengan koneksi 3G yang lambat.

Dengan koneksi yang baik, ukuran email total 1mb akan dimuat dalam hitungan detik dan tampak instan bagi pengguna. Namun, pada koneksi 3G, bisa memerlukan waktu antara 2 hingga 14 detik untuk memuat seluruh email. Dan, jika target audiens Anda kemungkinan besar menggunakan koneksi 2G, unduhan tersebut bisa memerlukan beberapa menit.

Ini juga merupakan masalah potensial bagi pengguna dengan paket data terbatas yang harus mempertimbangkan setiap MB yang mereka unduh. Ini terutama menjadi pertimbangan di negara-negara berkembang.

Beberapa hal yang dapat Anda lakukan untuk membantu:

Pertama, lihat semua rekomendasi yang kami sebutkan mengenai optimasi ukuran html dan gambar
Jika Anda punya waktu, selalu baik untuk bereksperimen dengan kode dan menguji apa yang benar-benar diperlukan dan apa yang dapat Anda tinggalkan. Bereksperimenlah dengan gambar dan coba berbagai cara untuk mengompresnya. Pastikan email Anda terlihat baik dan masuk akal tanpa gambar, sehingga pengguna Anda dapat mulai melihat email Anda sambil menunggu gambar dimuat.

Menggabungkan Semuanya

Dengan ukuran file, seperti halnya banyak hal lainnya, semuanya bermuara pada kompromi. Anda mungkin melakukan pengujian A/B dan menemukan bahwa gambar resolusi tinggi yang besar berfungsi dengan baik. Anda mungkin menemukan bahwa banyak konten terperinci bekerja dengan baik. Anda mungkin menemukan bahwa interaktivitas yang kompleks berfungsi dengan baik. Namun, ketika Anda menyatukan ketiganya ke dalam satu kampanye – Anda mungkin melihat bahwa kinerja mulai menurun.

Bergabunglah dengan Newsletter kami.

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Bergabunglah dengan Newsletter kami.

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Bergabunglah dengan Newsletter kami.

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Logo Pinterest
Uber logo
Square logo
Logo Adobe
Logo Meta
Logo PayPal

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Uber logo
Square logo
Logo Adobe
Logo Meta

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.

Uber logo
Logo Adobe
Logo Meta

Perusahaan

Newsletter

Tetap terinformasi dengan Bird melalui pembaruan mingguan ke kotak masuk Anda.

Dengan mengirimkan, Anda setuju Bird dapat menghubungi Anda tentang produk dan layanan kami.

Anda dapat berhenti berlangganan kapan saja. Lihat Pernyataan Privasi Bird untuk detail tentang pemrosesan data.