SVG adalah format file gambar yang dapat meringankan website Anda karena ukurannya yang kecil. Namun WordPress tidak mengizinkan penggunanya untuk meng-upload file dengan tipe tersebut karena alasan keamanan.
Akan tetapi, masih ada jalan untuk mengakalinya. Dalam artikel ini, Anda akan mempelajari dua cara aman upload SVG ke WordPress.
Sebelum membahas apa itu format SVG, Anda perlu tahu bahwa ada dua golongan file gambar, yaitu raster dan vector.
Gambar raster, seperti JPG dan PNG, dibentuk oleh banyak piksel warna dengan ukuran tetap. Oleh karena itu, file gambar yang termasuk dalam kategori ini akan mengalami distorsi ketika diperbesar.
File vector menggunakan XML atau extensible markup language sebagai dasarnya. Dengan kata lain, file vector terdiri dari kode yang bisa Anda manipulasi.
Nah, SVG adalah salah satu tipe file gambar yang termasuk dalam golongan vector. Karena tidak terbuat dari piksel, keunggulan SVG adalah tidak akan pecah atau kabur ketika diperbesar.
Penggunaan file SVG sangat dianjurkan agar Anda bisa mengikuti kemajuan desain website. Setidaknya ada tiga keuntungan penggunaan SVG, yaitu:
SVG adalah file yang ukurannya lebih kecil dibandingkan tipe gambar lainnya seperti JPG dan PNG. Berikut adalah contoh perbandingan ukuran ketiga tipe file tersebut:
Dari perbandigan di atas, bisa Anda lihat bahwa ukuran file SVG jauh lebih kecil dibandingkan JPG dan PNG. Oleh karena itu, salah satu manfaat SVG adalah mempercepat loading website Anda.
Namun perlu diingat bahwa tidak semua grafik perlu diganti dengan tipe file ini. Misalnya, Anda bisa menggunakan PNG atau JPG untuk featured image, sedangkan gambar kecil seperti logo dan icon menggunakan SVG.
Seperti yang telah disebutkan sebelumnya, SVG adalah file yang terdiri dari kode dan bukan piksel. Ketika diperbesar di program manipulasi gambar, tipe file ini dapat diperbesar tanpa rusak karena distorsi.
Sifat ini sangat dibutuhkan dalam desain website saat ini, terutama dengan adanya standar responsive design.
Ketika meng-upload gambar ke WordPress, Anda dapat mengoptimalkannya untuk SEO dengan menambahkan image title dan alt text.
Namun, gambar SVG dapat lebih mudah ditemukan dan dimunculkan dalam hasil pencarian jika dibandingkan JPG atau PNG.
Alasannya karena file SVG memungkinkan Anda untuk memasukkan kode dan teks ke dalamnya. Untuk mengoptimalkannya, Anda bisa menambahkan kode di bawah ini:
<object type="image/svg+xml" data="your_image.svg">
<img src="your_image.svg" alt="This is your image alt" title="Your image title tag">
</object>
Lalu, gantilah “This is your image alt” dan “Your image title tag” dengan alt text dan image title yang Anda inginkan.
Grafik yang mudah diubah ukurannya sudah menjadi kebutuhan utama dalam industri desain web. Logo dan icon merupakan contohnya.
Berdasarkan data milik website survei teknologi W3Techs, 19.1% website telah menggunakan grafik SVG. Namun jika melihat perkembangan per bulannya, penggunaan SVG akan meningkat pesat.
Meski penting, SVG adalah file yang tidak didukung di WordPress. Alasannya adalah ancaman yang bisa muncul dari file itu sendiri.
Karena SVG merupakan kumpulan kode, filenya bisa dimanipulasi. Bahkan fie SVG bisa diisi dengan skrip berbahaya. Jika itu terjadi, seseorang bisa menginjeksi website Anda dengan malware.
Namun, Anda tidak perlu menghindari penggunaan SVG. Pada bagian selanjutnya Anda akan dijelaskan tentang beberapa cara agar dapat menggunakan file dengan tipe tersebut di WordPress Hosting dengan aman.
Dua cara aman untuk upload SVG adalah sebagai berikut:
Cara mudah upload SVG adalah dengan plugin SVG Support. Dengan plugin ini, Anda bisa mengunggah file SVG ke media library WordPress seperti halnya file JPG atau PNG.
Plugin SVG support juga bisa diatur untuk hanya digunakan oleh user Administrator di WordPress. Kami sarankan Anda untuk mengaktifkan pengaturan ini untuk meningkatkan keamanan.
Caranya, klik Settings > SVG Support. Kemudian, centang checkbox Restrict to Administrators.
Setiap tema WordPress memiliki file functions.php, yang berfungsi mengatur fitur yang ada pada website Anda. Dengan mengedit file ini, pengguna dapat menambah atau mengubah setting yang ada.
Karena functions.php berada dalam direktori website, Anda harus menggunakan FTP client untuk membukanya. Ada banyak FTP client yang dapat diunduh secara gratis, seperti WinSCP dan FileZilla.
Apabila belum pernah menggunakan FTP client, Anda bisa mengikuti panduan FTP kami.
Berikut adalah langkah-langkah yang perlu Anda lakukan untuk mengaktifkan dukungan SVG melalui functions.php:
1. Buka folder public_html.
2. Cari folder tema yang Anda gunakan, lalu buka file functions.php di dalamnya.
3. Tambahkan kode berikut ini:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
4. Save file tersebut. Setelah ini, Anda bisa upload SVG ke WordPress.
Meskipun penggunaan gambar SVG dapat memaparkan website Anda pada masalah keamanan, ada beberapa cara untuk mengatasinya:
Di artikel ini Anda telah mengetahui apa itu format SVG. SVG adalah tipe file gambar yang memiliki banyak keunggulan. Salah satunya adalah ukuran filenya yang kecil, sehingga dapat mempercepat loading website Anda.
Sayangnya, Anda tidak bisa upload SVG WordPress karena rentan akan masalah keamanan. Namun, Anda bisa mengakalinya dengan mengaktifkan dukungan SVG di WordPress. Caranya ada dua, yaitu:
Nah, agar website lebih aman lagi meski menggunakan SVG, Anda perlu menerapkan langkah-langkah keamanan. Anda bisa mempelajarinya dengan download ebook gratis di bawah ini. Di dalamnya Anda akan menemukan lebih dari 20 langkah untuk mengamankan WordPress!
Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!
Anda mencoba mengakses website dengan domain utama, tapi hanya muncul daftar direktori Index of/? Itu berarti Anda perlu memindahkan website…
Bagaimana cara kerja VPS sebenarnya? Di artikel ini, Anda akan mengetahui bagaimana VPS bekerja serta kelebihan dan kekurangan VPS hosting.
UKM memiliki peran penting bagi Indonesia. Sebenarnya, apa sih UKM itu? Bagaimana contoh dan tips mengembangkannya? Cek selengkapnya disini!
Ingin menggunakan Yarn, tapi tak tahu cara instalnya? Yuk pelajari cara install Yarn di Windows, Linux, dan MacOS lengkap di…
Ingin tahu sumber referensi resmi dan cara memaksimalkan layanan Niagahoster? Yuk kepoin 3 layanan pengganti Niaga Forum di sini!
Value proposition adalah kunci untuk memikat target pasar. Sebab, Anda menjelaskan kenapa produk Anda harus dipilih dibandingkan yang lain. Dengan…