Skip to main content

Cara Kompres Gambar PNG dengan TinyPNG

File gambar dengan format PNG sangat berguna dalam sebuah web desain. Sifat PNG yang dapat menyimpan gambar transparan sangat berguna dalam beberapa hal, seperti membuat icon yang backgroundnya dapat berganti secara fleksibel melalui CSS. Tapi di balik keunggulannya, PNG juga memiliki kelemahan. Yaitu ukuran file PNG bisa jauh lebih besar jika dibandingkan gambar dengan format JPG. Hal ini sangat berpengaruh pada kecepatan loading website kita.

Ukuran file PNG dapat dikurangi tanpa merendahkan kualitasnya.

Biasanya, untuk mengurangi ukuran file, kita harus mengurangi ukuran dimensi atau resolusinya. Hal ini menyebabkan kualitas gambar jadi menurun. Jadi bagaimana? Ada satu web tools yang dapat membantu anda mengurangi ukuran file gambar khusus format PNG secara signifikan. Namanya TinyPNG. Anda bisa membukanya di halaman tinypng.org.



TinyPNG adalah sebuah website yang menyediakan layanan gratis untuk kompresi file PNG anda. Dibanding Photoshop, TinyPNG mempunyai kelebihan, yakni pada ukuran file PNG yang dihasilkan. TinyPNG menggunakan teknik kompresi yang dapat mengurangi ukuran file PNG. Jumlah warna pada gambar PNG akan dikurangi secara selektif tanpa menurunkan kualitasnya. Tidak percaya? coba lihat gambar di bawah ini:

 Gambar sebelum dikompres Ukuran File : 56 KB  Gambar setelah dikompres Ukuran File : 16 KB
*gambar berasal dari website aslinya

Pada gambar di atas, ukuran file berkurang lebih dari 60%. Dan gambar hasil kompresi dari TinyPNG hampir tidak terlihat perbedaannya dengan gambar aslinya, tapi dalam ukuran file sangat jelas terlihat. Maka, anda bisa gunakan gambar hasil kompresi untuk menghemat bandwidth dan meningkatkan loading wesite Anda.

Bagaimana cara kerjanya?

Gunakan menu Save for Web pada Photoshop untuk mengekspor gambar transparan PNG Anda pada setting 24-bit. Kemudian unggah gambar tersebut ke TinyPNG. Ketika Anda mengunggah gambar PNG (Portable Network Graphic) pada website Tiny PNG, warna-warna yang mirip di gambar akan digabungkan. Teknik ini disebut juga dengan Quantisation. Karena warna dikurangi dengan teknik Quantisation, ukuran file PNG 24-bit akan akan berubah menjadi PNG 8-bit yang membuat ukuran file bisa jadi jauh lebih kecil. Bisa dicoba ;-)

Featured on MEBISO

Comments

Post a Comment

Popular posts from this blog

[Infografis] Panjang Ideal Sebuah Konten di Media Online

Sebuah sosial media akan terlihat lebih bermanfaat untuk penggunanya jika mereka membuat sebuah konten yang isinya berkualitas. Kualitas sebuah konten di sosial media bukan hanya dari seberapa panjang konten tersebut dituliskan, karena semakin panjang konten dituliskan tidak menjamin sebuah informasi dapat tersampaikan dengan baik kepada pembaca. Itu sebabnya panjang sebuah konten di sosial media sangat perlu untuk diperhatikan. Hal ini juga berkaitan dengan perbedaan sifat dan tampilan dari masing - masing sosial media. Oleh sebab itu, infografis berikut ini akan membantu menjelaskan bagaimana pentingnya mengatur panjang konten dan bagaimana menentukan panjang isi dari konten untuk masing - masing sosial media. 1. Postingan Facebook : Kurang dari 40 karakter 10 Powerful Tips to Increase Fan Engagement on Facebook by Jeff Bullas “ Very concise Posts – those between one and 40 characters – generate highest engagement “ ( sumber ) 2. Tweet : 100 karakter Twitter‘s Best...
Post a Comment
Read more

10 Percobaan CodePen yang Membuktikan Anda tidak Butuh Flash untuk Animasi Website

Web programmer seringkali membuat website interaktif dengan memakai flash. Sayangnya tidak semua browser dilengkapi Flash Player secara built-in, sehingga browser harus lebih dulu di install Flash Player untuk menjalankan animasi buatan anda.
Post a Comment
Read more

10 Tren Terbaru Desain Logo di Tahun 2014

Sebuah logo merupakan komponen penting jika kita berbicara branding dalam sebuah bisnis. Sekarang banyak pemilik startup merasa perlu adanya sebuah logo yang baik untuk dapat merepresentasikan bisnisnya sekaligus menjadi identitas dari startup tersebut.
Post a Comment
Read more