Sejarah singkat Pixel & Implikasi bagi Software Developer saat ini (web, android, ios) Indosystem Friday Tech Talk speak oleh Lawrence Samantha - @lawrencegs

1. pixel
Tech Talk Indosystem 29.07.16
@lawrencegs

3. Apa itu Pixel?
pix·el
akronim dari “picture element”
unit terkecil dari gambar digital
setiap pixel memuat 1 warna
konsep pixel & penamaannya ditemukan oleh
seorang engineer bernama Frederic C.
Billingsley yang bekerja untuk JPL pada tahun
1965.
Pixel Pikachu
Frederic Billingsley

4. Implementasi Pixel

5. Kembali ke Mario
Seiring perkembangan
teknologi display dalam 20
tahun terakhir, jumlah
pixel yang tersedia
semakin besar.
Bandingkan karakter Mario
di tahun 1985 yang sebesar
16 x 32 pixel
Dan Mario di tahun 2015
yang bisa memuat jutaan
pixel.

6. Aspect
Ratio Resolusi Kategori Tipe / Contoh
[4:3] 640 x 480 Monitor Tabung (CRT)
[4:3] 800 x 600 Monitor Tabung (CRT)
[4:3] 1024 x 768 Monitor Tabung (CRT)
[16:9] 1280 x 720 (720p) Televisi HD
[16:10] 1280 x 800 Monitor Widescreen
[16:9] 1366 x 768 Monitor Widescreen
[16:9] 1920 x 1080 (1080p) Televisi Full HD
[16:10] 1920 x 1200 Monitor Widescreen 24” keatas
[16:9] 2560 x 1440 (Quad HD) iMac 27”, Nexus 6p, Galaxy Note 4, Galaxy S7
[16:10] 2560 x 1600 Retina MBP 13”
[16:10] 2880 x 1800 Retina MBP 15”
[16:9] 3840 x 2160 (4K UHD) Televisi 4K
[16:9] 5120 x 2880 (5K) iMac 5K
[16:9] 7680 x 4320 (8K UHD) Televisi 8K
Display Populer

7. Display di Handphone
Phone Resolusi Diagonal Density
Galaxy S7 Edge 1,440 x 2,560 5.5 inch 534 ppi
Nexus 6p 1,440 x 2,560 5.7 inch 515 ppi
Nexus 5x 1,920 x 1,080 4.7 inch 424 ppi
iPhone 6 Plus 1,920 x 1,080 5.5 inch 401 ppi
iPhone 6 1,334 x 750 4.7 inch 326 ppi
iPhone 5 1,136 x 640 4 inch 326 ppi
iPhone 4 960 x 640 4 inch 326 ppi
iPhone 3G 480 x 320 3.5 inch 163 ppi

8. Resolusi & Density
Screen Density = (diagonal resolution) / (diagonal size)
Satuan Screen Density = pixel per inch (ppi) atau dot per inch (dpi)
Misal: iPhone 6/6s plus
resolusi lebar 1,920 pixel
resolusi tinggi 1,080 pixel
resolusi diagonal = (1920^2+1080^2)^0.5 = 2,203~ pixel
lebar layar = 2.69 inch
tinggi layar = 4.79 inch
diagonal layar = (2.69^2+4.79^2)^0.5 = 5.5~ inch
screen density = 2202 pixel / 5.5 inch = 401 pixel per inch

9. Retina Display ?
“It turns out there’s a magic number right around 300 pixels per inch, that when
you hold something around to 10 to 12 inches away from your eyes, is the limit of
the human retina to differentiate the pixels.”
- Steve Jobs

10. Implikasi “Retina” display bagi kita-kita ?
Bagi Pengguna “Awam”
● WOW GAMBARNYA TAJAM
● KOK BLUR YAH?
Bagi Desainer?
● Desain di high-resolution!
○ Icon di Apple App Store minta 1024 x 1024 pixels.
● Vector image is your friend.
○ Bisa diresize sebesar / sekecil mungkin, dan “ga pecah”
● Satu image, banyak resolusi.
○ Beda device, beda ppi, beda image.
Bagi Developer?
● Mainly image targeting & processing

11. Implikasi “Retina” display bagi kita-kita ?
Bagi Web Developer
● Media-query untuk targeting high-res device
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
/* High-res styles go here */
.logo {
background-image:url(assets/sprite@2x.png);
background-size:500px 500px;
}
}
● Menggunakan Retina.JS
There are now 4 ways to use retina.js:
1. Automatically swapping out "src" paths on "img" tags.
2. Automatically swapping out background image URLs in inline styles.
3. Manually specifying the location of a high-res image variant.
4. Automatically creating media queries for CSS background images.
● High-res image tidak selalu big-size image
○ Photoshop JPEG Compression (set quality ga harus 100)
○ TinyJPG.com & TinyPNG.com
○ JPEGMini.com
○ Pengguna OSX => imageAlpha & imageOptim

12. Implikasi “Retina” display bagi kita-kita ?
Bagi Android Developer
● Beda Device - Beda Density
○ ldpi (low) ~120dpi
○ mdpi (medium) ~160dpi
○ hdpi (high) ~240dpi
○ xhdpi (extra-high) ~320dpi
○ xxhdpi (extra-extra-high) ~480dpi
○ xxxhdpi (extra-extra-extra-high) ~640dpi
● Implementasi?
res/layout/my_layout.xml // layout for normal screen size ("default")
res/layout-large/my_layout.xml // layout for large screen size
res/layout-xlarge/my_layout.xml // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra-large in landscape orientation
res/drawable-mdpi/graphic.png // bitmap for medium-density
res/drawable-hdpi/graphic.png // bitmap for high-density
res/drawable-xhdpi/graphic.png // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png // bitmap for extra-extra-high-density
res/mipmap-mdpi/my_icon.png // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png // launcher icon for extra-extra-extra-high-density
● Beda Device - Beda Layout
○ xlarge screens => at least 960dp x 720dp
○ large screens => at least 640dp x 480dp
○ normal screens => at least 470dp x 320dp
○ small screens => at least 426dp x 320dp

13. Implikasi “Retina” display bagi kita-kita ?
Bagi iOS Developer
● Beda Device - Beda Assets Resolution
○ iPhone 6/6s plus @3x
○ iPhone 6, 6SE, 5, 5S, 5C @2x
○ iPhone 4, 4S @2x
○ iPhone @1x
○ iPad Pro @2x
○ iPad Air / Retina iPad @2x
○ iPad Mini 2nd & 3rd gen @2x
○ iPad Mini 1st gen @1x
○ iPad @1x

14. Referensi?
https://material.google.com/layout/units-measurements.html
https://developer.android.com/guide/practices/screens_support.html

15. Referensi?
https://developer.apple.com/high-resolution/

16. Makasih
@lawrencegs - Indosystem 2016