Gambar raster dapat dianggap sebagai satu set petunjuk piksel demi piksel untuk merender kisi dua dimensi. Format gambar raster umum mencakup GIF (.gif), JPEG (.jpg), PNG (.png), dan WebP (.webp). Cara setiap format gambar mengompresi dan mengenkode petunjuk ini berbeda-beda, sehingga menghasilkan perbedaan besar antara ukuran file: gambar foto yang dienkode sebagai JPEG mungkin hanya berukuran beberapa ratus kilobyte, sedangkan gambar yang sama yang dienkode sebagai PNG mungkin berukuran beberapa megabyte, tanpa perbedaan kualitas yang terlihat bagi pengguna akhir.
Sumber gambar raster yang diskalakan ke luar dimensi yang melekat akan tampak terdistorsi, kotak-kotak, atau diburamkan:
Untuk karya seni yang berisi tingkat detail dunia nyata, gambar raster adalah alat yang tepat untuk tugas itu.
Sama seperti memilih antara gambar raster dan vektor, memilih jenis gambar raster yang sesuai pada akhirnya akan sesuai dengan kasus penggunaan. Saat kami membagi gambar raster ke encoding-nya, yang sebenarnya kita bicarakan adalah metode yang digunakan untuk mendeskripsikan kontennya, dan metode kompresi (atau ketiadaan) yang kita terapkan. Perlu diingat bahwa server tidak mengirim gambar melalui kabel ke browser, tetapi aliran byte yang menjelaskan petak piksel yang membentuk gambar tersebut untuk dikomposisi ulang oleh klien.
Jadi, untuk memvisualisasikan proses encoding kisi piksel sebagai data byte dengan lebih baik, Anda dapat membayangkan bahwa Anda bertindak sebagai {i>browser<i} web. Anda memiliki selembar kertas grafik milimeter dan paket krayon nama merek tertentu. Saya, sebagai server web, memiliki hal yang sama persis—tetapi saya sudah menggunakan krayon untuk mengisi kertas grafik dengan gambar sumber. Jika saya mengirim pesan teks biasa kepada Anda, saya tidak bisa mengirimi Anda gambar itu sendiri, tetapi saya dapat menyampaikan informasi tentang sumber gambar dalam bahasa yang kita pahami bersama menggunakan standar bersama untuk kisi dan warna "piksel" kita:
Mulai dari kiri atas. Baris satu, kolom satu berwarna biru. Baris satu, kolom dua berwarna biru. Baris satu, kolom tiga berwarna biru. Baris satu, kolom empat berwarna merah.
Dengan menggunakan informasi tekstual ini, Anda dapat dengan sempurna menciptakan kembali gambar yang saya miliki di selembar kertas grafik saya.
Perbedaan format gambar dan cara dienkode sebagai data dapat dianggap longgar sebagai cara informasi ini diformat. Misalnya, informasi yang saya kirimkan kepada Anda dapat dinyatakan dengan mudah seperti:
Mulai dari kiri atas. Baris satu, kolom satu sampai tiga berwarna biru. Baris satu, kolom empat berwarna merah.
Salah satu deskripsi ini akan menghasilkan gambar yang sama, tetapi deskripsi kedua berhasil mendeskripsikan gambar yang sama dengan lebih sedikit karakter. Ini adalah metode lossless untuk mengompresi data gambar: semua informasi yang sama—dan dengan demikian, tanpa penurunan fidelitas visual—tetapi lebih sedikit byte yang ditransfer melalui kabel dari saya ke Anda—dari server ke mesin rendering. Ini adalah bahasa biasa yang setara dengan “encoding run-length” untuk data gambar, dengan data dienkode sebagai nilai yang akan diulang dan jumlah, bukan mengulangi nilai penuh beberapa kali.
Kompresi terbalik yang lossy mungkin terdengar seperti awalnya tidak sesuai dengan nilai aslinya—mengapa Anda ingin gambar Anda terlihat lebih buruk? Meskipun begitu, perlu diingat bahwa mata kita juga tidak memiliki fidelitas yang sempurna. Memilih format dan setelan yang tepat untuk kompresi gambar merupakan latihan dalam menemukan keseimbangan antara tingkat detail visual yang dapat kami rasakan dan jumlah data yang dikirim ke browser. Kedua faktor ini ditentukan oleh konten gambar sumber.
Format gambar raster adalah gambar yang mungkin paling Anda kenal sebagai developer—GIF, JPEG, PNG, WebP, dan banyak lagi. Anda akan mempelajari kemampuan masing-masing modul dalam beberapa modul berikutnya.