Optimasi Gambar


Deden Fathurahman

Sebagai developer, terutama web developer, load time dari satu halaman adalah penting, karena ini bisa dijadikan acuan apakah user akan tetap di web kita atau pergi karena load time website kita yang lama.

Beberapa cara yang digunakan untuk mengurangi load time antara lain dengan browser cache, konfigurasi di webserver, mungkin juga menggunakan proxy cache, dan lainnya, dari banyak hal yang bisa dilakukan salah satunya adalah optimasi gambar, karena file gambar bisa sangat menyita waktu untuk loading, apalagi jika website anda mengandalkan media gambar sebagai alat komunikasi, misalkan e-commerce.

Beberapa pilihan alat untuk mengompress gambar, bisa untuk desktop maupun CLI, untuk command line, saya menggunakan jpegoptim dan pngout sebagai tools untuk mengompress file gambar.

Saya menggunakan ubuntu 14.04 LTS sebagai base dari sistem operasi server
$ sudo apt-get install jpegoptim pngout
menjalankan perintah $ jpegoptim file.jpg , hal ini akan mengompress file gambar dengan menghilangkan info-info yang tidak dibutuhkan seperti comment di exif, atau informasi lain yang menambah berat satu file.

Anda juga bisa menjalankan perintah jpegoptim agar bisa secara masif mengompress file dengan perintah

$ find . -type f -name "*.jpg" -exec jpegoptim -m90 --strip-all --all-progressive {} \;

Untuk perintah di atas, itu akan mencari file .jpg sampai ke dalam folder secara recursive, Opsi . di atas menunjukkan working directory yang sedang anda gunakan, jika hendak mengarahkan ke folder yang lain bisa ditulis PATH-nya, seperti perintah di bawah.

$ find /path/ke/gambar/ -type f -name "*.jpg" -exec jpegoptim -m90 --strip-all --all-progressive {} \;

Opsi yang digunakan adalah -m90 artinya menggunakan kualitas 90, --strip-all menghilangkan informasi exif yang tidak terpakai, dan --all-progressive opsi ini untuk menjadikan gambar itu progressive mode.
Output:
/path/ke/file_gambar.jpg 100x150 24bit N JFIF [OK] 2706 --> 2580 bytes (4.66%), optimized.

note: terkadang ada kasus dimana file anda akan hilang permission code-nya, dan tidak bisa diakses oleh borwser, ini bisa diakali dengan menambahkan perintah seperti berikut

find . -type f -name "*.jpg" -exec jpegoptim -m90 --strip-all --all-progressive {} \; -exec chmod 677 {} \;

dengan cara di atas, anda mengembalikan permission file agar bisa dibaca oleh webserver dan akhirnya ditampilkan ke browser.

Read more →

Issue #4


Deden Fathurahman

News
Opinion
Tutorial
Tools

follow on twitter @JakartaDev

Read more →

Daily Digest #4


Deden Fathurahman

Read more →

Issue #3


Deden Fathurahman

News

Opini

Tutorial

Tools

follow on twitter @JakartaDev

Read more →

Daily Digest #3


Deden Fathurahman

follow on twitter @JakartaDev

Read more →

Manajemen API dengan Kong part 1


Deden Fathurahman

Anda sudah mempublish API anda untuk digunakan oleh Developer lain? saatnya untuk mengatur API yang telah anda buat. Seperti yang biasanya terjadi, untuk mengakses resource API ini sudah pasti diperlukan beberapa penambahan baik dari sisi security ataupun dari scalability. Disitulah Kong bisa dijadikan solusi untuk anda dalam mengatur API yang telah anda develop.

Di sini akan dilakukan pendekatan instalasi Kong dengan menggunakan Vagrant sebagai box development.

Jika belum mengenal Vagrant, silakan kunjungi situs mereka, pada dasarnya vagrant adalah wrapper yang bisa digunakan untuk membuat dan mengatur image VM. dan kalo sudah, ambil salah satu .box vagrant yang bisa digunakan di sini, kalo berminat membuatnya, bisa baca artikel ini (shameless plug).

memulai vagrant

Jika sudah memiliki vagrantbox, dan sudah diimport, loncat ke paragraf berikutnya, jika belum, lakukan perintah berikut.

$ vagrant box add ubuntu14 /path/to/vagrant_image.box
lakuan pengecekan
$ vagrant boxt list
jika sudah ada di box list, clone repo kong

  1. clone Kong repo

    $ git clone https://github.com/Mashape/kong

  2. clone vagrant Kong repo

    $ git clone https://github.com/Mashape/kong-vagrant
    $ cd kong-vagrant

  3. jalankan vagrant karena jika menjalankan vagrant dengan langsung mendownload dari repo vagrant akan sangat menyita waktu, jadi disarankan anda mendownload box terlebih dahulu dan menambahkannya ke box list vagrant local anda. di folder kong-vagrant, edit file Vagrantfile line 32, 33, ubah dengan nama vagrant box yang sudah anda assign.

    config.vm.box = "precise64"
    config.vm.box_url = "http://files.vagrantup.com/precise64.box"

    menjadi misalkan

    config.vm.box = "ubuntu14"
    config.vm.box_url = ""

    ini tidak perlu lagi ditambahkan, karena sudah melakukan vagrant box add sebelumnya.

    simpan, lalu jalankan
    $ vagrant up

    vagrant akan meng-import box dan memulai booting VM, dan vagrant juga akan menjalankan provosioning script yang ada, dan juga akan melakuan instalasi kong dengan otomatis karena mengacu pada path ../kong yang sebelumnya telah kita clone dari repo.

    jika selesai instalasi akan menampilkan log seperti ini,

    log

  4. Jalankan service

    $ vagrant ssh
    VM-$ kong [start | reload | stop]

    Kong akan berjalan di http, dengan port :8000 untuk proxy layer, dan port :8001 untuk ReSTful Admin API config.

    test service dengan perintah $ curl http://localhost:8000

Read more →