Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Cara yang Tepat untuk Retinafy Website Anda

by
Read Time:7 minsLanguages:

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 ThemeRebound - Responsive Multipurpose Retina ThemeRebound - 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.

Growth Engineering 101Growth Engineering 101Growth 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).

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

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.

32x32 px social icons32x32 px social icons32x32 px social icons

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 Photoshop16x16 px social icons - Transparent BG - Chrome vs Photoshop16x16 px social icons - Transparent BG - Chrome vs Photoshop
16x16 px social icons - White BG - Chrome vs Photoshop16x16 px social icons - White BG - Chrome vs Photoshop16x16 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.

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.

16x16 px social icons - Zoom 20016x16 px social icons - Zoom 20016x16 px social icons - Zoom 200

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.

Borders and Strokes - Teaser ImageBorders and Strokes - Teaser ImageBorders and Strokes - Teaser Image

Lihat Versi Retina dari Gambar ini pada Dribbble.

Borders and Strokes - Photoshop vs ChromeBorders and Strokes - Photoshop vs ChromeBorders and Strokes - Photoshop vs Chrome
Borders and Strokes - Photoshop vs HandBorders and Strokes - Photoshop vs HandBorders and Strokes - Photoshop vs Hand

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.

Text - OriginalText - OriginalText - Original

Versi Retina
Text - Photoshop vs HandText - Photoshop vs HandText - Photoshop vs Hand
Text - Photoshop vs ChromeText - Photoshop vs ChromeText - Photoshop vs Chrome

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.

CSS Solution - Button

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.

CSS Solution - PopoverCSS Solution - PopoverCSS Solution - Popover

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.

CSS Solution - Stack

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

CSS Solution - Circled ArrowCSS Solution - Circled ArrowCSS Solution - Circled Arrow

Tool

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

Scalable Vector GraphicScalable Vector GraphicScalable Vector Graphic

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.

Icon FontsIcon FontsIcon Fonts

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.

X-Icon EditorX-Icon EditorX-Icon Editor

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%.

Image AlphaImage AlphaImage Alpha

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%.

Image OptimImage OptimImage Optim

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

KickoffKickoffKickoff
http://kickoffapp.com/

LayerVaultLayerVaultLayerVault
http://www.layervault.com

AppleAppleApple
http://www.apple.com

PanicPanicPanic

http://www.panic.com

Terima kasih telah membaca! Ada pertanyaan?

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.