Cara Optimasi Gambar atau Image untuk Web Design

Januari 8, 2021  |  Written by Gio  |   Branding, Desain, Websites

Ada banyak cara untuk menyertakan gambar di website Anda. Teknologi pengembangan web saat ini memungkinkan integrasi ilustrasi dan grafik vektor, selain juga kemampuan untuk memadukan gambar fotografi dengan latar belakang menggunakan bahasa CSS-5.

Sebelum mendalami tekniknya, penting untuk mengetahui prinsip dasar desain grafis web dan desain UX (user experience atau pengalaman pengguna). Tiga prinsip yang akan dibahas di sini harus digunakan untuk mendasarkan semua kekuatan kreatif dan inovatif dari desain web ke dalam istilah yang praktis dan fungsional.

Images can be simple, yet tells so much story.

1. Setiap gambar memiliki tujuan

Pepatah umum dalam bidang desain adalah “Lebih singkat lebih baik”. Ini juga berlaku untuk penempatan gambar. Gambar seharusnya melebihi untuk sekedar dekorasi. Seperti teks website yang menyampaikan informasi dengan gaya bahasa, gambar juga merupakan sarana komunikasi yang efektif.

Jika dua gambar berbeda menyampaikan pesan yang sama, meskipun keduanya berbeda dan tampak cocok di halaman web tersebut, Anda harus menghilangkan salah satunya. Akan lebih baik jika Anda memastikan setiap gambar menceritakan kisah yang berbeda.

Gambar tidak harus berupa foto, namun juga bisa berupa ilustrasi vektor, infografis, dan lain-lain. Tulislah juga kata-kata di dalam bingkai gambar untuk menekankan konten teks seperti dalam sebuah kotak kutipan atau bahkan dalam sebuah Call to Action (ajakan tindakan).

 

2. Gambar harus berbaur dengan konteks sekitarnya

Konteks halaman web adalah topiknya. Berbagai topik akan membangkitkan emosi tertentu bagi pengunjung. Teks website (copywriting) saja dapat merangsang emosi tertentu, tetapi jika gambar yang ditambahkan mewakili emosi yang tidak tepat, pengalaman pengguna bisa saja menjadi tidak nyaman.

Inilah yang harus diperhatikan oleh banyak desainer web. Bahkan pemilihan warna dan bentuk dalam desain grafis vektor dapat disalahartikan, yang kemudian menyebabkan konflik antara nada yang diinginkan dan pesan konten yang disampaikan.

Gambar itu sebenarnya bisa lebih berdampak dibanding dengan teks. Desainer mempelajari cara untuk meningkatkan produktivitas pengguna dengan memasukkan simbol yang dirancang dengan cermat.

Visual communication happens more frequently than communication with language.
Don't forget to add alt-text, like this one, to help search engines make sense of images.

3. Optimalkan setiap gambar

Gambar berpotensi memakan banyak memori dan berdampak pada waktu pemuatan. Setelah gambar dioptimalkan agar web memuat dengan cepat, gambar tersebut masih perlu dioptimalkan untuk mesin pencari seperti Google.

Mesin pencari terus mendorong pengalaman web yang baik untuk semua orang, dan meningkatkan aksesibilitas. Jika memungkinkan, tambahkan atribut alt text ke dalam setiap gambar yang merupakan bagian dari konten. Hal ini tidak perlu dilakukan untuk semua bentuk desain grafis, terutama jika digunakan hanya untuk dekorasi. Namun, sebagian besar gambar yang digunakan dalam konten cenderung membutuhkan teks alt text.

Kami dapat membantu Anda meningkatkan UX situs web Anda

Tantangan terbesar dalam UX situs web bukanlah penggunaan perangkat lunak dan teknologi. Sebaliknya, tantangannya terdapat dalam memutuskan bagaimana menyertakan setiap gambar, garis, bentuk, dan warna ke dalam laman web, sehingga pengalaman pengguna (user experience) akan semakin baik.

Island Media Management memiliki banyak pengalaman dengan proyek desain web. Desain web yang dihasilkan meningkatkan brand awareness dan kredibilitas merek, membuat situs lebih mudah untuk memberikan kesan pertama yang positif kepada pelanggan.

Hubungi kami

    Situs ini dilindungi oleh reCAPTCHA dan berlaku Kebijakan Privasi dan Persyaratan Layanan Google.