Dokumen ini bertujuan untuk membantu pengguna domestik yang mempelajari Framer yang mengalami kesulitan akibat kurangnya sumber daya berbahasa Korea, dengan menerjemahkan konten dari blog resmi ke dalam Bahasa Korea dan menambahkan informasi yang berguna untuk praktis. Semoga ini dapat memberikan bantuan yang signifikan bagi kalian yang menggunakan Framer.

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, TIFF yang 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

Dukungan Browser

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.