[TUTORIAL] Cara Layout Gambar (Resize, Manambahkan Link Pada Gambar)

[Husna QA]

Artikel by : Husna QA (AltcoinsTalks.com, u=19772)
NOTE:

• Pastikan untuk menyertakan sumber gambar, jika anda hendak menggunakan gambar milik orang lain/dari website lain.
• Untuk Forum AltcoinsTalks, harap diperhatikan:
  
  • Dilarang menggunakan shortened link.
    Lebih lengkapnya baca disini: https://www.altcoinstalks.com/index.php?topic=15413.0
  • Dilarang mencantumkan link ke forum yang sejenis dengan AltcoinsTalks.
    (Sebutkan nama penulis/pemilik asli artikel/gambar sumber nya saja).
  • Dilarang mencantumkan link referral pada board yang bukan peruntukkannya.
    Silahkan baca diantara peraturannya pada link berikut : https://www.altcoinstalks.com/index.php?topic=11055.0

UPLOAD GAMBAR
Lewati langkah ini (upload), jika anda mencantumkan gambar menggunakan link dari website lain.

Sebelum upload gambar, perhatikan poin-poin berikut:

• Gunakan format gambar ber-extension *.png atau *.jpg/jpeg (Color mode: RGB).
  Saya lebih menyarankan format *.png, karena berdasarkan pengalaman saya,
  untuk format *.jpg/jpeg gambar yang dihasilkan sedikit blur,
  meskipun file size tidak terpaut jauh dengan gambar yang sama namun menggunakan format *.png
• Jangan mengupload gambar dengan file size yang terlalu besar.
  Usahakan masih dibawah 1 mb.
  Karena jika file size terlalu besar, tentu akan membuat loading/download gambar tersebut menjadi lebih lama.
  Gunakan aplikasi pengolah gambar untuk me-resize file nya (Photoshop, GIMP, dan sejenisnya).

Ada banyak website yang menyediakan layanan untuk upload gambar secara gratis,
beberapa diantaranya anda bisa temukan disini : http://lmgtfy.com/?q=Situs+untuk+upload+gambar
Yang sering saya gunakan adalah https://imgur.com/

Mari kita mulai.
- Siapkan gambar yang akan di-upload

Saya mencontohkan dengan gambar berikut :

Sumber : https://www.altcoinstalks.com/index.php?topic=1887.0

File size (png): 50 kb
Image size (original): 600 pixels x 314 pixels
- Buka Website https://imgur.com

Klik tombol New post (Anda masih bisa post tanpa sign in ke websitenya).
Klik Browse atau drag file gambar yang akan di upload
Tunggu upload selesai 100%, (anda bisa menambahkan file yang lainnya dengan klik + Add another image)
CARA MENDAPATKAN BBCode LINK GAMBAR
a. Cara singkat:

Klik kanan pada gambar yang sudah diupload tadi kemudian Copy Image Adress
Pada contoh gambar diatas hasil link nya (bila di paste) seperti ini : https://i.imgur.com/uzkKE9r.png

Link tersebut lah yang nantinya kita paste diantara Tags Image

Code: [Select]

[img]https://i.imgur.com/uzkKE9r.png[/img]
Hasilnya seperti ini:



b. Cara lebih detail:

Arahkan kursor pada gambar, di sudut kanan atas akan muncul tombol dropdown, pilih Get share links



Akan muncul windows Share Option, pilih Copy pada BBCode (Forums)


Note:
Untuk gambar yang kita dapat dari link website lain, caranya lebih mudah
(jadi kita tidak perlu upload lagi)
tinggal di Copy saja link website nya pada Tags Image.

Contohnya link dari website lain: https://pbs.twimg.com/media/DNi2u-LW4AAcTpq.jpg:large
Maka penempatan kodenya seperti berikut ini:

Code: [Select]

[img]https://pbs.twimg.com/media/DNi2u-LW4AAcTpq.jpg:large[/img]

MERUBAH UKURAN (RESIZE) GAMBAR
a. Cara pertama (sedikit ribet, saya sarankan cara kedua).

Edit gambar menggunakan aplikasi pengolah gambar (Photoshop, GIMP, atau yang semisalnya).
Ubah ukuran gambar (diperbesar/diperkecil).
Setelah itu upload seperti cara yang telah saya sebutkan diatas.
Cara ini saya katakan sedikit ribet, karena jika sewaktu-waktu anda ingin merubah ukuran gambar, anda mesti upload kembali file hasil editnya.

b. Cara kedua (lebih simpel, karena hanya merubah di BBCode nya saja).

Tambahkan kode width= … pada BBCode image (titik-titik diisi dengan ukuran dalam pixel yang kita inginkan).
Untuk height otomatis menyesuaikan secara proporsional.

Contoh:

Code: [Select]

[img width=250]https://i.imgur.com/uzkKE9r.png[/img]


Anda bisa bereksperimen dengan menambahkan height=... pada BBCode

Contoh:

Code: [Select]

[img width=250 height=75]https://i.imgur.com/uzkKE9r.png[/img]

Code: [Select]

[img width=250 height=135]https://i.imgur.com/uzkKE9r.png[/img]


MENYUSUN BEBERAPA GAMBAR DALAM SATU BARIS
Note: width dari gambar jangan terlalu besar.

Cara ke-1
Menempatkan langsung beberapa BBCode image dalam satu baris code (saya hanya menambahkan spasi pada setiap Tag image agar ada jarak diantara gambar).

Code: [Select]

[img width=250]https://i.imgur.com/uzkKE9r.png[/img] [img width=250]https://pbs.twimg.com/media/DNi2u-LW4AAcTpq.jpg:large[/img]


Cara ke-2
Menggunakan BBCode Tabel (saya menambahkan Tag Center agar posisi gambar berada di tengah):

Code: [Select]

[center]
[table]
[tr]
[td][center]Gambar 1[/center][/td]
[td][center]Gambar 2[/center][/td]
[/tr]
[tr]
[td][img width=250]https://i.imgur.com/uzkKE9r.png[/img][/td]
[td][img width=250]https://pbs.twimg.com/media/DNi2u-LW4AAcTpq.jpg:large[/img][/td]
[/tr]
[/table]
[/center]


Gambar 1	Gambar 2

Note: Untuk mempelajari BBCode lebih lanjut, InsyaAlloh, pada tutorial berikutnya.
MENAMBAHKAN LINK PADA GAMBAR
Caranya:

• Siapkan link website yang akan kita direct.
  Contoh kali ini saya menggunakan link website AltcoinsTalks:
  https://www.altcoinstalks.com
• Siapkan link gambar yang sudah diupload untuk dijadikan shortcut ke link website tersebut:
  https://i.imgur.com/uzkKE9r.png

Berikut ini cara penulisan BBcode nya:

Code: [Select]

[url=https://www.altcoinstalks.com][img]https://i.imgur.com/uzkKE9r.png[/img][/url]
Seperti ini hasilnya (silahkan di klik gambar dibawah ini):


Contoh lain, link gambar saya ambil langsung dari website lain/link aslinya.
(Jadi saya tidak melakukan proses upload gambar) :

Code: [Select]

[url=https://www.shutterstock.com/image-vector/conceptual-vector-illustration-global-problems-humanity-442116157][img height=175]https://thumb7.shutterstock.com/display_pic_with_logo/2706775/442116157/stock-vector-conceptual-vector-illustration-global-problems-of-humanity-stop-plagiarism-442116157.jpg[/img][/url]   [url=https://www.freepik.com/premium-photo/block-spam-text-on-keyboard-button_1337039.htm#term=spam&page=1&position=9][img height=175]https://image.freepik.com/free-photo/block-spam-text-on-keyboard-button_2227-380.jpg[/img][/url]  [url=https://giphy.com/explore/altcoin][img height=175]https://media2.giphy.com/media/9B2K1obV2EIfK/200w.gif[/img][/url]    
Referensi Gambar:
www.altcoinstalks.com - https://i.imgur.com/uzkKE9r.png
www.shutterstock.com
www.freepik.com
https://giphy.com/explore/altcoin

• Silahkan didiskusikan jika ada yang ingin menambahkan, meralat atau ada yang ingin ditanyakan.
• Mohon untuk tidak Posting yang mengarah ke SPAM.
• Tidak meng-Copy artikel ini tanpa seizin Husna QA atau tanpa mencantumkan sumber ke link artikel ini.

Terima kasih.
Semoga bermanfaat.

[Ptra]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

[Husna QA]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

Untuk forum ini sepengetahuan saya masih belum ada peraturan yang membatasi bagi newbie untuk memasang gambar.
Namun gunakan dengan bijak fitur ini. Karena gambar biasanya memiliki size tersendiri yang rata-rata lebih besar dari sekedar teks biasa.

[tresna]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

kalau untuk pengguna baru atau newbie sudah bisa pasang avatar kok gan, silahkan dicoba kalau penasaran

[kuntoaji]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

tidak ada batasan untuk avatar gan, semua dapat mencobanya. Mulai dari Jr. Member sampai Hero Member

[tommyrinaldi]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

Untuk forum ini sepengetahuan saya masih belum ada peraturan yang membatasi bagi newbie untuk memasang gambar.
Namun gunakan dengan bijak fitur ini. Karena gambar biasanya memiliki size tersendiri yang rata-rata lebih besar dari sekedar teks biasa.

maksutnya dari gambar biasanya memiliki size tersendiri yang rata-rata lebih besar dari sekedar teks biasa itu apa om?

[Riyan Syafa]

Maaf sebelumnya gan . Apa ini berlaku untuk pengguna baru gan atau minimal harus mencapai rang jr.member gan

tidak ada batasan untuk avatar gan, semua dapat mencobanya. Mulai dari Jr. Member sampai Hero Member

Ralat gan, sudah dijelaskan sebelumnya untuk pasang avatar tidak ada batasan rank, mulai dr Newbi udah bisa pasang avatar.
Terima kasih

[Husna QA]

-snip-
maksutnya dari gambar biasanya memiliki size tersendiri yang rata-rata lebih besar dari sekedar teks biasa itu apa om?

Saya illustrasikan dengan gambar



Perhatikan masing-masing size dari ketiga file yang saya gunakan diatas.
File teks yang saya gunakan untuk materi pada thread ini hanya 10 KB saja,
Coba lihat kedua contoh dari file gambar yang berformat GIF dan PNG masing-masing berapa size nya? lebih besar kan?
Nah coba bayangkan bila anda menggunakan file dengan resolusi yang lebih besar sehingga size file dari gambar pun lebih besar lagi, maka saat user/orang lain mengakses thread atau suatu website, maka akan lambat/lama loading halaman website tersebut.
Berbeda ketika kita mencantumkan gambar yang resolusi filenya kecil, maka saat mengaksesnya pun akan lebih ringan (tidak lemot loading nya).

Ingat semakin besar size gambar yang kita cantumkan, maka semakin besar pula 'kuota data' yang terpakai untuk membukanya saat online

[indah]

maaf nanya sedikit untuk gambar sendiri apa dalam masalah poin
ada tambahan yang lebih banyak karena yang saya tahu untuk poin sendiri sudah tidak seperti awal awal saya ikut
mungkin bisa di katakan bonuslah  apabila tread lengkap dengan penunjang gambar mungkin seperti itu...?

[Husna QA]

maaf nanya sedikit untuk gambar sendiri apa dalam masalah poin
ada tambahan yang lebih banyak
-snip-?

Sepengetahuan saya tidak ada bonus tambahan poin untuk gambar.

Logikanya seperti ini:
Saat anda meng-Quote pada postingan yang mencantumkan gambar (Contoh post thread ini),
Kemudian coba lihat pada post Modify message
apakah tercantum gambar?

Anda tidak akan menemukan gambar, yang ada adalah berupa teks link yang mengarahkan ke sumber gambar yang sebelumnya kita upload/ambil link-nya dari website lain.

[kuntoaji]

Sepengetahuan saya tidak ada bonus tambahan poin untuk gambar.

Logikanya seperti ini:
Saat anda meng-Quote pada postingan
-snip-

jadi intinya gambar itu tidak berpengaruh terhadap poin atau di artikan tidak akan mendapatkan poin tambahan meskipun di beri gambar ya gan?

[tommyrinaldi]

Saya illustrasikan dengan gambar
-snip-

jadi seperti itu om kalau semakin besar size gambarnya nanti bakalan berpengaruh ke thread kita yang dibuka bakalan lemot, terimakasih informasinya agan husna

[Husna QA]

-snip-
jadi intinya gambar itu tidak berpengaruh terhadap poin atau di artikan tidak akan mendapatkan poin tambahan meskipun di beri gambar ya gan?

Untuk pengaruh terhadap poin, YA. Hanya saja tidak terlalu signifikan penambahan poinnya.
Yang tidak ada adalah: bonus tambahan poin seperti yang sudah saya jelaskan sebelumnya.

-snip-
jadi seperti itu om kalau semakin besar size gambarnya nanti bakalan berpengaruh ke thread kita yang dibuka bakalan lemot, terimakasih informasinya agan husna

Ya, lemot atau tidaknya tergantung koneksi internet yang kita gunakan juga.

[arielyanuarka]

saya pengen mencoba menyusun beberapa gambar menjadi satu baris gan
tapi saya takut nanti hasilnya malah amburadul tak beraturan

[farhankurniawan]

jadi intinya gambar itu tidak berpengaruh terhadap poin atau di artikan tidak akan mendapatkan poin tambahan meskipun di beri gambar ya gan?

ya tidak berpengaruh lah gan, mungkin gambar itu hanya untuk hiasan profil altcointalk saja tidak ada poin tambahan khusus