Tambah Tulisan di Foto

Pilih foto, ketik teks, dan tulisan tampil di ukuran aslinya

Tambah Tulisan di Foto menumpuk teks di atas foto yang sudah Anda ambil, lalu menyimpannya sebagai satu gambar dengan lebar dan tinggi yang sama seperti foto aslinya. Anda bisa memasang sampai delapan teks. Setiap teks punya font, ukuran, kemiringan, warna, garis tepi, dan latar sendiri. Seret teks di panggung dengan jari atau mouse, ubah ukurannya dengan titik di kanan bawah, dan miringkan dengan titik di bagian atas.

Kegagalan yang paling sering terjadi saat memberi tulisan pada foto adalah teks yang tenggelam di pola foto. Karena itu Cek keterbacaan di bawah panggung menaruh rentang kecerahan foto di belakang teks dan warna teks pada satu batang, lalu menilai keterbacaannya dengan rasio kontras dari pedoman aksesibilitas web (WCAG). Jika hasilnya “tenggelam”, satu tombol saja sudah cukup untuk mencoba garis tepi, kotak latar, atau pergantian warna teks. Foto dan teks hanya diproses di browser ini dan tidak dikirim ke server.

Kapan dipakai

• Memberi lokasi dan tanggal pada foto liburan atau kegiatan harian: judul besar di atas dan tanggal kecil di kanan bawah adalah dua teks contoh pada layar pertama.
• Menulis harga atau promo pada foto produk: gaya label kuning memasang kotak di belakang teks, sehingga harga tetap terbaca walau fotonya ramai.
• Membuat gambar pengumuman dengan cepat: gaya pita subtitel memasang pita semi-transparan selebar foto dan menaruh teks di atasnya. Tampilannya seperti subtitel video, cocok untuk satu baris informasi.
• Menandai foto sendiri dengan nama: watermark berulang menyebar teks tipis secara miring ke seluruh foto, sehingga memotong satu sudut saja tidak menghilangkannya.
• Membuat kesan papan nama atau poster: teks vertikal menumpuk huruf dari atas ke bawah, satu huruf per kotak. Hasilnya cocok untuk kata pendek seperti nama toko atau judul.

Urutan pengerjaan

1. Pilih foto: pilih dengan tombol, seret file foto ke panggung edit, atau tempel gambar yang sudah disalin. Di awal sudah ada foto contoh dan dua teks contoh, jadi hasilnya bisa dilihat lebih dulu.
2. Ketik teks: pilih chip teks, lalu ketik di kolom isian. Ganti baris untuk membuat beberapa baris; satu teks maksimal 300 karakter. Tombol Tambah teks membuat teks baru yang mewarisi tampilan teks saat ini dan muncul sedikit lebih bawah.
3. Pilih tampilan: enam gaya adalah gambar hasil memasang tiap gaya pada potongan foto di posisi teks saat ini. Pilih yang disukai, lalu sesuaikan font, ukuran, dan warna.
4. Atur posisi: seret di panggung, atau tekan salah satu dari 9 kotak posisi untuk menempelkan teks pada jarak 5% sisi pendek dari tepi. Saat didekatkan ke tengah, garis bantu muncul dan teks menempel tepat di tengah.
5. Periksa lalu simpan: cek hasil Cek keterbacaan dan peringatan “keluar dari foto”, lalu simpan sebagai PNG, JPG, atau WebP. Tombol simpan dan tanda keterbacaan ada tepat di bawah panggung, dan di perangkat yang mendukung berbagi, tombol Bagikan bisa langsung mengirimnya.

Cara mengukur apakah tulisan di foto terbaca

WCAG 2.2 butir 1.4.3 menetapkan rasio kontras teks dan gambar teks minimal 4,5 : 1, dan minimal 3 : 1 untuk teks besar. Rasio kontras dihitung dari luminans relatif dua warna, dengan L1 untuk yang lebih terang dan L2 untuk yang lebih gelap: (L1 + 0,05) ÷ (L2 + 0,05). Hasilnya dari 1 (warna sama) sampai 21 (hitam dan putih). Namun latar sebuah foto bukan satu warna, jadi mengukur satu titik saja membuat penilaian berubah-ubah.

Alat ini mengambil sampai sekitar 5.000 piksel foto secara merata dari dalam blok teks, mengukur rasio kontras tiap piksel terhadap warna teks, lalu menampilkan nilai pada titik 10% terendah. Nilai itu dekat dengan tempat yang paling merugikan, tetapi tidak terguncang oleh beberapa piksel yang janggal. Tampilannya dibulatkan ke bawah di desimal pertama, dan penilaiannya memakai angka yang tampil itu. Nilai 4,49 tampil sebagai 4,4 dan dinilai belum mencapai 4,5.

Seperti terlihat di tabel, teks putih jauh di bawah standar di atas langit terang atau senja. Jika tebal garis tepi diatur 3% ukuran huruf atau lebih, sekeliling huruf berwarna garis tepi, sehingga penilaian berpindah ke kontras antara warna teks dan warna garis tepi. Teks putih dengan garis tepi hitam menghasilkan 18,8 : 1 di latar apa pun. Jika kotak latar dipasang, warna kotak dicampur ke foto sebesar kepekatannya, lalu hasilnya dijadikan latar untuk pengukuran ulang. Opasitas yang menipiskan seluruh teks juga dicampurkan apa adanya ke warna teks dan warna kotak.

Batang pemeriksaan berwarna hitam di kiri dan putih di kanan, diurutkan menurut kecerahan yang tampak oleh mata (CIE L*). Pita oranye adalah rentang 10% sampai 90% kecerahan foto di belakang teks, garis tegak di dalam pita adalah nilai tengah, titik bertepi putih adalah warna teks, dan cincin tebal adalah warna garis tepi. Jika titik berada di dalam pita, ada latar dengan kecerahan sama seperti teks di belakangnya, dan di tempat itu teks tampak menghilang.

Kapan memakai garis tepi, bayangan, kotak, dan pita

Menyalakan ketiga cara sekaligus dengan kuat justru membuat tampilan kotor. Naikkan garis tepi sedikit demi sedikit dari 0 sampai pemeriksaan berubah menjadi “mudah dibaca”. Jika foto masih terlalu ramai, beralihlah ke kotak atau pita.

Ukuran huruf adalah persentase dari lebar foto

Ukuran huruf ditentukan bukan dalam px, melainkan dalam % dari lebar foto. Huruf 48 px yang sama tampak besar di foto selebar 1.000 px, tetapi kecil di foto selebar 4.000 px. Dengan persentase, perbandingan antara pratinjau dan ukuran asli yang disimpan sama, dan porsi teks di layar tetap terjaga walau fotonya diganti. Jarak antarbaris adalah 1,25 kali ukuran huruf, tebal garis tepi adalah persentase dari ukuran huruf, dan ruang kosong kotak adalah 0,3 kali ke samping serta 0,18 kali ke atas dan bawah. Semuanya digambar dalam px yang dibulatkan.

Kanvas menarik garis tepi separuh di dalam dan separuh di luar kontur huruf, sehingga alat ini menarik garis dua kali lebih tebal dari angka di tabel agar tebal yang tampak di luar huruf sama dengan tabel. Pada foto potret yang tinggi, lebar adalah sisi pendeknya, sehingga persentase yang sama tampak lebih kecil di layar. Untuk teks tiga baris, pastikan tinggi baris × 3 tidak melebihi setengah tinggi foto, dan turunkan ukurannya jika melebihi.

Tujuh font dan syarat penggunaannya

Font Bawaan adalah font yang sudah ada di perangkat pengunjung, jadi langsung tampil. Enam font lainnya adalah font gratis yang disimpan bersama situs ini dan baru diunduh saat dipilih. Pada pilihan pertama, kolom berkedip selama ukuran yang tertera di tabel diunduh, dan setelah selesai panggung berganti ke font itu.

Keenamnya adalah font SIL OFL 1.1 yang tersedia di Google Fonts. FAQ OFL dari SIL (butir 1.13) menyatakan bahwa membuat grafis dengan font OFL tidak membuat karya hasilnya tunduk pada OFL, jadi penggunaan gambar yang Anda buat tidak dibatasi oleh fontnya. Yang diatur OFL adalah penyebaran file font itu sendiri. Teks lisensi lengkap bisa dibuka dari kolom syarat penggunaan di tabel. Keterangan ini hanya merangkum syarat penggunaan dan bukan nasihat hukum.

Isi tiap font berbeda. Keenam font memuat aksen á é í ó ú ñ ü yang sering muncul pada nama dan kata serapan, tetapi tidak memuat huruf Hangul, kana, kanji, maupun aksara Arab. Huruf yang tidak ada di font digambar dengan sans-serif bawaan hanya untuk huruf itu, dan huruf yang diganti ditampilkan di bawah kolom font. Bebas Neue dirancang hanya dengan huruf kapital: huruf kecil yang diketik digambar dengan bentuk kapital, dengan tinggi dan lebar yang sama persis dengan kapitalnya. Karena itu “Toko Baru” dan “toko baru” tampil identik.

Cara teks vertikal disusun

Jika arah tulisan diganti ke vertikal, huruf ditaruh satu per kotak dari atas ke bawah, dan baris disusun dari kanan ke kiri. Mengganti baris menambah kolom baru di sebelah kiri. Tombol rata baris berubah menjadi atas, tengah, dan bawah untuk meratakan awal tiap kolom.

• Huruf dan angka tidak diputar. Tiap karakter berdiri tegak di kotaknya sendiri.
• Tanda hubung, tanda kurung, titik dua, titik koma, dan tilde diputar 90 derajat agar mengikuti arah vertikal. Titik dan koma biasa berdiri tegak di kotak sendiri.
• Kolom yang panjang menjadi tinggi. Tinggi kolom adalah ukuran huruf × jumlah karakter, jadi pada foto 1.920 × 1.080 px dengan huruf 8% (154 px), enam karakter memakai 924 px, sedangkan tujuh karakter memakai 1.078 px dan nyaris memenuhi tinggi foto.

Bahasa Indonesia memakai huruf Latin yang umumnya dibaca mendatar, sehingga teks vertikal paling cocok untuk satu kata pendek seperti nama toko atau judul poster. Kalimat panjang lebih mudah dibaca bila ditulis mendatar.

Jarak watermark berulang

Jika pengulangan diaktifkan, teks yang sama disebar ke seluruh foto seperti papan catur. Jarak mendatar adalah lebar kotak pembatas teks ditambah 2 kali ukuran huruf, jarak tegak adalah tinggi ditambah 1,6 kali, dan tiap baris digeser setengah kotak. Jika jumlahnya melebihi 300 per foto, jaraknya dilebarkan 1,2 kali berulang agar panggung tidak berat. Gaya watermark berulang dimulai dengan opasitas 35%, ukuran 4%, dan kemiringan −30°.

Watermark hanya tanda untuk mengurangi pemakaian tanpa izin, bukan pencegah. Semakin tipis teksnya, semakin sedikit foto yang tertutup, tetapi semakin mudah pula dihapus. Simpan foto asli di tempat lain dan pasang watermark hanya pada foto yang dipublikasikan.

Format dan ukuran simpan

• PNG (bawaan): tepi huruf paling bersih, dan bagian transparan tetap transparan. Ukuran filenya besar.
• JPG: ukuran file kecil. JPG tidak bisa menyimpan transparansi, jadi latarnya diisi putih, dan kualitas bisa dipilih antara 50 dan 100% (bawaan 90%).
• WebP: jalan tengah antara ukuran file dan ketajaman. Jika browser tidak mendukung penyimpanan WebP, hasilnya menjadi PNG seperti dijelaskan MDN. Karena itu alat ini tidak menyimpan dan meminta Anda memilih format lain.

Ukuran simpan sama dengan foto yang dimuat. Namun Safari di iPhone dan iPad hanya bisa menggambar kanvas seluas 4.096 × 4.096 = 16.777.216 piksel (hasil uji canvas-size). Jika tidak bisa disimpan dengan ukuran asli, gambar dibuat ulang dengan diperkecil sampai muat di luas itu sambil menjaga perbandingan sisi, lalu pengurangan itu dan ukurannya diberitahukan.

Foto yang bisa dimuat maksimal 20 MiB per file, 40 megapiksel, dan 16.384 px per sisi. Informasi rotasi yang dicatat kamera diterapkan saat foto dibaca, sehingga foto yang diambil secara tegak tidak menjadi miring ke samping.

Kesalahan yang sering terjadi

• Menilai dari ukuran pratinjau: panggung adalah gambar yang diperkecil menyesuaikan layar. Untuk melihat huruf kecil yang buram, buka file hasil simpan dengan ukuran sebenarnya.
• Menempelkan teks terlalu ke tepi: jika media sosial memotong foto menjadi persegi atau 4:5, teks di tepi ikut terpotong. Walau tidak ada peringatan keluar dari foto, lebih aman menyisakan jarak 5% seperti pada 9 kotak posisi.
• Menambah tulisan pada foto yang sudah disimpan sebagai JPG: tiap perbaikan menambah satu lapis kompresi. Muat ulang foto asli dan simpan dari awal.
• Memakai font tulisan tangan yang tipis dalam ukuran kecil: font seperti Kalam mudah tenggelam di pola foto pada ukuran di bawah 4%. Pertebal garis tepi sedikit lebih dari untuk sans-serif, atau pasang kotak.
• Mengetik huruf kecil di Bebas Neue sambil berharap bentuknya berbeda: font ini selalu menggambar bentuk kapital, jadi pilih font lain jika Anda ingin huruf kecil terlihat.

Batasan alat ini

• Gambar yang disimpan menggabungkan foto dan teks menjadi satu lapis piksel, sehingga teksnya tidak bisa diedit lagi. Jika halaman dimuat ulang, pekerjaan juga tidak tersimpan.
• Tidak ada warna berbeda untuk tiap huruf, susunan melengkung, gradasi, maupun fitur urungkan.
• Teks vertikal adalah cara sederhana: huruf ditegakkan di kotaknya dan hanya sebagian tanda baca yang diputar. Bentuk huruf khusus vertikal yang ada di dalam font tidak dipakai.
• Cek keterbacaan mengukur piksel pratinjau di layar, dan tidak memasukkan bayangan maupun tebal goresan huruf ke dalam hitungan. Meski melewati batas, teks bisa tetap sulit dibaca bergantung pada ukuran layar sebenarnya dan penglihatan pembaca.
• Foto HEIC hanya terbuka jika browser dapat membacanya. Jika tidak terbuka, ubah dulu ke JPG sebelum dimuat.

Acuan: pada 2026-10-20 standar dan dokumen di bawah ini serta teks lisensi font telah diperiksa. Angka di tabel sama dengan hitungan alat ini.

Sumber

• 01W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)Teks dan gambar teks minimal 4,5:1, teks besar minimal 3:1, rasio kontras (L1 + 0,05) ÷ (L2 + 0,05)
• 02WHATWG — HTML Living Standard, menggambar teks di kanvasfillText dan strokeText, perataan dan garis dasar
• 03MDN — CanvasRenderingContext2D.strokeText() (bahasa Inggris)Menggambar kontur huruf
• 04MDN — HTMLCanvasElement.toBlob() (bahasa Inggris)Format yang tidak didukung diekspor sebagai PNG, nilai kualitas untuk JPEG dan WebP, null jika gambar tidak bisa dibuat
• 05MDN — createImageBitmap() (bahasa Inggris)Opsi imageOrientation menerapkan informasi rotasi foto
• 06canvas-size — Test ResultsLuas maksimum kanvas Mobile Safari 9+ 4.096 × 4.096 (16.777.216)
• 07SIL — OFL FAQ1.13: grafis yang dibuat dengan font OFL tidak tunduk pada OFL
• 08Google Fonts — AntonSIL OFL 1.1
• 09Google Fonts — Bebas NeueSIL OFL 1.1
• 10Google Fonts — DM Serif DisplaySIL OFL 1.1
• 11Google Fonts — LobsterSIL OFL 1.1
• 12Google Fonts — PacificoSIL OFL 1.1
• 13Google Fonts — KalamSIL OFL 1.1

Pertanyaan yang sering diajukan

Alat yang dipakai bersama