Cara Ukuran Foto Untuk Ponsel

Gambar adalah tarif standar di sebagian besar situs web. Mereka digunakan baik untuk keperluan estetika atau untuk menyampaikan informasi. Namun, karena gambar memiliki lebar dan tinggi tetap, penyesuaian perlu dilakukan ketika ditampilkan di layar kecil smartphone. Artikel ini membahas bagaimana Anda dapat menyesuaikan gambar Anda sehingga mereka ramah mobile.

prasyarat

Jika Anda datang ke halaman ini dari luar thesitewizard.com, harap dicatat bahwa artikel ini adalah yang ketiga dalam tutorial desain web saya yang responsif. Ini mengasumsikan Anda sudah tahu hal-hal yang dibahas sebelumnya. Dengan demikian, Anda mungkin ingin melihat bab sebelumnya terlebih dahulu:

Mereka yang belum punya situs web dan ada di sini karena Anda ingin tahu cara membuatnya yang berfungsi pada semua perangkat harus benar-benar mulai dengan cara membuat situs web sebagai gantinya. Yang terakhir ditulis untuk pemula, dan dengan demikian menggunakan bahasa Inggris biasa, tidak seperti apa yang Anda baca di sini.

Gambar responsif: Membuat gambar Anda cocok dengan browser seluler dan desktop

Jika Anda telah menggunakan Wizard Layout saya untuk membuat CSS untuk situs Anda, aturan ini sudah akan dimasukkan ke dalam lembar gaya secara default (kecuali jika Anda menghapusnya secara manual atau menginstruksikan wizard untuk menghilangkannya). .

Contoh gambar berikut (diambil dari tutorial BlueGriffon 1 saya) menggunakan aturan di atas. Gambar memiliki lebar default 394 piksel dan tinggi 187 piksel, tetapi lebarnya dibatasi hingga 100% dari blok yang mengandungnya. Ubah ukuran jendela untuk melihat bagaimana browser menanganinya.

Kompatibilitas browser: demi kelengkapan, saya harus menyebutkan bahwa meskipun lebar maks telah ada selama berabad-abad, dan didukung oleh browser web utama sejak dahulu kala, itu tidak dikenali oleh Internet Explorer ("yaitu ") 6. Namun, yaitu 6 mungkin, untuk semua maksud dan tujuan, punah hari ini, karena tidak memiliki banyak fitur yang digunakan di situs web saat ini, bahkan kemampuan untuk mengakses situs web HTTPS modern yang dikonfigurasi dengan benar (yaitu, Situs web dengan SSL), jadi Anda mungkin bisa mengabaikannya.

Cara menggunakan kueri seluler untuk memberikan gambar latar belakang responsif

Situs web ini menggunakan layanan keamanan untuk melindungi dirinya sendiri dari serangan online. Tindakan yang baru saja Anda lakukan memicu solusi keamanan. Ada beberapa tindakan yang dapat memicu blok ini termasuk mengirimkan kata atau frasa tertentu, perintah SQL atau data yang cacat.

Apa yang bisa saya lakukan untuk menyelesaikan ini?

Pengguna Desain Web Responsif (RWD) setuju bahwa kinerja ditingkatkan jika Anda memiliki gambar diubah ukurannya dengan ukuran faktor bentuk perangkat. Biasanya, orang membuat 3 versi: desktop, tablet, dan smartphone. Di RWD, "Lazy-loading" gambar digunakan untuk memilih versi mana yang akan dikirim ke perangkat. Lazy-loading memuat HTML dan kemudian menggunakan JavaScript untuk mengetahui gambar mana yang akan diunduh. Biasanya, itu menanyakan lebar viewport, membandingkan lebar terhadap breakpoint statis, dan kemudian memilih satu dari tiga ukuran.

5 tren desain situs web mewah Anda perlu menonton ...

Bulan ini kami memiliki beberapa contoh brutalisme yang digunakan untuk efek yang baik sebagai foil untuk memamerkan produk dan pekerjaan. Sebaliknya, di ujung lain skala, kami memiliki merek yang telah memilih untuk pergi lebih dari rute pengalaman mendalam, menggunakan gambar layar penuh, suara, animasi, dan bahkan VR. Keduanya adalah pendekatan yang valid,

5 tren desain situs web mewah Anda perlu menonton ...
Kami menggunakan cookie
Kami menggunakan cookie untuk memastikan bahwa kami memberikan Anda pengalaman terbaik di situs web kami. Dengan menggunakan situs web Anda menyetujui penggunaan cookie kami.
Izinkan cookie.