Kita hidup di dunia definisi tinggi. Dan karena kebanyakan dari kita menghabiskan lebih dari delapan jam sehari untuk melihat berbagai jenis layar, kualitas gambar dan karakter yang terkandung dalam layar ini sangat penting.
Meskipun hanya tersedia selama beberapa tahun, layar Retina adalah cara masa depan. Kepadatan piksel yang tinggi di layar Retina membuat gambar menjadi jelas dan tajam. Dan siapa yang tidak menyukai gambar yang bagus dan tajam?
Belajar untuk buat situs web kompatibel dengan layar Retina adalah aset penting bagi pengembang web mana pun. Sayangnya, tidak ada solusi ideal dan sempurna untuk membuat situs web Anda ramah pengguna dengan tampilan Retina-Ready.
Jadi, sementara kami menunggu seseorang menemukan solusi terlengkap, kami telah melihat beberapa opsi terbaik untuk menyiapkan situs web Anda. Dengan begitu, Anda tidak akan tersesat ketika saatnya tiba ketika semua perangkat akan menampilkan Retina dalam satu bentuk atau lainnya.
Tetapi sebelum Anda mulai, luangkan waktu untuk melihatnya Cara menginstal tema WordPress, Berapa banyak plugin saya harus menginstal pada WordPress.
Kalau begitu mari kita mulai bekerja!
Membuat banyak file gambar
Mari kita mulai dengan dasar-dasarnya. Cara termudah untuk mendapatkan dukungan Mode Retina untuk situs web Anda adalah dengan buat beberapa variasi gambar dalam resolusi berbeda. Ini berarti bahwa untuk setiap jenis resolusi (yaitu 1x), Anda perlu membuat versi resolusi tinggi dari klip tersebut (yaitu 2x).
Pada dasarnya Anda dapat membuat beberapa versi dari file yang sama dan menggunakan plugin seperti WP Retina 2x atau skrip seperti retina.js untuk secara otomatis menghasilkan versi "@ 2x" dari setiap ukuran gambar atau menemukan gambar "@ 2x" dan menampilkan ukuran yang sesuai dengan masing-masing perangkat.
Memang benar bahwa membuat beberapa versi dari gambar yang sama bisa menjadi proses yang memakan waktu. Sayangnya, tidak ada metode cepat yang secara otomatis menghasilkan gambar ini untuk Anda. Namun, ada beberapa plugin Photoshop yang memungkinkan Anda untuk dengan cepat memperbaiki gambar Anda.
Plugin seperti " Retinize itu Yang merupakan rangkaian tindakan Photoshop yang memungkinkan Anda dengan mudah mengoptimalkan desain untuk tampilan Retina. Jika Anda menggunakan Photoshop versi lama (pra-CC), Anda dapat menggunakan sesuatu seperti " Empat Yang pada dasarnya melakukan semua yang dilakukan alat Generator Photoshop saat ini, tetapi untuk versi Photoshop yang lebih lama.
Scalable Vector Graphics (SVG)
Cara termudah untuk melanjutkan mode Retina adalah menggunakan Scalable Vector Graphics (SVG) di situs web Anda. SVG adalah format gambar vektor berbasis XML. Seperti namanya, gambar SVG dapat diskalakan, yang berarti bahwa gambar dapat direntangkan sejauh (atau sesedikit) yang diperlukan, namun tetap tajam dan jelas. Ini bisa menjadi cara yang cepat dan mudah bagi Anda untuk menerapkan Mode Retina tanpa banyak usaha.
Baca juga: Cara menyediakan gambar WebP alih-alih PNG & JPG tradisional
Namun, ada dua kelemahan menggunakan SVG di WordPress. Yang pertama adalah karena ini adalah format vektor, SVG tidak cocok untuk semua gambar. Jadi, Anda dapat menggunakan SVG untuk logo dan ikon, tetapi tidak untuk file seperti foto (yang sedikit menyakitkan jika Anda ingin menggunakan gambar beresolusi tinggi untuk situs web Anda). Tetapi jika Anda ingin menggunakan ikon, animasi, atau ilustrasi sederhana, file SVG tentu bisa menjadi pilihan untuk situs web yang kompatibel dengan Retina.
Kelemahan kedua menggunakan SVG di WordPress adalah bahwa ini bukan format resmi yang kompatibel dengan WordPress karena masalah keamanan. Karena file SVG pada dasarnya adalah file XML, ini akan membukanya semua kerentanan yang diketahui terkait dengan format file XML, seperti analisis koersif, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS), dll.
Namun, ada cara untuk mengaktifkan dukungan SVG untuk situs web Anda yang akan membuat file SVG Anda aman.
Cara mengaktifkan SVG dengan aman di WordPress
SVG aman adalah plugin yang memungkinkan Anda mengaktifkan dukungan file SVG dengan aman di situs web Anda. Plugin ini memastikan bahwa file SVG Anda didesinfeksi untuk mencegah potensi kerentanan XML yang memengaruhi situs web Anda.
Jauhi plugin yang mengizinkan jenis MIME untuk memungkinkan pengunggahan dari SVG ke perpustakaan media WordPress karena ini berbahaya dan berpotensi berbahaya untuk situs web Anda. Jadi, jika Anda benar-benar tergoda untuk menggunakan format SVG di WordPress, pastikan Anda melakukannya dengan aman dan jangan mengunduh plugin SVG pertama yang Anda lihat.
Dorong lebih banyak konversi ke blog Anda dengan membaca jenis konten 15 yang menghasilkan lebih banyak pengunjung ke blog Anda
Beberapa plugin untuk mengintegrasikan kompatibilitas Retina di WordPress
Ada beberapa skrip dan plugin untuk kompatibilitas Retina yang dapat membuat hidup Anda lebih mudah saat mencoba mengatur situs web yang kompatibel dengan Mode Retina. Namun, seperti yang disebutkan sebelumnya, sebagian besar plugin dan skrip tersedia, ganti gambar Anda dengan gambar resolusi tinggi hanya untuk tampilan resolusi tinggi. Mereka tidak meregang seperti SVG: Anda masih perlu membuat banyak gambar dengan resolusi berbeda.
1 - retina.js
retina.js adalah salah satu skrip yang paling banyak digunakan untuk menyajikan gambar resolusi tinggi. Ini adalah skrip sumber terbuka yang memudahkan penyajian gambar resolusi tinggi ke perangkat dengan layar Retina.
Skrip memeriksa setiap gambar di halaman untuk melihat apakah ada versi resolusi tinggi dari gambar itu di server. Jika varian resolusi tinggi ada, skrip menukar resolusi standar dengan gambar resolusi tinggi. Ini adalah salah satu cara paling umum untuk menyajikan gambar untuk tampilan Retina di situs web Anda.
Lihat juga: GIF, Emoji atau Memes: ide bagus untuk situs web WordPress?
2 - Padat
Mirip dengan retina.js, Padat adalah plugin jQuery yang menawarkan cara mudah untuk menyajikan gambar dalam format rasio piksel. Skrip memanggil metode $ .fn.dense () dari inisialisasi, yang menargetkan tag "img" yang akan berfungsi sebagai gambar yang kompatibel dengan mode Retina sesuai kebutuhan.
Jadi, itu menggantikan semua gambar dengan versi resolusi tinggi masing-masing, seperti skrip retina.js.
3 - WP Retina 2x
Yang terakhir dapat disamakan dengan generator gambar Retina yang ajaib.
WP Retina 2x adalah plugin yang membuat file gambar yang dibutuhkan oleh perangkat DPI Tinggi dan menampilkannya kepada pengunjung Anda. Berbeda dengan dua skrip sebelumnya, ini menghasilkan gambar resolusi yang berbeda dari gambar awal. Jadi, jika Anda tidak terlalu senang dengan membuat gambar berbeda secara manual dengan resolusi berbeda, opsi ini cocok untuk Anda.
Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk mengkonversi gambar Anda ke gambar Retina Ready.
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Daftar Penulis WordPress Mewah
Seperti namanya, plugin Daftar Penulis WordPress Mewah menampilkan daftar penulis untuk situs web Anda dalam widget. Ini memiliki antarmuka pengguna sederhana yang memungkinkan menampilkan informasi dari setiap penulis di bilah sisi. Yang harus Anda lakukan adalah menyeret widget penulis ke bilah sisi dan plugin akan melakukan pekerjaannya.
Fitur utamanya antara lain: kemungkinan untuk menampilkan penulis blog dengan cara yang menyenangkan untuk menarik pengunjung baru, kemampuan untuk menampilkan daftar penulis di sidebar atau di halaman, kemampuan untuk memulai kompetisi antara penulis blog Anda, tata letak responsif, dukungan untuk kode pendek dan banyak lagi.
Unduh | Demo | Hébergement Web
2. Daftar Isi yang Mudah
Ce WordPress Plugin user-friendly memungkinkan Anda untuk memasukkan daftar isi di posting Anda, halaman dan jenis posting kustom. Ini memiliki banyak fitur, yang utama adalah:
pengelolaan otomatis dari daftar isi, dukungan untuk tag , Dukungan plugin Rankin Math, kompatibilitas dengan beberapa editor halaman seperti Gutenberg, Divi, Elementor, WPBakery Page Builder dan lainnya, kemungkinan untuk memilih pada halaman mana publikasi Anda ingin ditampilkan, otomatis memasukkan daftar isi pada halaman tertentu, dan banyak lagi lainnya.
Ini adalah WordPress Plugin freeware yang memiliki semua yang Anda perlukan untuk menampilkan daftar isi Anda, jadi jangan ragu untuk memilihnya sebagai pilihan pertama Anda.
Download | Demo | Hébergement Web
3. WooCommerce Advanced Massal Edit
Apakah Anda secara teratur mengedit katalog produk Anda? Apakah Anda memiliki 100 produk atau 10.000, ini WordPress Plugin premium menurut saya “A must have”: (Itulah kata pertama yang muncul di benak saya).
Untuk beberapa dolar saja, plugin Edit Massal Tingkat Lanjut WooCommerce akan membuat hidup lebih mudah dan menghemat waktu Anda yang mengerikan. Tidak ada keraguan itu adalah bom.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- sumber lalu lintas 5 Anda mungkin tahu
- Studi Kasus: pemasaran Konten, bagaimana belajar dari kesalahan
- Mengapa freelancer membutuhkan jadwal harian
- aspek 7 yang akan membantu Anda membuat blog yang sukses
Kesimpulan
Sini! Itu saja untuk tutorial ini, saya harap ini memungkinkan Anda membuat gambar Retina-Ready untuk situs web Anda. Jangan sungkan berbagi dengan teman-teman Anda di jejaring sosial favorit Anda.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...
