Kapan Tidak Akan COPE Dengan Gambar Web Anda [Video]

Untuk berpikir secara strategis tentang konten visual berbasis web Anda, Anda harus melakukan lebih dari sekedar memilih gambar yang akan digunakan; Anda juga harus memastikan bahwa gambar tersebut berfungsi untuk layar besar dan kecil.

Jika sebuah gambar berfungsi untuk semua ukuran layar, bagus. Unggah satu file (gambar bersumber tunggal) dan Anda siap melakukannya.

Tidak semua gambar membuat hidup Anda semudah itu. Kadang-kadang ada baiknya Anda menyediakan beberapa versi gambar untuk memberi orang apa yang mereka butuhkan dari gambar di perangkat apa pun.

Demikian kata Buddy Scalera, direktur senior strategi konten di The Medicines Company. Dalam ceramahnya di Intelligent Content Conference, Menciptakan dan Menjalankan Strategi Konten Visual yang Skala, Buddy memberi tahu kami bahwa dia semua untuk sumber tunggal… kecuali jika dia tidak melakukannya. Dia mendukung apa yang dia dan orang lain sebut sebagai “COPE most” (COPE-M), terutama dalam hal gambar.

COPE adalah singkatan dari "buat sekali, publikasikan di mana-mana". Konten COPE adalah konten bersumber tunggal. Dalam banyak hal, konten COPE ideal. Anda membuat sebagian konten sekali - deskripsi produk, spesifikasi, definisi, gambar - dan sistem dapat menarik (bukan menempel) potongan tersebut ke beberapa hasil kerja. Saat Anda memperbarui sumber, pembaruan mengalir melalui repositori Anda. Konten COPE elegan. Itu efisien. Itu logis. Perusahaan menghemat jutaan dolar dalam biaya penerjemahan. Ini membantu mereka menghindari ketidakkonsistenan yang memalukan, membuat gila, dan tuntutan hukum. COPE berfungsi baik dengan teks, audio, dan video (jika Anda menggunakan YouTube).

Namun, terkadang COPE adalah cara yang salah. Browser modern mengalirkan ulang teks Anda, tetapi gambar diperkecil untuk perangkat Anda. Gambar yang tampak bagus di desktop mungkin menjadi tidak bisa dikenali di ponsel cerdas. (Halo, cubit dan zoom.)

Di situlah peran M di COPE-M. "Meskipun menyiapkan konten Anda untuk digunakan kembali multisaluran merupakan tujuan yang baik, tidak semua konten berskala efektif dalam model COPE," kata Buddy.

Dalam artikel ini, saya merangkum saran Buddy dari ceramah ICC-nya. Semua gambar dalam posting ini berasal dari slide-nya, dan semua kutipan, kecuali dinyatakan lain, berasal dari ceramahnya dan dari percakapan saya selanjutnya dengannya.

Mengapa sulit COPE dengan beberapa gambar

Buddy menjatuhkan apa yang dia sebut "bom kebenaran" tentang gambar: Gambar tidak sama dengan teks.

Teks cocok untuk sumber tunggal karena teks dapat dipisahkan dari tampilannya. Lembar gaya bertingkat memungkinkan teks untuk bervariasi dalam tampilan dari satu contoh ke contoh lainnya tanpa mengubah sumber teks yang mendasarinya. “Teks adalah aset agnostik saluran yang luar biasa, fleksibel, dapat mengalir, dapat digunakan kembali, yang bekerja dengan baik di dunia digital,” katanya.

Tidak demikian halnya dengan gambar. Mereka tidak lepas dari penampilan mereka. Dengan gambar, satu ukuran tidak selalu cocok untuk semua.

Seperti yang dikatakan Justyn Hornor beberapa tahun yang lalu, "gajah di dalam ruangan" untuk desain web yang responsif "adalah cara menangani gambar." Gambar kecil mungkin terlihat tajam di ponsel dan sangat kecil di monitor resolusi tinggi. Gambar besar mungkin membutuhkan waktu lama untuk dirender di perangkat kecil yang sudah cukup untuk memuat gambar yang lebih kecil.

Bagaimana memikirkan gambar multisourcing

Daripada mengharapkan satu gambar bekerja untuk semua perangkat dengan mengorbankan bagian atas dan bawah, Anda mungkin akan merasa setidaknya sesekali bermanfaat untuk mengupload beberapa gambar dan kemudian memberi tahu sistem di titik putus mana yang akan digunakan masing-masing.

Breakpoint adalah titik di mana sistem berhenti menarik satu gambar dan menarik gambar lainnya - yang lebih besar atau lebih kecil, tergantung pada resolusi perangkat. Ilustrasi ini menunjukkan tiga titik putus yang mungkin: 320 piksel untuk ponsel, 720 piksel untuk tablet atau ponsel besar, dan 1.024 piksel untuk laptop.

Titik henti ditentukan menurut lebar perangkat karena kami memiliki kemampuan gulir vertikal tak terbatas tetapi lebar terbatas.

Buddy menjelaskan saat salah satu tim konten di perusahaannya mencetak brosur yang menyertakan grafik yang menjawab pertanyaan dokter tentang produk tertentu.

Grafiknya tampak bagus dalam cetakan. Dan kemudian mereka menaruhnya di situs web, dan ukurannya semakin kecil. Saat dilihat di smartphone, grafik itu tidak bisa dibaca. Orang yang mencari sesuatu di smartphone di rumah sakit memiliki tingkat urgensi. Mereka butuh jawabannya. Mereka tidak perlu mencubit dan memperbesar.

Dalam banyak kasus, Anda dapat mengunggah satu gambar besar ke situs web Anda (dengan kata lain, untuk gambar sumber tunggal) dan biarkan browser menskalakannya untuk Anda. Dalam kasus lain, gambar menjadi hampir tidak terbaca saat dimasukkan ke dalam jendela atau layar kecil. Untuk mengilustrasikan hal ini, Buddy menunjukkan apa yang terjadi saat browser menskalakan foto putrinya dengan lebar 800 piksel:

Ini adalah contoh COPE. Sayangnya, saat browser menskalakan gambar ini untuk jendela atau layar yang sempit, sulit untuk melihat wajah gadis-gadis itu. Jika gambar ini adalah bagan atau infografis, teks pada layar yang lebih kecil mungkin menjadi tidak terbaca.

Untuk elemen visual yang penting bagi narasi merek Anda, Anda mungkin ingin melakukan upaya ekstra untuk menggunakan banyak gambar. Pendekatan ini, yang disebut Buddy sebagai "arah seni yang responsif", memberi orang kesempatan yang lebih baik untuk melihat detail penting di layar mana pun.

Saat Buddy mengubah lebar gambar dari 800 menjadi 400 menjadi 200 piksel, dia juga mengubah komposisi gambar: Ini bukan COPE. Ini adalah perencanaan citra. Foto selebar 800 piksel menunjukkan gadis-gadis dan anjing itu berdampingan dalam apa yang dia sebut sebagai bidikan horizontal tiga lebar. Foto selebar 400 piksel mempersatukan kedua gadis itu dan melipat anjing di depan untuk bidikan vertikal dua lebar. Bidikan selebar 200 piksel meremas ketiga sosok menjadi pengaturan tiang totem.

Jika Anda melihat halaman contoh Buddy di browser dan Anda meregangkan dan mempersempit jendela, gambar akan berubah setiap kali Anda mencapai salah satu breakpoint yang ditentukan dalam kode HTML. Untuk merasakan pengalaman pengguna, putar video enam detik ini:

Untuk mengalami perilaku ini di browser Anda sendiri, kunjungi halaman contoh Buddy di perangkat yang memungkinkan Anda mengubah lebar jendela.

Meskipun posting ini bukan tutorial tentang cara menulis kode jenis ini, Anda mungkin merasa berguna untuk melihat seperti apa kode ini:

Hal utama yang perlu diperhatikan (lihat di antara tag "gambar") adalah Sobat telah menentukan tiga gambar sumber:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Setiap file JPG ditetapkan ke sebuah breakpoint:

• lebar maks: 499 piksel
• lebar maksimal: 799 piksel
• min-width: 800px

Berapa banyak breakpoint yang harus Anda buat? Bagaimana Anda menentukan lebar maksimum dan minimumnya? Tidak ada peraturan. Dalam artikel bagus yang ditunjukkan Buddy, Jason Grigsby berkata, "Memilih breakpoint gambar adalah sesuatu yang akan dihadapi semua orang, dan terus terang, saya tidak punya jawaban yang bagus untuk Anda."

Anda mungkin tidak akan membuat banyak gambar untuk setiap gambar di situs Anda. Tentukan gambar mana yang benar-benar penting bagi pelanggan Anda. Jika Anda mengetahui sebuah gambar (mis., Grafik, bagan, foto produk) benar-benar penting bagi pengguna Anda, jangan serahkan ke browser web untuk menentukan cara merender gambar itu. Mengontrol.

Perlu dicatat bahwa beberapa sistem manajemen aset digital (DAM) dapat membuat beberapa output dari satu gambar dalam berbagai ukuran dan rasio. Itu tidak akan meniru apa yang Buddy lakukan dengan foto yang terpisah, tetapi Anda harus menjelajahi apa yang ditawarkan oleh sistem perangkat lunak Anda.

Satu-satunya aturan yang dapat saya sarankan adalah membuat keputusan strategis tentang gambar dengan cara yang sama seperti Anda membuat keputusan strategis tentang konten lainnya: Tanyakan pada diri Anda apa yang dibutuhkan audiens Anda dan mengapa. Bereksperimenlah dengan berbagai gambar dan breakpoint. Ulang.

Untuk informasi lebih lanjut tentang apa yang Buddy katakan tentang membuat dan menjalankan strategi yang dapat diskalakan untuk konten visual Anda, lihat presentasi ICC beranotasi miliknya.

Kapan harus multisource gambar Anda

Meskipun Anda tidak ingin bersusah payah membuat beberapa file sumber untuk setiap gambar, pertimbangkan multisourcing gambar-gambar yang memiliki pengaruh paling besar, misalnya, gambar utama di halaman konversi Anda. Seperti yang dikatakan Buddy:

Pikirkan tentang semua uang yang dihabiskan di situs web Anda. Jika Anda membiarkan mesin memutuskan cara menangani semua gambar Anda, dan terkadang orang tidak dapat melihat gambar utama, Anda kehilangan kesempatan.

Anda tahu halaman dan gambar penting di situs Anda. Anda mungkin sudah menandainya di perangkat lunak analitik Anda. Sangat penting untuk menguji halaman ini pada perangkat seluler, “tidak hanya pada monitor layar lebar yang indah yang digunakan desainer Anda untuk membuat konten,” kata Buddy.

Pertimbangkan juga gambar multisourcing di halaman lain yang dilihat kebanyakan orang di perangkat kecil. “Lihat berapa banyak lalu lintas yang Anda dapatkan dari perangkat ponsel cerdas Anda. Jika seperti kami, 65%, itu adalah audiens Anda. Anda harus melayani mereka, ”kata Buddy. Jika pengguna smartphone tidak dapat membaca gambar tanpa mencubit dan memperbesar, Anda mungkin ingin menyesuaikan gambar untuk layar kecil.

Cara terbaik untuk mempelajari gambar mana yang menjadi multisumber adalah dengan menguji halaman web Anda di beberapa perangkat . Semua tim konten - termasuk kolega Anda dalam strategi konten, desain, rekayasa konten, dan pengalaman pengguna - perlu mengetahui bagaimana gambar situs web Anda dimuat di ponsel cerdas. Ambil setumpuk perangkat dan desainer, ahli strategi konten, atau orang UX. Muat konten Anda seperti yang diinginkan pelanggan Anda. "Jika gambar yang Anda muat dengan penuh kasih di situs Anda terlihat agak miring, pertimbangkan cara browser menskalakan aset gambar Anda," kata Buddy, dan rencanakan dengan tepat.

Kesimpulan

Hingga sistem konten kami menjadi cukup pintar untuk secara otomatis memberi orang pengalaman ideal dari setiap gambar di perangkat apa pun, pertimbangkan kapan harus COPE dan kapan tidak COPE dengan gambar Anda. Mungkin ada gunanya untuk memberikan upaya ekstra dan multisumber gambar tertentu.

Bagaimana dengan tim Anda? Apakah Anda terkadang membuat beberapa versi gambar penting untuk mengakomodasi berbagai ukuran layar? Apa yang telah Anda pelajari dari pengujian gambar Anda di beberapa perangkat? Beri tahu kami di komentar.

Berikut kutipan dari Buddy's talk:

Mendaftarlah untuk buletin elektronik Strategi Konten mingguan kami , yang menampilkan cerita dan wawasan eksklusif dari Kepala Penasihat Konten CMI Robert Rose. Jika Anda seperti banyak pemasar lain yang kami temui, Anda akan datang untuk membaca pemikirannya setiap hari Sabtu.

Gambar sampul oleh Joseph Kalinowski / Content Marketing Institute