Secara sederhana PNG adalah foto yang bisa menghasilkan latar belakang transparan, memberi fokus pada objek utamanya dengan latar belakang mengikuti latar belakang yang ada. Pada jpeg semua bidangnya penuh gambar dan latar belakangnya akan menimpa latar belakang halaman blog.
Sebuah foto bisa dibuat ke dalam format PNG dengan Photoshop atau produk lainnya, Fireworks misalnya. Jika foto JPEG bisa dioptimasi berdasarkan persentase kualitas, 60% ke atas High, 30 - 59% medium, dan 29% ke bawah low, maka image PNG di PhotoShop hanya memberi dua pilihan, PNG-24 dan PNG-8. Pada Fireworks ada pilihan untuk PNG-32
Angka 8 berarti 8 bit. Format ini bisa menampilkan sampai 256 warna, sama dengan GIF, dan menggunakan metode kompresi 'lossless' yang menghasilkan file berukuran 10-30% lebih kecil ketimbang JPEG.
Grafis kecil, line-art, dan logo tanpa gradien bisa menggunakan PNG-8, namun tidak cocok untuk grafis kompleks dengan gradien warna dan foto.
Sedangkan PNG-24 mendukung 16 juta warna dan akan mempertahankan variasi seperti gradien warna sehingga baik digunakan untuk konsistensi merk, namun karena itu ukuran file-nya akan lebih besar ketimbang PNG 8.
Untuk menempatkan image PNG di atas JPEG, lakukan hal berikut ini:
Jika image Anda berdampingan, gunakan css berikut ini
img1
{
position: relative;
height: 200px; width: 200px;
z-index: 1;
}
img2
{
position: relative;
height: 100px; width: 100px;
z-index: 2;
left: -100px;
}Jika image Anda ada di atas dan bawah, maka css Anda adalah:
img1
{
position: relative;
height: 200px; width: 200px;
z-index: 1;
}
img2
{
position: relative;
height: 100px; width: 100px;
z-index: 2;
top: -100px;
}Angka height dan width sesuaikan dengan image Anda, dan angka pada top serta left disesuaikan dengan kebutuhan posisi image yang Anda inginkan.
Hasilnya seperti Anda lihat pada logo Aroengbinang pada bagian atas halaman ini.
Label: Tutorial, WordPress
Bagikan ke: WhatsApp, Email. Print!.
