Mempercepat Blog #4 - Kompres Ukuran KB Gambar Menjadi Lebih Kecil

Cara Mempercepat Loading Blog Dengan Optimasi Gambar

Salah satu elemen yang membuat artikel terlihat lebih menarik adalah gambar. Faktanya, orang akan lebih tertarik jika ada tambahan visual dalam hal apapun, termasuk dalam artikel blog. Jujur, lama-lama saya suka agak bosen kalau nemu artikel yang isinya tulisan doang. Kalau pendek sih nggak masalah. Tapi kalau panjangggg banget, duh, agak tandus aja gitu. Makanya saya selalu berusaha menambahkan gambar ke semua artikel di blog Igniel meskipun cuma satu. Itu saya doang lho ya. Kalau kamu betah baca tulisan panjang tanpa gambar, berarti minat baca kamu lebih baik dari saya.

Tapi dengan adanya gambar ini, muncul satu masalah yang sering dihadapi oleh penguna platform Blogger. Terlalu banyak gambar membuat loading blog kurang cepat. Apalagi kalau di dalam artikel ada lebih dari 5 gambar. Trus gimana dong cara mempercepat loading blog meskipun ada banyak gambar?

Solusinya, kamu bisa kompres gambar tersebut. Kompres disini maksudnya memperkecil ukuran KB gambar tanpa mengurangi kualias kejernihannya. Ini bisa banget mempercepat loading blog karena memperkecil ukuran keseluruhan halaman yang dimuat.

Cara Kompres Ukuran Gambar Atau Foto

Kamu bisa melakukannya dengan 2 cara: otomatis dan manual. Untuk otomatis, tinggal pergi ke situs-situs penyedia jasa kompres gambar yang gratis. Untuk manual, pakai software edit gambar di komputer.

1. Cara Otomatis: Kompres Gambar Online
Beberapa situs yang menyediakan jasa mengurangi size KB gambar yang bisa kamu coba antara lain:
  1. Compress JPEG
  2. Compress PNG
  3. TinyJPG
  4. Compressor.io
  5. ImageSmaller
  6. JPEG Optimizer
Dan lainnya bisa kamu cari sendiri. Banyak kok.

2. Cara Manual: Kompres Gambar Dengan Software
Ini cara yang selalu saya pakai. Yes, saya suka manual dengan segala keribetannya. Dan saya selalu pakai satu aplikasi yang sama: Adobe Photoshop CS6.
Kamu mau coba? Yuk ikuti langkah-langkahnya.
  1. Buka Adobe Photoshop. Versi berapapun bisa kok. Tapi di screenshot ini kebetulan saya pakai versi CS6.
  2. Buka gambar yang mau dikompres. Ada beberapa cara untuk membuka file di Adobe Photoshop. Diantaranya:
    1. Dengan cara drag and drop (tarik gambar dari folder ke workspace Photoshop).
    2. Atau dengan menekan secara bersamaan CTRL + O pada keyboard.
    3. Bisa juga dengan membuka menu File » Open
      Kompres Gambar Pakai Adobe Photoshop
  3. Setelah gambar terbuka, mulai kompres dengan cara menyimpan ulang gambarnya melalui fitur Save for Web. Bisa dilakukan dengan 2 cara, yaitu:
    1. Menekan secara bersamaan Alt + Shift + CTRL + S pada keyboard.
    2. Bisa juga dengan membuka menu File » Save for Web
    3. Memperkecil Ukuran Gambar Dengan Adobe Photoshop
  4. Akan muncul sebuah jendela baru. Kamu bisa atur kualitasnya disini. Sebagai contoh, ikuti panduan pada gambar berikut (klik untuk melihat ukuran sebenarnya, biar nggak kekecilan liatnya).
    Memperkecil Size Gambar Tetap Jernih Menggunakan Adobe Photoshop
    Keterangan gambar:
    1. Nomor 1
      Ekstensi gambar yang akan dilipih. Ada JPEG, GIF, dan PNG. Saya biasa pilih JPEG.
    2. Nomor 2
      Kualitas gambar. Pilihannya ada Low, Medium, High, Very High, Maximum. Nah, disini poin yang cukup penting. Semakin rendah tingkatannya, maka ukuran KB gambar akan semain kecil. Tapi imbasnya kejernihan gambar pun akan berkurang. Saya biasa pilih Medium, biar kualitasnya di tengah-tengah.
    3. Nomor 3
      Ukuran resolusi gambar. Kamu bisa perbesar atau perkecil ukuran pixelnya. Bagusnya sih biarkan apa adanya sesuai aslinya.
    4. Nomor 4
      Info perkiraan ukuran KB gambar ketika disimpan nanti.

  5. Jika selesai, klik tombol Save...

Setelah cara diatas dilakukan, bandingkan ukuran gambar sebelum dan sesudahnya. Pasti akan terdapat perbedaan yang lumayan. Ini salah satu cara efektif yang bisa membantu mempercepat loading blog. Asal kompresnya jangan kebangetan aja sampai kualitasnya menurun dan gambarnya jadi burem banget.
Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

10 Komentar

  1. Kalau saya sendiri sih pakai extention .PNG sih teh.. setingannya juga hampir sama. Meskipun ukuran PNG emang agak gede dari JPG, tapi gak terlalu berat juga sih ke blog.
    tapi yang berat justru JS dari Googleads sama analytic tuh teh..

    Meskipun blog saya di pagespeed insight gak nyampe 100% kayak igniel.com, tapi angka 97 udah cukup kali ya teh ? :p

    ReplyDelete
    Replies
    1. PNG memang lebih bagus dari JPEG ya kang. Pengen nyobain juga ah nanti.

      Udah bagus pisan atuh 97% mah :D

      Delete
  2. untuk Use cookie-free domains itu gimana caranya ya sis?
    bingung nyari tutorial tentang ini g nemu2

    ReplyDelete
    Replies
    1. Waktu dicek, yang masih kena use cookie free domain itu URL scriptnya / gambarnya apa? Coba tulis disini URLnya.

      Delete
  3. Banyak foto bikin berat loading blog. akhirnya cara kompres bisa baca disini.

    Terima kasih.

    ReplyDelete
  4. Artikel yang bermanfaat. Memang sih kalau dalam sebuah artikel tanpa gambar kesannya gimana gitu. Selain lebih memberi makna pada tulisan juga menunjang SEO juga. Katanya.

    ReplyDelete
  5. Maaf oot,
    Saya menemukan orang yang membagikan template blog ini
    99% mirip.
    Darimana saya bisa ngirim link web yang membagikan template itu ke kakak.
    Supaya bisa menegur atau apa gitu

    ReplyDelete
    Replies
    1. Ke halaman kontak kak makasih.
      https://www.igniel.com/p/contact.html

      Delete
    2. Sudah kak, silahkan di cek

      Delete
  6. lahhh..?
    gambar di postingan saya selalu upload format .jpg
    gimana dong.?? apa harus kompres ulang manual satu satu.??
    trus apakah ada hubungannya gambar tsb ke nilai pagespeed insight blog saya yang LULUS DENGAN SCORE 28 (dua puluh delapan). dengan predikat "BIKIN PUSING" mbaakkk..???
    tolong mbak, saya hampir kena gejala stroke mikirin itu

    ReplyDelete
  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.