Cara Menambahkan Teks ke Foto Tanpa Mengurangi Keterbacaan

Terakhir diperbarui: 17 Juli 2026

Menambahkan teks ke foto itu mudah sampai postingan tersebut dilihat di ponsel, dipotong oleh platform, atau diletakkan di samping selusin gambar lain dalam sebuah feed. Versi yang berguna tidak se-glamorik itu: pilih area yang tenang, buat salinan (copy) yang singkat, periksa kontras, ekspor pada ukuran akhir, dan uji hasilnya di tempat ia akan benar-benar muncul.

Jawaban cepat: bagaimana cara menambahkan teks ke foto dengan bersih?

Gunakan ukuran gambar akhir terlebih dahulu, lalu letakkan satu headline dan satu baris detail opsional di bagian tenang dari foto tersebut. Jika latar belakangnya ramai, tambahkan panel semi-transparan atau bayangan lembut di belakang teks. Ekspor salinan untuk setiap saluran (channel) alih-alih memaksa satu gambar bekerja di mana-mana.

Untuk alur kerja browser yang cepat tanpa perlu mendaftar, gunakan Text on Photo dari Imagic AI — pilih font, ukuran, dan warna, klik foto untuk menempatkan baris teks, lalu ekspor. Untuk label produk berulang, lencana penjualan (sale badges), atau watermark, gunakan alat yang mampu melakukan batch seperti aksi Photoshop, skrip GIMP, atau Pillow di Python. Jaga foto aslinya agar tidak tersentuh sehingga Anda dapat merevisi teksnya nanti.

Apa yang harus disiapkan sebelum menambahkan teks?

Mulailah dengan tujuan akhir (destination), bukan font. Postingan Instagram persegi, ubin produk e-commerce, hero blog, dan cerita vertikal semuanya dipotong secara berbeda. Jika Anda merancang lapisan di atas (overlay) sebelum memilih kanvasnya, headline seringkali mendarat terlalu dekat ke tepi atau menjadi tidak terbaca setelah diubah ukurannya.

Gunakan urutan ini:

1. Pilih ukuran kanvas akhir.
2. Potong foto untuk kanvas tersebut.
3. Temukan area paling tenang dari gambar.
4. Tulis salinan yang paling ringkas dan berguna.
5. Pilih satu keluarga font dan maksimal dua weight.
6. Periksa kontras pada latar belakang aktual.
7. Ekspor salinan datar (flattened copy).
8. Simpan file sumber yang dapat diedit.

Jika foto masih perlu dipotong atau diubah ukurannya, tangani itu terlebih dahulu. Panduan batch resize berguna ketika Anda memiliki folder gambar yang membutuhkan dimensi yang sama sebelum teks ditambahkan.

Alat mana yang harus Anda gunakan untuk menambahkan teks ke gambar?

Tidak ada alat terbaik tunggal. Yang tepat tergantung pada apakah Anda membuat satu gambar secara manual atau memproduksi set yang dapat diulang.

Bagi pemilik toko yang menambahkan lencana "Barang Baru" ke 40 foto produk, skrip atau aksi Photoshop menghemat waktu dan menghindari penempatan yang tidak konsisten. Bagi kreator yang membuat satu grafis kutipan, editor template lebih cepat dan sudah cukup baik.

Jika teksnya terutama adalah tanda hak cipta (copyright mark), baca panduan watermarking sebelum Anda mulai. Watermark memiliki prioritas yang berbeda: ia harus bertahan dari penggunaan kasual tanpa menjadi subjek utama gambar.

Bagaimana cara menjaga keterbacaan teks foto?

Keterbacaan sebagian besar adalah kontras, ukuran, dan kontrol latar belakang. Web Content Accessibility Guidelines mendefinisikan rasio kontras untuk teks, dengan teks normal membutuhkan rasio kontras 4.5:1 dan teks besar membutuhkan 3:1 dalam kasus umum (W3C WCAG contrast guidance). Teks gambar tidak sama dengan teks HTML, tetapi rasionya masih merupakan target praktis yang baik.

Gunakan pemeriksaan ini sebelum menerbitkan:

• Letakkan teks terang di area gelap, atau teks gelap di area terang.
• Tambahkan overlay gelap 40-70% di belakang teks putih ketika foto ramai.
• Gunakan bayangan lembut hanya untuk memisahkan tepi, bukan sebagai dekorasi.
• Hindari font skrip tipis untuk gambar ponsel kecil.
• Jaga panjang baris cukup pendek sehingga teks dapat tumbuh.
• Uji gambar pada lebar ponsel, tidak hanya di monitor desktop.

Untuk halaman web, teks HTML asli di atas gambar seringkali lebih baik daripada teks bawaan (baked-in). Teks tersebut tetap dapat dipilih, responsif, dan tersedia untuk teknologi bantu. Jika Anda memang menggunakan overlay CSS, referensi text-shadow MDN menjelaskan cara bayangan dirender dan mengapa bayangan halus dapat meningkatkan pemisahan tepi (MDN text-shadow).

Di mana teks harus diletakkan pada foto?

Letakkan teks di tempat gambar memberikannya ruang. Langit yang kosong, dinding polos, permukaan meja, latar belakang buram, dan sudut gelap bekerja dengan baik. Wajah, tangan, detail produk, makanan, logo, dan label harga biasanya perlu tetap tidak tertutup.

Untuk gambar sosial, jaga baris utama di dalam area aman tengah. Feed, pratinjau (previews), dan thumbnail mungkin memotong sisi atau atasnya. Jika Anda membuat versi spesifik platform, konfirmasi ukuran dengan referensi khusus seperti panduan ukuran gambar media sosial.

Versi paling aman biasanya adalah headline singkat di sepertiga yang tenang dari gambar. Jika foto tidak memiliki area tenang, buramkan lapisan latar belakang duplikat, tambahkan panel yang terkendali, atau pilih foto lain.

Gaya teks apa yang paling cocok pada foto?

Gunakan gaya lebih sedikit dari yang Anda pikirkan. Satu keluarga font dengan headline tebal dan baris pendukung reguler sudah cukup untuk sebagian besar overlay gambar. Mencampur font serif, skrip, dan font tampilan (display) padat membuat foto terlihat seperti maket poster alih-alih aset jadi.

Default yang bagus:

1. Gunakan sans serif tebal untuk grafis sosial kecil.
2. Gunakan huruf kalimat (sentence case) kecuali desain membutuhkan label.
3. Jaga teks semua huruf kapital tetap singkat.
4. Gunakan perataan kiri ketika foto memiliki tepi atau subjek yang jelas.
5. Gunakan teks rata tengah hanya ketika gambar itu sendiri simetris.
6. Jaga spasi baris sedikit lebih ketat untuk headline besar.
7. Hindari garis luar (outlines) kecuali asetnya adalah stiker, meme, atau thumbnail.
8. Sisakan margin yang lebih banyak dari yang terasa perlu di editor.

Jika Anda menyiapkan gambar produk atau e-commerce, teks dapat merusak foto jika menutupi item. Untuk tata letak yang berfokus pada produk (product-first), padukan alur kerja ini dengan panduan foto produk AI dan gunakan overlay hanya untuk label kecil, nama paket, atau lencana waktu terbatas.

Bagaimana cara menambahkan teks yang sama ke banyak foto secara batch?

Overlay batch hanya berfungsi ketika gambar sumber konsisten. Ubah ukuran terlebih dahulu, tentukan titik jangkar (anchor point) tetap, dan gunakan salinan yang tidak akan meluap. Keterangan berdasarkan nama file, SKU, tanda hak cipta, atau lencana harga adalah kandidat yang bagus. Headline panjang dengan panjang kata variabel bukanlah kandidatnya.

Berikut adalah contoh Pillow kecil untuk label kiri bawah. Ini mengasumsikan gambar Anda sudah berukuran sama:

from pathlib import Path
from PIL import Image, ImageDraw, ImageFont

input_dir = Path("photos")
output_dir = Path("with-text")
output_dir.mkdir(exist_ok=True)

font = ImageFont.truetype("Inter-Bold.ttf", 44)

for path in input_dir.glob("*.jpg"):
    image = Image.open(path).convert("RGBA")
    overlay = Image.new("RGBA", image.size, (0, 0, 0, 0))
    draw = ImageDraw.Draw(overlay)

    text = path.stem.replace("-", " ").title()
    draw.rounded_rectangle((48, image.height - 132, 560, image.height - 48), 18, fill=(0, 0, 0, 150))
    draw.text((72, image.height - 108), text, font=font, fill=(255, 255, 255, 255))

    result = Image.alpha_composite(image, overlay).convert("RGB")
    result.save(output_dir / path.name, quality=90)

Setelah ekspor batch, kompres hasilnya sekali saja. Panduan mendalam kompresi gambar menjelaskan mengapa penyimpanan JPEG berulang melembutkan tepi teks dan mengapa Anda harus menyimpan satu master yang dapat diedit.

Kesalahan apa yang membuat teks foto terlihat amatir?

Sebagian besar masalah berasal dari penambahan teks terlalu terlambat atau mencoba memasukkan terlalu banyak salinan ke dalam gambar.

Satu tes praktis: menjauhkan diri dari layar Anda atau memperkecil gambar hingga lebar ponsel. Jika headline tidak dapat dibaca dalam dua detik, sederhanakan tata letaknya.

Daftar periksa akhir sebelum Anda menerbitkan

Gunakan pemeriksaan terakhir ini sebelum mengunggah gambar:

• Foto dipotong ke tujuan akhirnya.
• Headline terbaca pada ukuran seluler.
• Teks tidak menutupi produk, wajah, atau detail penting.
• Kontras cukup kuat tanpa efek yang dilebih-lebihkan.
• Margin bertahan dari pemotongan persegi, vertikal, dan thumbnail.
• File sumber yang dapat diedit telah disimpan.
• File yang diekspor dikompres hanya sekali.
• Nama file menjelaskan aset tersebut.
• Teks alternatif (Alt text) atau salinan halaman di sekitarnya mengulang kata-kata penting yang tertanam dalam gambar.
• Halaman akhir masih lulus pemeriksaan SEO gambar.

Untuk halaman di mana gambar adalah bagian dari lalu lintas pencarian, gunakan daftar periksa optimasi gambar untuk SEO. Mesin pencari dan alat bantu tidak dapat secara andal memperlakukan teks gambar yang tertanam sebagai salinan halaman, jadi ulangi nama penting, harga, dan call to action di HTML nyata di dekatnya.

Bagaimana contoh-contoh ini dibuat?

Saya menguji empat diagram tersebut sebagai ekspor WebP 1200 x 675 yang dibuat dengan ImageMagick, lalu memeriksa jenis file lokal mereka sebelum mengunggahnya ke CDN. Contoh-contoh ini sengaja sederhana: satu penutup tata letak, satu perbandingan kontras, satu panduan potong zona aman, dan satu diagram alur kerja batch.

Kredit gambar

• Diagram sampul dan artikel dibuat dengan ImageMagick untuk panduan ini guna menunjukkan penempatan teks, kontras, keamanan pemotongan, dan alur kerja overlay batch.