Cara mengoptimalkan gambar web Anda

Berharap klien Anda akan berhenti bertanya "Mengapa kecepatan halaman saya sangat buruk?". Langkah-langkah sederhana ini akan memastikan Anda membuat gambar berkualitas tinggi yang tidak terlalu besar.

Masalah

Jadi, Anda baru saja membangun situs baru dan mengoptimalkan segala kemungkinan termasuk ukuran gambar khusus Anda, lalu Anda menyerahkannya kepada pengguna. Dua minggu kemudian Anda mendapatkan pesan "Mengapa kecepatan halaman saya sangat buruk?" atau “Mengapa halaman begitu lama dimuat?” pertanyaan. Anda pergi dan memeriksa situs web dan menemukan bahwa gambarnya sangat besar! Saya yakin setiap developer pernah berada di posisi ini sebelumnya. Ini adalah hal yang sulit untuk dihadapi dalam iklim gambar resolusi tinggi saat ini yang berasal dari DSLR, ponsel, dan layar retina, tetapi mudah-mudahan posting ini akan mencakup beberapa hal yang sangat sederhana yang dapat Anda lakukan untuk menghindari beberapa masalah ini. Pada akhirnya, bahkan hanya satu gambar yang terlalu besar dapat menurunkan peringkat kecepatan halaman Anda secara serius.

Situasi dunia yang sempurna

Sebelum pembuatan situs web dimulai, bicarakan dengan desainer Anda untuk memastikan bahwa semua gambar dalam desain mengikuti rasio aspek gambar standar. Pemangkasan gambar seharusnya tidak menjadi masalah jika Anda mengatur ukuran gambar khusus Anda. Coba gunakan 3:2, 4:3 atau 16:9 karena ini adalah rasio aspek kamera standar. Jika ini tidak memungkinkan dan Anda akan menggunakan gambar dari situs langsung saat ini untuk pembangunan kembali, maka periksa untuk melihat rasio aspek apa dan desain yang sesuai untuk menggabungkannya, atau Anda akan menghadapi beberapa masalah dalam waktu yang tidak terlalu lama. masa depan.

Batasi ukuran unggah file

Ada banyak plugin yang memungkinkan Anda untuk mengontrol ini; begitu banyak sehingga saya tidak akan mencantumkannya, tetapi pencarian sederhana akan menunjukkan kepada Anda berapa banyak jumlahnya. Plugin ini datang dalam berbagai bentuk, tetapi saya akan memilih yang paling sederhana. Biasanya mereka menambahkan opsi tambahan ke opsi pengaturan/media Anda di WordPress yang dapat Anda atur saat masuk sebagai admin dan akan terlihat mirip dengan gambar di bawah ini.

Jika Anda tidak ingin lebih banyak mengasapi plugin, maka ini juga dapat dilakukan dengan menghubungkan ke 'wp_handle_upload_prefilter'. Contoh yang baik tentang bagaimana memanfaatkan ini dapat dilihat di posting blog ini di bagian bawah halaman.

Untuk gambar yang dipanggil menggunakan Bidang Kustom Tingkat Lanjut, Anda dapat menambahkan dimensi gambar/ukuran file maks-min dan membatasi ke jenis file tertentu semua dalam UI. Saya sangat menyarankan Anda melakukan ini.

Anda akan berpikir bahwa memaksakan ukuran unggahan maksimal sudah cukup, bukan? Sayangnya tidak, ini tidak akan menghentikan klien dari mengunggah gambar 500kb yang hanya 100px x 100px, dan juga tidak akan menghapus data EXIF ​​(meta) dari file. Jadi kita harus menerapkan lapisan pemeriksaan lainnya.

Optimalkan gambar

Cara terbaik untuk melakukannya adalah dengan menggunakan opsi penyimpanan Photoshop untuk web, tetapi Anda tidak dapat menjamin bahwa pengguna akan memiliki perangkat lunak ini, jadi kami sekarang memiliki dua opsi yang tersedia untuk kami:

Plugin

Ada beberapa plugin bagus yang tersedia di luar sana dengan Smush menjadi salah satu yang lebih baik, karena bagus untuk pengoptimalan batch dan juga memungkinkan opsi ukuran unggah file maksimal. Ada kotak centang tambahan untuk menghapus data EXIF ​​​​di pengaturan.

Pengoptimalan gambar online

Sekali lagi ada banyak di luar sana, tetapi TinyPNG adalah salah satu opsi paling sederhana yang tersedia: unggah file Anda dan unduh versi terkompresi. TinyPNG menghapus semua data EXIF.

Masih kurang?

Kami telah menyiapkan beberapa pemeriksaan yang diharapkan akan menyelesaikan masalah gambar, tetapi saya yakin Anda telah melihat beberapa masalah yang masih dapat terjadi:

• Ukuran file maksimum masih terlalu besar untuk beberapa gambar kecil
• Ukuran piksel sebenarnya bisa lebih besar dari yang sebenarnya dibutuhkan
• Tidak ada kontrol visual atau perbandingan atas gambar yang dioptimalkan kecuali pengguna memiliki perangkat lunak pengedit gambar yang bagus
• Gambar adalah jenis file yang salah

Sayangnya tidak ada cara untuk mengatasi ini dan kami telah menyiapkan sebanyak mungkin untuk mengatasi masalah apa pun. Satu-satunya cara untuk benar-benar memperbaiki masalah ini adalah dengan mendidik pengguna tentang jenis file dan memastikan bahwa mereka menggunakan semacam perangkat lunak pengedit gambar.

Didik pengguna Anda your

Kemungkinan solusi untuk pengguna

Ini sama sekali bukan cara sempurna untuk melakukan sesuatu, tetapi ini akan membantu semua orang yang terlibat dan menurunkan ukuran file gambar:

Ketahui jenis file Anda

Ada terlalu banyak untuk masuk ke posting ini, tetapi jika Anda ingin membaca lebih lanjut tentang jenis file, maka posting ini adalah sumber yang bagus untuk melihat subjek secara mendalam. Untuk tujuan posting ini, saya akan memecahnya sesederhana mungkin:

• Foto yang berisi orang, pemandangan, dll = JPG
• Potongan orang atau produk yang menutupi sesuatu yang tidak ada di latar belakang gambar = PNG
• Infografis atau ikon = GIF atau PNG

Jika Anda berpikir untuk mengunggah hal lain seperti TIF, PSD, atau AI sebagai file gambar untuk situs web Anda, maka BERHENTI sekarang.

Skenario kasus biasa

Perangkat lunak

• OS Windows menggunakan Microsoft Paint

Foto

• Maksimalkan browser sehingga Anda dapat melihat ukuran viewport terbesar yang digunakan gambar. Gunakan alat snipping Windows untuk mengetahui ukuran piksel sebenarnya dari gambar
• Buat kanvas/dokumen baru di MS Paint berdasarkan dimensi snipping tool
• Sesuaikan gambar baru Anda dengan kanvas baru
• Apakah gambar membutuhkan latar belakang transparan?
• Ya ? Simpan sebagai GIF atau PNG
• Tidak ? Simpan sebagai JPG
• Gunakan TinyPNG untuk mengompres gambar Anda
• Unggah gambar terkompresi

Skenario kasus terbaik

Perangkat lunak

• Semua OS menggunakan Photoshop

Foto

• Maksimalkan browser sehingga Anda dapat melihat ukuran viewport terbesar yang digunakan gambar. Gunakan alat tangkapan layar (alat mac) untuk mengetahui ukuran piksel gambar yang sebenarnya
• Buat kanvas/dokumen baru di Photoshop berdasarkan dimensi alat snipping
• Sesuaikan gambar baru Anda dengan kanvas baru
• Pilih simpan untuk web
• Pastikan Anda melihat gambar pada 100%
• Apakah gambar membutuhkan latar belakang transparan?
• Ya ? Pilih GIF, PNG8 atau PNG24 dari drop-down (Anda akan melihat kualitas gambar dan ukuran file berubah saat Anda melakukan ini)
• Tidak ? Pilih JPG dari tarik-turun
• Ubah berbagai pengaturan yang bergantung pada format gambar hingga Anda mendapatkan kualitas gambar/ukuran tradeoff yang bagus
• Pilih dropdown metadata dan pilih tidak ada
• Simpan, lalu unggah ke situs web Anda

Kesimpulan

Semoga ini akan membantu pengguna mendapatkan pemahaman yang lebih baik tentang cara menambahkan gambar baru ke situs mereka dan menyimpan banyak ukuran file. Saya tahu bahwa posting ini tidak mencakup penggunaan gambar latar belakang, retina, SVG dan banyak lagi faffery gambar lainnya, tetapi jika opsi yang dicakup diterapkan, itu masih akan membantu sebagian besar pengguna.

Untuk bantuan lebih lanjut dengan desain web, hubungi pakar kami hari ini.

Jika Anda memerlukan bantuan dengan Pengembangan Web Anda, jangan ragu untuk menghubungi kami.