Saiz Gambar yang Boleh Diajar: 13 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Adakah anda menghadapi masalah untuk mendapatkan ukuran gambar dengan betul? Adakah ukuran gambar anda terlalu besar dan melepasi bingkai seperti gambar di atas? Ini boleh dipelajari untuk meringkaskan apa yang telah saya pelajari untuk mengatasi masalah ini.

Saya telah diberitahu oleh Staff Instructable bahawa semua gambar yang dimuat naik digandakan ke dalam pelbagai nisbah aspek. Kumpulan gambar ini kemudiannya diambil dan diukur dengan ukuran yang berbeza bergantung pada peranti dari mana anda melihat arahannya. Tidak ada cara untuk menentukan ukuran dan nisbah yang akan ditampilkan di editor biasa.

Mereka kemudian mencadangkan bahawa "Pilihan lain yang mungkin berfungsi adalah jika anda memuat naik gambar yang mempunyai nisbah aspek yang lebih tradisional. Apa-apa dari 16: 9 hingga 4: 3 harus dipaparkan dengan sangat baik."

Perhatikan bahawa mereka mengatakan ini "mungkin" berfungsi. Inilah yang saya dapati dalam perjuangan saya agar gambar saya dipaparkan dengan sopan. (Perhatikan saya menggunakan gambar dari "Rubik's cube dipermudahkan" saya yang dapat dipesan, oleh itu semua gambar kubus itu!)

Gambar di atas adalah ukuran asalnya (600x195) yang tidak berada dalam julat nisbah aspek tradisional. Seperti yang anda lihat, Instructables memperlihatkan gambar ini diperbesar terlalu besar dengan sisi kiri dan kanan terputus. Mari lihat apa yang boleh kita lakukan agar gambar ini dipaparkan dengan betul.

Langkah 1: Mari Cuba Nisbah Aspek 16: 9

Oleh itu, mari kita cuba nisbah aspek 16: 9 (lebar: tinggi). Saya akan menyimpan lebar asal 600 piksel, 16: 9 bermaksud ketinggiannya mestilah 338 piksel jadi kita akan membuat ukuran kanvas 600x338 dan menjatuhkan gambar 600x195 ke dalamnya.

Oleh itu, mari kita lihat bagaimana gambar 600x338 (nisbah aspek 16: 9) ini kelihatan. Sangat menarik, ketika saya meletakkan gambar ini dan melihatnya, ia sangat sesuai - tepi kiri dan kanan tidak terputus! Saya mengambil tangkapan skrinnya hanya untuk bukti, lihat di slaid seterusnya.

Tetapi, ketika saya melihat ini di penyemak imbas saya (Chrome) apa yang saya lihat dalam gambar di atas, ialah bahagian kanan dan kiri sekali lagi dipotong! Oleh itu, dari eksperimen ini, nampaknya mengubah saiz ke nisbah aspek 16: 9 tidak akan menyelesaikan masalah kita!

Sebagai catatan sampingan, 16: 9 adalah nisbah aspek umum "baru" yang dikenali sebagai "skrin lebar" sedangkan 4: 3 adalah "skrin penuh" sekolah lama yang biasa terjadi pada zaman TV tiub. Ya, anda milenium mungkin tidak tahu apa yang saya bicarakan.

Langkah 2: Gambar 16: 9 Yang Baru Dimuat naik Seperti yang Dilihat dalam Pratonton

Gambar ini adalah tangkapan skrin yang menunjukkan bahawa gambar 16: 9 kami kelihatan sempurna dalam Pratonton. Berjaya kan? Tidak begitu pantas - lihat apa yang berlaku apabila kita benar-benar melihat halaman ini di penyemak imbas kita (Chrome)! Tepi kiri dan kanan dipotong lagi! Kembali sahaja untuk membiarkan slaid sebelumnya dan lihat sendiri.

Pelajaran yang dipelajari - jangan mempercayai Pratonton! Apa yang kelihatan baik dalam Pratonton diberikan berbeza dalam tontonan sebenar dengan penyemak imbas!

Juga, ya, terdapat banyak ruang putih di bawah gambar saya. Ini kerana saya menjatuhkan gambar 600x195 ke dalam kanvas 600x338 dan meletakkannya di bahagian atas, jadi ada semua ruang kosong di bahagian bawah. Apa yang boleh kita lakukan? Baiklah … kita akan cuba mengatasinya dalam slaid kemudian.

Oleh itu mari kita terus melihat bagaimana kita dapat membuat paparan gambar ini secara keseluruhan.

Langkah 3: 16: 9 Dipaparkan Dengan Bahagian L&R Terputus

Hanya untuk rakaman, sekiranya ada sebab apa pun penyemak imbas anda memaparkan gambar 16: 9 ini dengan sempurna, inilah yang saya bicarakan. Inilah tangkapan skrin bagaimana saya melihat gambar 16: 9 saya di Langkah 1 yang dipaparkan setelah "menetap" setelah pratonton awal - perhatikan kiri dan kanan dipotong.

Sekiranya anda melihat gambar Langkah 1 saya dipaparkan dengan sempurna, baik, hebat. Beritahu saya! Tetapi ini adalah bagaimana saya melihatnya. Ya, ia jauh lebih baik daripada gambar asal dari halaman tajuk, tetapi gambarnya masih terpotong. Jadi bagi saya, walaupun mendapat nasihat daripada staf Instructables, nisbah aspek 16: 9 tidak begitu berjaya. Mari beralih ke nisbah aspek 4: 3.

Langkah 4: Mari Cuba Nisbah Aspek 4: 3

Oleh itu, mari kita cuba nisbah aspek 4: 3. Saya akan menyimpan lebar asal 600 piksel, 4: 3 bermaksud ketinggiannya mestilah 450 piksel jadi kita akan membuat ukuran kanvas 600x450 dan menjatuhkan gambar 600x195 ke dalamnya.

Bagaimana rupa gambar 600x450 (nisbah aspek 4: 3) ini?

Sekali lagi, ketika saya pertama kali memasukkannya, gambar kelihatan hebat (kecuali untuk semua ruang putih di bahagian bawah). Kiri dan Kanan dipaparkan dengan baik. Melihatnya di penyemak imbas, nampaknya Kanan & Kiri kelihatan terus dipaparkan dengan baik.

Seperti yang dinyatakan sebelum ini, semua ruang kosong di bawah gambar adalah kerana saya menjatuhkan gambar 600x195 saya ke dalam kanvas 600x450 dan meletakkannya di bahagian atas.

Pelajaran yang dipelajari - nisbah aspek 4: 3 sepertinya diperlukan agar sisi Kanan dan Kiri tidak terputus. Sayangnya, ini bermaksud akan ada banyak ruang putih untuk gambar yang pendek dan lebar, kerana anda harus menjatuhkan gambar tersebut ke dalam kanvas bersaiz 4: 3. Ya, anda boleh memusatkan imej anda sehingga terdapat ruang putih yang sama di atas dan bawah tetapi bagaimanapun, akan ada banyak ruang putih di atas atau di bawah gambar anda, tetapi sepanjang pengetahuan saya, ini adalah kompromi yang anda akan lakukan harus dibuat dalam Instructables supaya gambar anda dipaparkan dengan utuh.

Langkah 5: 4: 3 Dengan Imej Berpusat

Berikut adalah gambar 600x195 yang sama jatuh ke kanvas 600x450 tetapi berpusat sehingga terdapat ruang kosong yang sama di atas dan bawah. Nampak sedikit lebih baik, teksnya tidak jauh dari gambar.

Langkah 6: 4: 3 Dengan Gambar di Bawah

Dan terakhir, inilah gambar yang sama jatuh dan dipindahkan ke bawah. Sekarang terdapat banyak ruang kosong di atas gambar. Gambar sekarang benar-benar dipisahkan dari bar tajuk, tetapi lebih dekat dengan teks. Jadi ini adalah kompromi dan pengajaran anda:

• 4: 3 nampaknya nisbah aspek yang perlu anda gunakan agar gambar dapat dipaparkan secara keseluruhan dalam Instructables.
• tidak mempercayai pratonton - ia mungkin menunjukkan gambar anda dengan sempurna, tetapi bahagiannya boleh dipotong pada penyemak imbas sebenar

Langkah 7: Berapa Lebar Minimum?

Sekarang mari kita lihat berapa lebar minimum. Gambar yang ditunjukkan berukuran 382x206, hampir dengan 2: 1, nampaknya sangat besar bukan? Jelas sekali, Instructables telah memperbesar gambar agar sesuai dengan lebar set, mungkin 640 piksel, saya tidak pasti.

Tetapi ia sesuai kerana lebih "persegi" - iaitu, tidak terlalu lebar untuk ketinggiannya. Oh tunggu, saya tertipu dengan Pratonton itu lagi! Ia sebenarnya tidak sesuai - sisi R&L dipotong lagi.

Sebenarnya, ini aneh, bukan hanya pratonton yang merosakkan. Saya sebenarnya melihatnya di penyemak imbas dan pada mulanya ia dibuat dengan betul (iaitu, tepi R&L tidak terputus). Tetapi melihatnya melalui penyemak imbas sekali lagi, sekarang gambar tersebut diubah ukurannya dengan tepi R&L yang dipotong. Aneh.

Oleh itu, mari cuba menjadikan gambar lebih kecil. Kami akan mengecilkan gambar menjadi 200x108, mengekalkan nisbah aspek 2: 1 yang sama.

Langkah 8: Mengecilkan Gambar Tetapi Menjaga Nisbah Aspek

Oleh itu, saya mengubah saiz gambar itu menjadi 200x108, mengekalkan nisbah aspek 2: 1 yang sama.

Sekali lagi nampaknya sesuai pada mulanya (dengan resolusi (kualiti gambar) semakin merosot!) Tetapi sudah tentu anda mungkin melihatnya dan tidak sesuai sama sekali, dan kelihatan seperti gambar asalnya kecuali yang asli mempunyai ketetapan yang lebih baik. Sekali lagi, Instructables memperluas gambar agar sesuai dengan lebar set sehingga inilah sebabnya gambar yang lebih kecil (200x108) ini kelihatan sangat mengerikan, jauh lebih buruk daripada 382x206 yang asal.

Saya mengatakan "mungkin" kerana saya tidak tahu bagaimana Instructables memaparkan gambar-gambar ini di penyemak imbas anda. Walau apa pun alasannya, jika saya menyegarkan cache saya dan mengkaji Instructable ini, ukuran gambar saya nampaknya tidak konsisten, jadi saya benar-benar tidak tahu apa yang Instructables lakukan kecuali ia tidak konsisten. Oleh itu objektif Instructable ini - untuk mengetahui bagaimana ukuran gambar supaya ia dipaparkan sekurang-kurangnya secara konsisten!

Langkah 9: Bukti Imej Render Pada Permulaan Yang Betul

Inilah yang saya lihat pada mulanya sebaik sahaja memuat naik gambar - sangat sesuai! (Perhatikan bahawa saya harus memasukkan tangkapan skrin di atas ke dalam gambar 1600x1200 (iaitu, nisbah 4: 3) untuk membuat Instructables menampilkan keseluruhan tangkapan skrin!)

Tetapi sudah tentu anda tahu apabila anda melihat gambar pasangan itu sekarang, ia tidak sesuai lagi. Mari lihat berapa lebar minimum yang diperlukan untuk menjadikannya sesuai.

Langkah 10: Mencuba 382x287 (Nisbah 4: 3)

Saya mengekalkan lebar 382 dan menjatuhkan gambar 382x206 yang asli ke dalam kanvas 382x287 untuk menjadikannya nisbah aspek 4: 3 kerana sebelum ini kami telah mengetahui bahawa Instructable memerlukan gambar agar sesuai dengan nisbah 4: 3 untuk memaparkannya secara keseluruhan.

Jadi sekarang terdapat banyak ruang kosong di bawahnya. Ini sesuai dengan apa-apa yang dipotong, tetapi sekali lagi dikembangkan untuk mengisi beberapa set lebar, sehingga gambarnya tidak tajam. Mari cuba cari berapa lebar Instructable yang sempurna ini.

Langkah 11: Memperluas Gambar Dari 300x206 menjadi 600x206 untuk Melihat Jika Ia Memaparkan 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 memaparkan keseluruhan gambar. Sekali lagi, pada mulanya ia berlaku, tetapi seperti yang anda lihat sekarang tidak.

Ini adalah perkara yang sangat ganjil - setiap kali, ketika pertama kali menurunkan gambar, sepertinya Instructables akan memaparkan gambar itu dengan betul, tidak kira apa saiz dan nisbah aspek gambar itu. Kali ini saya keluar dari Instructables dan menutup tab itu, dan kemudian meninjau semula Instructable ini "segar" supaya dapat bercakap untuk memastikan sama ada gambar masih dipaparkan dengan betul. Biasanya ini cukup untuk membolehkan Instructable melakukan perkara itu dan mula mengubah ukuran gambar yang tidak mempunyai nisbah aspek 4: 3 dan memaparkannya dengan potongan kiri dan kanan.

Yang mengejutkan saya, beberapa kali pertama saya melihat semula arahan "segar" ini, gambar ini tetap dipaparkan secara keseluruhan, tetapi sayangnya, setelah saya pergi untuk melakukan sesuatu yang lain dan datang mungkin sejam kemudian, gambar ini mula dipaparkan diperbesar dengan sisi L&R dipotong lagi seperti yang anda lihat di atas.

Mengapa atau bagaimana ini berlaku? Saya tidak mempunyai idea. Saya tidak tahu mengapa menunggu beberapa waktu selepas memuat naik gambar akan menjadikan Instructables membuatnya berbeza, tetapi memang begitu. Sebagai bukti, saya akan menunjukkan tangkapan skrin gambar di atas dipaparkan dengan sempurna pada oh pertama, 10-15 minit selepas saya memuat naiknya di slaid seterusnya.

Langkah 12: Bukti Imej Yang Dipaparkan Pada Permulaan Dengan Betul Selepas Memuat naik

Berikut tangkapan skrin yang menunjukkan bahawa gambar 600x206 dipaparkan secara keseluruhan sejurus selepas memuat naik. Ini adalah tangkapan skrin slaid sebelumnya. Kembali ke slaid sebelumnya dan anda dapat melihat bagaimana imejnya disandarkan sekarang!

Perhatikan bahawa tangkapan skrin saya sebenarnya berukuran 1563x766 tetapi ketika saya belajar dari eksperimen saya pada awal Instructable ini, saya tahu kerana ia tidak sesuai dengan nisbah aspek 4: 3 (1563x766 kira-kira 4: 2) jadi jika saya baru sahaja memuat naik tangkapan skrin dalam ukuran asalnya Instructable akan memotong bahagian tepi. Oleh itu, saya menjatuhkan gambar itu ke dalam kanvas 4: 3 jadi itulah sebabnya terdapat banyak ruang kosong di bawah tangkapan skrin saya.

Perhatikan bahawa tangkapan skrin juga diambil sebelum saya menukar tajuk Langkah 11 dan selesai menaip semua teks ini sekiranya anda tertanya-tanya!

Pelajaran yang dipelajari - melihat gambar yang anda muat naik dalam penyemak imbas sebaik sahaja anda memuat naik itu tidak semestinya menunjukkan bagaimana ia akan dipaparkan pada masa akan datang. Atas alasan apa pun, hampir semua ukuran dan / atau gambar nisbah aspek nampaknya kelihatan baik sebaik sahaja memuat naik, dan bahkan selama kira-kira 10-15 minit selepas memuat naik dan bahkan setelah anda keluar dari Instructables dan melihatnya segar dari sesi penyemak imbas baru, dll..

Tetapi tunggu kira-kira satu jam atau lebih, dan keadaan berubah! Gambar anda, jika tidak sesuai dengan nisbah aspek 4: 3, akan disesuaikan (biasanya diperbesar) oleh Instructable sehingga tepinya terpotong.

Langkah 13: Intinya - Apa yang Saya Pelajari

Oleh itu, apa yang saya pelajari?

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

2. Gunakan gambar asli yang berukuran besar dengan resolusi tertinggi yang anda dapat dan jatuhkannya ke kanvas nisbah 4: 3. Sekiranya terlalu besar, Instructables akan mengecilkannya dan anda akan mempunyai gambar tajam yang bagus.

3. Sekiranya gambar anda terlalu kecil (lebarnya kurang dari 600 piksel) Instructable akan mengembangkan gambar anda dan menjadikannya selebar 600 piksel lebar sehingga menjadikannya kurang tajam. Saya mengatakan "ish" kerana saya tidak betul-betul tahu lebar apa yang digunakan Instructable tetapi nampaknya hampir dengan 600. Mungkin 640, yang merupakan lebar biasa pada masa monitor tabung sekolah lama.

600x450 dan 640x480 adalah nisbah aspek 4: 3. Semua monitor tiub "skrin penuh" sekolah lama berukuran 640x480 (lebar x tinggi).

4. Apa yang perlu dilakukan sekiranya gambar asal anda selebar sekurang-kurangnya 600 piksel? Yang boleh anda lakukan hanyalah memasukkannya ke kanvas yang sesuai dengan nisbah 4: 3 yang memaparkan gambar anda hampir dengan ukuran asalnya. Sekiranya gambar asal anda kecil, akan ada banyak ruang kosong, jadi cubalah memusatkan gambar anda atau meletakkan ruang putih di atas atau di bawah gambar anda dan menjadikannya kelihatan terbaik.

Sepengetahuan saya, ini adalah kompromi yang harus anda buat dalam Instructables supaya gambar anda dipaparkan dengan utuh.

Sebagai contoh, gambar di atas adalah ukuran kanvas 600x450 dengan gambar 382x206 jatuh ke dalamnya dan berpusat sehingga kita mempunyai ruang kosong yang sama di atas dan di bawah. Imejnya dipaparkan kira-kira dalam ukuran aslinya, saya rasa Instructables mungkin mengembangkannya menjadi 640x480 (pengembangan yang boleh diabaikan) jadi itulah yang terbaik yang dapat kita lakukan dengan gambar asalnya.

5. JANGAN mempercayai pratonton atau mempercayai penampilan gambar anda selama beberapa jam pertama setelah memuat naiknya ke Instructable! Walau apa pun alasannya, ukuran gambar nampaknya tidak konsisten sehingga beberapa jam selepas anda memuat naiknya.

Setiap kali, ketika pertama kali menjatuhkan gambar, sepertinya Instructables akan memaparkan gambar itu dengan betul, tidak kira apa ukuran dan nisbah aspek gambar itu. Ia mungkin tetap dipaparkan dengan betul untuk beberapa jangka masa selepas itu, tetapi JANGAN DIJALANKAN kerana akhirnya, ia akan mengubah saiznya dan memberi anda masalah melainkan jika anda mengikuti peraturan 4: 3 itu!

Harap ini dapat membantu dan tolong, jika anda mencari jalan yang lebih baik atau ada petunjuk lain, beritahu saya!