Cara yang Tepat untuk Retinafy Website Anda

Indonesian (Bahasa Indonesia) translation by Shylchemist (you can also view the original English article)

Membuat situs web Anda siap untuk tampilan Retina tidak harus merepotkan. Apakah Anda sedang membangun situs web baru atau meningkatkan yang sudah ada, panduan ini dirancang untuk membantu Anda menyelesaikan pekerjaan dengan lancar.

Omong-omong, jika Anda mencari solusi cepat, lihat tema siap-Retina di Envato Market, seperti Rebound - Responsif Multiguna Retina Tema.

Rebound - Responsive Multipurpose Retina Theme — Rebound - Responsif Serbaguna Multiguna Tema

Jadikan itu Retina Pertama

Cara termudah dan paling menghemat waktu untuk menambahkan dukungan Retina adalah membuat satu gambar yang dioptimalkan untuk perangkat Retina, dan juga menyajikannya ke perangkat non-Retina.

Sekarang, setiap browser modern menggunakan resampling bikubik dan melakukan pekerjaan yang hebat dengan gambar downsampling. Berikut ini adalah perbandingan downsampling di Photoshop vs Google Chrome, menggunakan gambar dari situs web Growth Engineering 101.

Ada dua cara untuk membiarkan browser menurunkan sampel gambar untuk Anda: tag img atau gambar background CSS.

Anda dapat memiliki tag img yang melayani gambar yang dioptimalkan Retina, dan menetapkan atribut lebar dan tinggi hingga setengah dari resolusi gambar aktual (mis. 400x300 jika dimensi gambar 800x600).

1	<img src="http://www.example.com/Retina-image-800x600-2x.png" width="400" height="300">

Jika Anda menggunakan gambar sebagai background CSS, Anda dapat menggunakan properti background-size CSS3 untuk menurunkan sampel gambar untuk perangkat non-Retina.

1	<div class="photo"></div>

.photo {
    background-image: url(Retina-image-800x600-2x.png);
    background-size: 400px 300px;
    background-repeat: no-repeat;
    display: block;
    width: 400px;
    height: 300px;
}

Dalam kedua kasus, pastikan untuk menggunakan angka genap di kedua dimensi untuk mencegah perpindahan piksel saat gambar sedang downsampled oleh browser.

Saat Downsampling Tidak Cukup Baik

Biasanya, downsampling browser harus bekerja dengan baik. Yang mengatakan, ada beberapa situasi di mana downsampling di browser mungkin membuat gambar buram.

Di sini kita memiliki banyak ikon sosial 32px.

Dan di sini adalah bagaimana mereka akan muncul, ketika downsampled ke 16px oleh Photoshop serta filter bikubik Google Chrome. Tampaknya kita mendapatkan hasil yang lebih baik dari Photoshop dalam kasus ini.

16x16 px social icons - Transparent BG - Chrome vs Photoshop

16x16 px social icons - White BG - Chrome vs Photoshop

Untuk mendapatkan hasil terbaik bagi pengguna, kita dapat membuat dua versi gambar yang sama: satu untuk perangkat Retina, dan satu lagi yang telah downsampled oleh Photoshop untuk perangkat non-Retina.

Sekarang, Anda dapat menggunakan queries media CSS untuk menyajikan gambar Retina atau non-Retina, tergantung pada kerapatan piksel perangkat.

/* CSS for devices with normal screens */
.icons {
    background-image: url(icon-sprite.png);
    background-repeat: no-repeat;
}

/* CSS for high-resolution devices */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .icons {
        background-image: url(icon-sprite-2x.png);
        background-size: 200px 100px;
        background-repeat: no-repeat;
    }
}

Jika Anda menggunakan warna background untuk ikon kecil, di sisi lain, downsampling oleh browser berfungsi dengan baik. Berikut adalah contoh downsampling yang sama dengan background putih.

Memoles Gambar Downsampled Anda

Jika Anda masih tidak puas dengan hasil dari downsampling Photoshop, Anda bisa bekerja lebih keras dan mengoptimalkan versi non-Retina secara manual untuk mendapatkan hasil yang sangat tajam.

Di bawah adalah beberapa contoh gambar dari situs web produk Blossom yang saya optimalkan dengan tangan bagi mereka yang masih menggunakan perangkat non-Retina.

Border dan Stroke

Berikut adalah contoh masalah downsampling dengan garis rambut, di mana saya menggambar ulang garis-garis gambar downsampled.

Lihat Versi Retina dari Gambar ini pada Dribbble.

Borders and Strokes - Photoshop vs Chrome

Teks

Selanjutnya, kita sampai pada contoh masalah downsampling dengan teks. Dalam hal ini, saya secara manual menulis ulang teks “Feature Pipeline” untuk membuat hasilnya setajam mungkin.

Versi Retina

Saat detail, font yang jernih, dan hairlines jelas penting, Anda mungkin ingin bekerja lebih keras.

Coba Hindari Gambar

Kerugian utama dari gambar raster adalah ukuran file mereka yang cukup besar dan mereka tidak dapat menyesuaikan ukuran dengan ukuran yang berbeda tanpa memengaruhi kualitas gambar. Alternatif hebat untuk grafik raster adalah CSS, Scalable Vector Graphics (SVG), dan Font Icon.

Jika Anda memiliki kesempatan untuk membangun elemen grafis untuk situs web Anda di CSS, lakukanlah. Dapat digunakan untuk menambahkan gradien, perbatasan, sudut bulat, bayangan, panah, elemen putar, dan banyak lagi.

Berikut adalah beberapa contoh elemen interaksi di Blossom yang diimplementasikan dalam CSS. Gradien halus ditenagai oleh gradien CSS, dan font khusus yang digunakan pada tombol ini adalah Kievit, disajikan melalui Typekit. Tidak ada gambar.

Pada screenshot berikut, hanya dua gambar yang digunakan adalah avatar pengguna dan cap biru. Yang lainnya – tanda tanya yang dilingkari, panah abu-abu gelap di sebelahnya, popover, bayangannya dan panah di atasnya – adalah HTML dan CSS murni.

Di sini, Anda dapat melihat bagaimana proyek di Blossom muncul. Ini adalah screenshot dari proyek website digunakan sebagai penutup pada tumpukan lembaran kertas. Lembaran kertas diimplementasikan dengan divs yang akan diputar menggunakan CSS.

Juga, panah yang dilingkari di sebelah kanan screenshot di bawah ini adalah CSS murni.

Tool

Berikut adalah beberapa tool luar biasa yang akan membantu menghemat waktu saat membuat efek dengan CSS.

CSS Generator: Cross browser CSS3 syntax oleh @RandyJensen.
CSS Arrows: CSS untuk arrows tooltip oleh @ShojBerg.
Menghasilkan CSS untuk Sprite: Sprite Cow membantu Anda mendapatkan posisi background, lebar, dan tinggi sprite dalam spritesheet sebagai css yang dapat ditiru. Itu dibuat oleh TheTeam, dan merupakan penghemat waktu nyata - patut dicoba.

Keuntungan utama SVG adalah bahwa, tidak seperti grafik raster, mereka berskala cukup baik untuk berbagai ukuran. Jika Anda bekerja dengan bentuk sederhana, mereka biasanya lebih kecil dari PNG. Seringkali, mereka digunakan untuk hal-hal seperti grafik.

Ikon Font sering digunakan sebagai pengganti sprite gambar. Mirip dengan SVG, mereka dapat ditingkatkan hingga jauh tanpa kehilangan kualitas dan biasanya berukuran lebih kecil, jika dibandingkan dengan sprite gambar. Selain itu, Anda dapat menggunakan CSS untuk mengubah ukuran, warna, dan bahkan menambahkan efek, seperti bayangan.

Baik SVG dan Icon Font didukung dengan baik oleh browser modern.

Favicons Siap-Retina

Favicon sangat penting bagi pengguna yang membutuhkan cara mudah untuk mengingat situs web mana yang termasuk dalam tab browser. Favicon siap-Retina tidak hanya akan lebih mudah untuk diidentifikasi, tetapi juga akan menonjol di antara kerumunan Favicon pixelated yang belum dioptimalkan.

Untuk membuat Favicon Retina-ready Anda, saya sangat merekomendasikan X-Icon Editor. Anda dapat mengunggah satu gambar dan membiarkan editor mengubah ukurannya untuk dimensi yang berbeda, atau Anda dapat mengunggah gambar terpisah yang dioptimalkan untuk setiap ukuran untuk mendapatkan hasil terbaik.

Cara Membuat Gambar yang Ada Siap Retina

Jika Anda ingin memutakhirkan situs web dengan gambar yang ada, diperlukan sedikit lebih banyak pekerjaan, karena Anda harus membuat ulang semua gambar untuk membuatnya siap Retina, tetapi ini tidak perlu membuang terlalu banyak waktu.

Pertama, cobalah mengidentifikasi gambar yang dapat Anda hindari dengan menggunakan alternatif seperti CSS, SVG, dan Font Gambar, seperti disebutkan sebelumnya. Tombol, Ikon, dan widget UI umum lainnya biasanya dapat diganti dengan solusi modern yang tidak memerlukan gambar apa pun.

Jika Anda benar-benar perlu membuat ulang gambar raster, tentu saja Anda ingin kembali ke file sumber. Seperti yang mungkin Anda asumsikan, cukup mengubah ukuran gambar bitmap raster menjadi dua kali lebih besar daripada menyelesaikan pekerjaan, karena semua detail dan batas akan menjadi pixelated.

Tidak perlu putus asa – komposisi gambar yang sebagian besar mengandung vektor (yaitu dalam Adobe Photoshop atau Illustrator) cukup mudah untuk ditingkatkan. Karena itu, jangan lupa memverifikasi apakah Photoshop Anda memberi efek pada opsi blending, seperti goresan, bayangan, dan bevel, masih muncul sesuai keinginan Anda.

Secara umum, membuat komposisi Photoshop langsung dari vektor (bentuk) dan Smart Objects Photoshop akan menghemat banyak waktu di masa depan.

Cara Mengoptimalkan Ukuran File Gambar

Terakhir, namun tidak kalah pentingnya, mengoptimalkan ukuran file dari semua gambar dalam aplikasi atau situs web dapat secara efektif menghemat hingga 90% dari waktu pemuatan gambar. Ketika datang ke gambar Retina, pengurangan ukuran file menjadi lebih penting, karena mereka memiliki kerapatan piksel yang lebih tinggi yang akan meningkatkan ukuran file masing-masing.

Di Photoshop, Anda dapat mengoptimalkan ukuran file gambar, melalui fitur "Save for Web". Selain itu, ada alat gratis yang luar biasa, yang disebut ImageAlpha, yang dapat mengurangi ukuran gambar Anda bahkan lebih dengan hanya sedikit kehilangan kualitas.

Tidak seperti Photoshop, ImageApha dapat mengubah PNG kanal alpha 24-bit menjadi PNG 8-bit dengan dukungan saluran alpha. Penempatan terbaik adalah bahwa gambar-gambar yang dioptimalkan ini kompatibel lintas-browser dan bahkan berfungsi untuk IE6!

Anda dapat bermain-main dengan pengaturan berbeda di ImageAlpha untuk mendapatkan trade-off yang tepat antara kualitas dan ukuran file. Dalam kasus di bawah ini, kita dapat mengurangi ukuran file hingga hampir 80%.

Ketika Anda selesai mengatur level kompresi yang Anda inginkan, dialog penyimpanan ImageAlpha juga menawarkan untuk "Optimalkan dengan ImageOptim" - tool hebat dan gratis lainnya.

ImageOptim secara otomatis memilih opsi kompresi terbaik untuk gambar Anda dan menghapus informasi meta yang tidak perlu dan profil warna. Dalam hal file prangko kita, ImageOptim dapat mengurangi ukuran file sebesar 34%.

Setelah kita memperbarui semua aset di Blossom.io untuk tampilan resolusi tinggi dan menggunakan ImageAlpha dan ImageOptim untuk mengoptimalkan ukuran file, akhirnya kita menghemat beberapa kilobyte dibandingkan dengan aset yang dimiliki sebelumnya.

Hemat Waktu, Baca Buku Ini

Retinafyme - Retinafy your Websites and Apps

Jika Anda ingin mempelajari lebih lanjut tentang cara menyiapkan aplikasi dan situs web Anda untuk tampilan Retina, saya sangat merekomendasikan "Retinafy situs web Anda & aplikasi", oleh Thomas Fuchs. Ini adalah panduan langkah demi langkah langsung yang menyelamatkan saya banyak waktu dan saraf.

Situs Siap-Retina yang Luar Biasa di Web

Terima kasih telah membaca! Ada pertanyaan?