SEO
1 Sep 2025
Cara gambar dioptimalkan di Framer
Saat mengunggah gambar ke Framer, gambar tersebut akan dioptimalkan secara otomatis tanpa perlu konversi atau penyesuaian tambahan. Format JPEG, PNG, WebP, GIF, dan TIFF akan dikonversi secara otomatis menjadi AVIF dan disesuaikan dengan ukuran perangkat untuk meningkatkan kecepatan pemuatan situs.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Ringkasan Kunci Optimasi
JPEG, PNG, WebP, GIF, TIFF: Unggah dalam bentuk asli dan atur resolusi di bagian Image → Fill ke “Auto”. FramerFramer akan secara otomatis mengubah sebagian besar gambar menjadi AVIF dan mengatur ukuran sesuai dengan resolusi layar dan situs.
SVG: Gambar bingkai kemudian pilih opsi Fill untuk mengunggah Image.
Ketika gambar diunggah ke Framer, optimasi dilakukan secara otomatis, jadi tidak perlu mengubah langsung ke WebP/AVIF atau menyesuaikan ukuran sesuai konten.
JPEG, PNG, WebP, AVIF, GIF, TIFF Resizing Otomatis
Pengguna ponsel memiliki layar yang lebih kecil. Sebagai contoh, jika Anda mengunggah gambar 3000×2000 px untuk desktop, akan ada pemborosan data jika gambar yang sama ditampilkan di ponsel dengan layar 390×890. Untuk menghindari ini, Framer mengubah ukuran gambar secara otomatis dan memungkinkan browser untuk memilih ukuran optimal yang sesuai dengan layar.
Metode Mengubah Ukuran Gambar
Gambar
JPEG,PNG,WebP,AVIF,GIF,TIFFyang diunggah akan otomatis diperkecil ke ukuran 512, 1024, 2048, 4096 px.Gambar tidak diperbesar (upscale), sebagai contoh, jika lebar gambar adalah 3000 px, maka hanya versi 512, 1024, dan 2048 px yang dibuat.
Pengubahan ukuran mengikuti dimensi terpanjangnya. Jika tinggi lebih panjang yaitu 3000 px, konversi diukur dari tinggi.
Pemrosesan Optimasi Browser
Kebanyakan tag <img> mendapatkan atribut srcset dan sizes secara otomatis.sizes: Memberi informasi ke browser tentang ukuran tampilan gambar.srcset: Menyediakan semua versi ukuran (termasuk original) yang memungkinkan browser memilih gambar optimal.
Opsi Resolusi
Dikontrol pada Fill → Image → Resolution.
Opsi “
Small”, “Medium”, “Large”, “Full” masing-masing secara memaksa menggunakan versi 512, 1024, 2048, 4096 px.Tidak melakukan upscale lebih besar dari ukuran asli. Sebagai contoh, jika gambar selebar 1500 px, meskipun memilih Large atau Full, tetap disajikan dengan lebar 1500 px.
Aturan Konversi JPEG, PNG, WebP, GIF, TIFF > AVIF
Kategori | Metode Pemrosesan | Keterangan |
|---|---|---|
Konversi Dasar | Kompressi AVIF Lossy (Kualitas 80) | Berlaku untuk JPEG, PNG, WebP, GIF, TIFF |
Pilihan Auto (Lossless) | Konversi WebP Lossless | Ukuran file ↑, tanpa artifact kompresi |
Gambar Animasi | Maintain Lossy WebP | AVIF tidak dapat mengonversi animasi |
Saat Permintaan Pertama | WebP Lossy (Kualitas 90) disediakan lebih dahulu → digantikan AVIF kemudian | Otomatis digantikan setelah konversi selesai |
Ukuran Setelah Konversi > Original | Sediakan Original | Disimpan jika tidak efisien |
Dukungan Browser
Lingkungan Browser | Format yang Diberikan |
|---|---|
Dukungan AVIF (misal: Safari 16.4+) | AVIF |
Hanya mendukung WebP | WebP |
Tidak mendukung AVIF & WebP | Kompresi ulang original |
Alasan Kompresi Lossy PNG
PNG adalah format lossless, namun banyak gambar yang diunggah adalah screenshot
Penerapan kompresi lossy (Kualitas 90) secara signifikan mengurangi ukuran
Pengoptimalan tanpa mengurangi kualitas terlihat
SVG -> Optimasi dengan SVGO
Framer mengoptimalkan SVG yang diunggah menggunakan SVGO.
Diterapkan pada grafik SVG (ditampilkan dengan tag
<svg>) dan Fill gambar.SVG dengan banyak jalur atau layer bisa mengganggu performa situs, sehingga diusulkan untuk memanfaatkan Image Fill jika diperlukan.
Jika gambar tidak ditampilkan dengan benar atau ada masalah kualitas, silakan kontak tim dukungan melalui halaman kontak Framer.
Artikel ini adalah terjemahan dan adaptasi dari konten ‘How images are optimized in Framer’ di blog resmi Framer.
