Mengukur Gambar yang Dapat Diinstruksikan: 13 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Apakah Anda memiliki masalah dalam mendapatkan ukuran gambar dengan benar? Apakah ukuran gambar Anda terlalu besar dan memenuhi bingkai seperti di atas? Instruksi ini mencoba merangkum apa yang telah saya pelajari untuk mengatasi masalah ini.

Saya telah diberitahu oleh Staf yang Dapat Diinstruksikan bahwa semua gambar yang diunggah digandakan ke dalam berbagai rasio aspek. Kumpulan gambar ini kemudian ditarik dari dan berukuran berbeda tergantung pada perangkat apa yang Anda lihat instruksinya. Tidak ada cara untuk menentukan di editor biasa ukuran dan rasio apa yang akan ditampilkan.

Mereka kemudian menyarankan bahwa "Opsi lain yang mungkin berhasil adalah jika Anda mengunggah gambar dengan rasio aspek yang lebih tradisional. Apa pun dari 16:9 hingga 4:3 akan ditampilkan dengan sangat baik."

Perhatikan bahwa mereka mengatakan ini "mungkin" berhasil. Inilah yang saya temukan dalam perjuangan saya untuk menampilkan gambar saya dengan baik. (Perhatikan saya menggunakan gambar dari "kubus Rubik dibuat mudah" saya yang dapat diinstruksikan, maka semua gambar kubus itu!)

Gambar di atas adalah ukuran aslinya (600x195) yang tidak berada dalam rentang rasio aspek tradisional tersebut. Seperti yang Anda lihat, Instructables menampilkan gambar ini diperbesar terlalu besar dengan sisi kiri dan kanan terpotong. Mari kita lihat apa yang bisa kita lakukan untuk menampilkan gambar ini dengan benar.

Langkah 1: Mari Coba Rasio Aspek 16:9

Jadi mari kita coba rasio aspek 16:9 (lebar: tinggi). Saya akan mempertahankan lebar asli 600 piksel, 16:9 berarti tingginya harus 338 piksel jadi kita akan membuat kanvas berukuran 600x338 dan memasukkan gambar 600x195 itu ke dalamnya.

Jadi mari kita lihat bagaimana gambar 600x338 (rasio aspek 16:9) ini terlihat. Menariknya, ketika saya memasukkan gambar ini dan mempratinjaunya, itu sangat pas - tepi kiri dan kanan tidak terpotong! Saya ambil screenshotnya untuk bukti, lihat di slide berikutnya.

Tapi, ketika saya melihat ini di browser saya (Chrome) apa yang saya lihat pada gambar di atas, adalah bahwa sisi kanan dan kiri terpotong lagi! Jadi dari eksperimen ini, tampaknya mengubah ukuran ke rasio aspek 16:9 tidak akan menyelesaikan masalah kita!

Sebagai catatan tambahan, 16:9 adalah rasio aspek umum "baru" yang dikenal sebagai "layar lebar" sedangkan 4:3 adalah "layar penuh" jadul yang umum di masa TV tabung. Ya, Anda milenial mungkin tidak tahu apa yang saya bicarakan.

Langkah 2: Gambar 16:9 Baru Diunggah Seperti yang Dilihat di Pratinjau

Gambar ini adalah tangkapan layar yang menunjukkan bahwa gambar 16:9 kami terlihat sempurna di Pratinjau. Sukses kan? Yah, tidak begitu cepat - lihat apa yang terjadi ketika kita benar-benar melihat halaman ini di browser kita (Chrome)! Tepi kiri dan kanan terpotong lagi! Kembali saja untuk membiarkan slide sebelumnya dan lihat sendiri.

Pelajaran yang didapat - jangan percaya Pratinjau! Apa yang terlihat bagus di Pratinjau akan dirender secara berbeda dalam tampilan sebenarnya dengan browser!

Juga, ya, ada banyak ruang putih di bawah gambar saya. Itu karena saya menjatuhkan gambar 600x195 ke dalam kanvas 600x338 dan meletakkannya di atas, jadi ada semua ruang putih kosong di bagian bawah. Apa yang bisa kita lakukan tentang itu? Nah… kita akan coba membahasnya di slide selanjutnya.

Jadi mari kita lanjutkan untuk melihat bagaimana kita dapat membuat gambar ini ditampilkan secara keseluruhan.

Langkah 3: 16:9 Ditampilkan Dengan Sisi L&R Terpotong

Sebagai catatan, jika karena alasan apa pun browser Anda menampilkan gambar 16:9 ini dengan sempurna, inilah yang saya bicarakan. Berikut adalah tangkapan layar tentang bagaimana saya melihat gambar 16:9 saya di Langkah 1 ditampilkan setelah "menetap" setelah pratinjau awal - perhatikan kiri dan kanan terpotong.

Jika Anda melihat gambar Langkah 1 saya ditampilkan dengan sempurna, bagus, bagus. Biarkan aku tahu! Tapi ini adalah bagaimana saya melihatnya. Ya, itu jauh lebih baik daripada gambar asli dari halaman judul, tetapi masih terpotong. Jadi bagi saya, terlepas dari saran dari staf Instructables, rasio aspek 16:9 tidak cukup. Mari beralih ke rasio aspek 4:3.

Langkah 4: Mari Coba Rasio Aspek 4:3

Jadi mari kita coba rasio aspek 4:3. Saya akan mempertahankan lebar asli 600 piksel, 4:3 berarti tingginya harus 450 piksel jadi kita akan membuat kanvas berukuran 600x450 dan memasukkan gambar 600x195 itu ke dalamnya.

Bagaimana tampilan gambar 600x450 (rasio aspek 4:3) ini?

Sekali lagi, ketika saya pertama kali memasukkannya, gambar terlihat bagus (kecuali untuk semua ruang putih di bagian bawah). Kiri dan Kanan ditampilkan dengan baik. Melihatnya di browser, sepertinya Kanan & Kiri tampaknya terus ditampilkan dengan baik.

Seperti yang disebutkan sebelumnya, semua ruang putih kosong di bawah gambar adalah karena saya menjatuhkan gambar 600x195 saya ke kanvas 600x450 dan meletakkannya di atas.

Hal yang dipelajari - rasio aspek 4:3 tampaknya diperlukan agar sisi Kanan dan Kiri tidak terpotong. Sayangnya, ini berarti akan ada banyak ruang putih untuk gambar yang pendek dan lebar, karena Anda harus memasukkan gambar tersebut ke dalam kanvas berukuran 4:3. Ya, Anda bisa memusatkan gambar Anda sehingga ada ruang putih yang sama di bagian atas dan bawah tetapi terlepas dari itu, akan ada banyak ruang putih di atas atau di bawah gambar Anda, tetapi sepengetahuan saya, ini adalah kompromi yang akan Anda lakukan harus membuat di Instructables agar gambar Anda ditampilkan utuh.

Langkah 5: 4:3 Dengan Gambar Berpusat

Ini gambar 600x195 yang sama yang dijatuhkan ke kanvas 600x450 tetapi di tengah sehingga ada ruang putih kosong yang sama di bagian atas dan bawah. Terlihat sedikit lebih baik, teks tidak tampak terpisah jauh dari gambar.

Langkah 6: 4:3 Dengan Gambar di Bawah

Dan terakhir, inilah gambar yang sama yang dijatuhkan dan dipindahkan ke bawah. Sekarang ada banyak ruang putih kosong di atas gambar. Gambar sekarang benar-benar terpisah dari bilah judul, tetapi lebih dekat ke teks. Jadi ini adalah kompromi dan pelajaran yang Anda petik:

• 4:3 tampaknya merupakan rasio aspek yang perlu Anda gunakan agar gambar ditampilkan secara keseluruhan di Instructables.
• jangan percaya pratinjau - itu mungkin menampilkan gambar Anda dengan sempurna, tetapi bagian-bagiannya dapat terpotong di browser yang sebenarnya

Langkah 7: Berapa Lebar Minimum?

Sekarang mari kita lihat berapa lebar minimum yang seharusnya. Gambar yang ditampilkan berukuran 382x206, mendekati 2:1, terlihat sangat besar bukan? Jelas, Instructables telah memperbesar gambar agar sesuai dengan lebar yang ditentukan, mungkin 640 piksel, saya tidak yakin.

Tapi itu cocok karena lebih "persegi" - yaitu, tidak terlalu lebar untuk tingginya. Oh tunggu, saya tertipu oleh Pratinjau itu lagi! Sebenarnya tidak cocok - sisi R&L terpotong lagi.

Sebenarnya ini aneh, bukan hanya preview-nya saja yang kacau. Saya benar-benar melihatnya di browser dan pada awalnya ditampilkan dengan benar (yaitu, tepi R&L tidak terpotong). Tapi melihatnya melalui browser lagi, sekarang gambar dirender diubah ukurannya dengan tepi R&L terpotong. Aneh.

Jadi mari kita coba membuat gambar lebih kecil. Kami akan mengecilkan gambar menjadi 200x108, dengan menjaga rasio aspek 2:1 yang sama.

Langkah 8: Mengecilkan Gambar Tapi Menjaga Rasio Aspek

Jadi saya mengubah ukuran gambar itu menjadi 200x108, menjaga rasio aspek 2:1 yang sama.

Sekarang lagi tampaknya cocok pada awalnya (dengan resolusi (kualitas gambar) sangat menurun!) tapi tentu saja Anda mungkin melihatnya dan itu tidak cocok sama sekali, dan terlihat persis seperti gambar aslinya kecuali aslinya memiliki resolusi yang lebih baik. Sekali lagi, Instructables memperluas gambar agar sesuai dengan beberapa lebar yang ditetapkan jadi inilah mengapa gambar yang lebih kecil (200x108) ini terlihat sangat mengerikan, jauh lebih buruk daripada aslinya 382x206.

Saya mengatakan "mungkin" karena saya benar-benar tidak tahu bagaimana Instructables menampilkan gambar-gambar ini di browser Anda. Untuk alasan apa pun, jika saya menyegarkan cache saya dan meninjau Instructable ini, ukuran gambar saya tampaknya tidak tetap konsisten jadi saya benar-benar tidak tahu apa yang Instructable lakukan kecuali bahwa itu bisa tidak konsisten. Jadi tujuan dari Instruksi ini - untuk mengetahui bagaimana ukuran gambar sehingga mereka ditampilkan setidaknya agak konsisten!

Langkah 9: Buktikan Bahwa Gambar Dirender dengan Benar Pada Awalnya

Inilah yang saya lihat pertama kali segera setelah mengunggah gambar - cocok! (Perhatikan bahwa saya harus memasukkan tangkapan layar di atas ke dalam gambar 1600x1200 (yaitu, rasio 4:3) untuk membuat Instructables menampilkan seluruh tangkapan layar!)

Tapi tentu saja Anda tahu ketika Anda melihat gambar itu beberapa slide ke belakang sekarang, itu tidak pas lagi. Mari kita lihat berapa lebar minimum yang dibutuhkan untuk membuatnya pas.

Langkah 10: Mencoba 382x287 (Rasio 4:3)

Saya mempertahankan lebar 382 dan menjatuhkan gambar asli 382x206 ke dalam kanvas 382x287 untuk menjadikannya rasio aspek 4:3 karena kami sebelumnya telah menemukan bahwa Instructable membutuhkan gambar agar sesuai dengan rasio 4:3 untuk menampilkannya secara keseluruhan.

Jadi sekarang ada banyak ruang putih kosong di bawahnya. Ini cocok dengan tidak ada yang dipotong, tetapi sekali lagi telah diperluas untuk mengisi beberapa lebar yang ditentukan, sehingga gambarnya tidak tajam. Mari kita coba temukan lebar Instructable yang sempurna ini.

Langkah 11: Melebarkan Gambar Dari 300x206 menjadi 600x206 untuk Melihat Apakah Tampilannya Lebih Baik

Saya menjatuhkan gambar asli 382x206 (2:1) ke dalam kanvas 600x206 (3:1) hanya untuk melihat apakah melebarkannya menjadi 600 piksel akan membuat Instructables menampilkan seluruh gambar. Sekali lagi, pada awalnya memang demikian, tetapi seperti yang Anda lihat sekarang tidak.

Ini adalah hal yang sangat aneh - setiap kali, ketika Anda pertama kali memasukkan gambar, sepertinya Instructables akan menampilkan gambar itu dengan benar, tidak peduli apa ukuran atau rasio aspek gambar itu. Kali ini saya bahkan keluar dari Instructables dan menutup tab itu, dan kemudian mengunjungi kembali Instructable "segar" ini untuk memverifikasi apakah gambar masih ditampilkan dengan benar. Biasanya ini cukup untuk memungkinkan Instructable melakukan tugasnya dan mulai mengubah ukuran gambar yang tidak dalam rasio aspek 4:3 dan menampilkannya dengan sisi kiri dan kanan terpotong.

Yang mengejutkan saya, beberapa kali pertama saya mengunjungi "segar" yang dapat diinstruksikan ini gambar ini tetap ditampilkan secara keseluruhan, tetapi sayangnya, setelah saya pergi untuk melakukan sesuatu yang lain dan datang mungkin sekitar satu jam kemudian, gambar ini mulai ditampilkan diperbesar dengan sisi L&R terpotong lagi seperti yang Anda lihat di atas.

Mengapa atau bagaimana ini terjadi? Aku tidak tahu. Saya tidak tahu mengapa menunggu beberapa waktu setelah mengunggah gambar akan membuat Instructables merendernya secara berbeda, tetapi memang demikian. Sebagai buktinya, saya akan menunjukkan tangkapan layar saya dari gambar di atas yang ditampilkan dengan sempurna di oh pertama, 10-15 menit setelah saya mengunggahnya di slide berikutnya.

Langkah 12: Buktikan Bahwa Gambar Ditampilkan dengan Benar Awalnya Setelah Mengunggah

Berikut adalah tangkapan layar yang menunjukkan bahwa gambar 600x206 ditampilkan secara keseluruhan segera setelah diunggah. Ini adalah tangkapan layar dari slide sebelumnya. Kembali ke slide sebelumnya dan Anda dapat melihat bagaimana mendongkrak gambar sekarang!

Perhatikan bahwa tangkapan layar saya sebenarnya berukuran 1563x766 tetapi seperti yang saya pelajari dari eksperimen saya di awal Instruksi ini, saya tahu karena itu tidak sesuai dengan rasio aspek 4:3 (1563x766 kira-kira 4:2) jadi jika saya mau baru saja mengunggah tangkapan layar itu dalam ukuran aslinya yang Dapat Diinstruksikan akan memotong tepinya. Jadi saya menjatuhkan gambar itu ke kanvas 4:3 jadi itu sebabnya ada banyak ruang putih kosong di bawah tangkapan layar saya.

Perhatikan bahwa tangkapan layar juga diambil sebelum saya mengubah judul Langkah 11 dan selesai mengetik semua teks ini jika Anda bertanya-tanya tentang itu!

Pelajaran yang didapat - melihat gambar yang Anda unggah di browser segera setelah Anda mengunggahnya tidak serta merta menunjukkan bagaimana gambar itu akan ditampilkan di masa mendatang. Untuk alasan apa pun, hampir semua ukuran dan/atau gambar rasio aspek tampaknya ditampilkan dengan baik segera setelah mengunggah, dan bahkan selama sekitar 10-15 menit setelah mengunggah dan bahkan setelah Anda keluar dari Instructables dan melihatnya segar dari sesi browser baru, dll..

Tapi tunggu sekitar satu jam atau lebih, dan segalanya berubah! Gambar Anda, jika tidak sesuai dengan rasio aspek 4:3, akan disesuaikan (biasanya diperbesar) dengan Instructable sehingga tepinya terpotong.

Langkah 13: Intinya - Apa yang Saya Pelajari

Jadi intinya - apa yang saya pelajari?

1. Untuk menampilkan gambar secara keseluruhan, menjaga rasio aspek 4:3 (lebar: tinggi) adalah suatu keharusan!

2. Gunakan gambar asli berukuran besar dengan resolusi tertinggi yang Anda bisa dan letakkan di kanvas rasio 4:3. Jika terlalu besar, Instructables akan memperkecil ukurannya dan Anda akan memiliki gambar tajam yang bagus.

3. Jika gambar Anda terlalu kecil (kurang dari 600 piksel lebar) Instructable akan memperluas gambar Anda dan membuatnya setidaknya 600 piksel lebar sehingga membuatnya kurang tajam. Saya mengatakan "ish" karena saya tidak benar-benar tahu persis apa lebar yang digunakan Instructable tetapi tampaknya mendekati 600. Mungkin 640, yang merupakan lebar umum di masa monitor tabung sekolah lama.

600x450 dan 640x480 adalah rasio aspek 4:3. Semua monitor tabung "layar penuh" sekolah lama berukuran 640x480 (lebar x tinggi).

4. Apa yang harus dilakukan jika gambar asli Anda tidak memiliki lebar minimal 600 piksel? Yang bisa Anda lakukan hanyalah memasukkannya ke dalam kanvas yang sesuai dengan rasio 4:3 yang menampilkan gambar Anda mendekati ukuran aslinya. Jika gambar asli Anda kecil, akan ada banyak ruang kosong, jadi cobalah untuk memusatkan gambar Anda atau letakkan ruang putih di atas atau di bawah gambar Anda dan buatlah terlihat sebaik mungkin.

Sejauh pengetahuan saya, ini adalah kompromi yang harus Anda buat di Instructables sehingga gambar Anda ditampilkan utuh.

Sebagai contoh, gambar di atas adalah ukuran kanvas 600x450 dengan gambar 382x206 dijatuhkan ke dalamnya dan di tengah sehingga kita memiliki ruang putih kosong yang sama di atas dan di bawah. Gambar ditampilkan kira-kira dalam ukuran aslinya, saya pikir Instructables mungkin memperluasnya menjadi 640x480 (ekspansi yang dapat diabaikan) jadi itulah yang terbaik yang dapat kami lakukan dengan gambar asli itu.

5. JANGAN percaya pratinjau atau percayai tampilan gambar Anda selama beberapa jam pertama setelah mengunggahnya ke Instructable! Untuk alasan apa pun, ukuran gambar tampaknya tidak tetap konsisten hingga beberapa jam setelah Anda mengunggahnya.

Setiap kali, ketika Anda pertama kali memasukkan gambar, sepertinya Instructables akan menampilkan gambar itu dengan benar, tidak peduli apa ukuran atau rasio aspek gambar itu. Bahkan mungkin tetap ditampilkan dengan benar untuk beberapa waktu setelahnya, tetapi JANGAN TERTIPU karena pada akhirnya, itu akan mengubah ukurannya dan memberi Anda masalah kecuali Anda mengikuti aturan 4:3 itu!

Semoga ini bisa membantu dan tolong, jika Anda menemukan cara yang lebih baik atau memiliki petunjuk lain, beri tahu saya!