Mengoptimumkan Muat Naik Imej dengan Pemotongan dan Pemampatan dalam Projek Next.js

Sebagai pembangun bahagian hadapan, terdapat kemungkinan besar anda telah atau sedang mengusahakan projek yang melibatkan penyiaran dan paparan imej. Jika anda belum, anda akan melakukannya tidak lama lagi. Jadi, baru-baru ini, selepas kami selesai mengerjakan projek kami, kami mendapati diri kami menghadapi masalah apabila memaparkan imej yang disediakan oleh pengguna.

Bagaimana Semuanya Terbongkar
Masalah terbesar ialah cara mengendalikan dimensi, lebih-lebih lagi ketinggian berbanding lebar imej. Menetapkan imej kepada muat objek: penutup kelihatan seperti penyelesaian yang sempurna untuk mengisi bekas imej. Tetapi ini memperkenalkan masalah lain. Pengguna memuat naik imej dengan dimensi berbeza; ada yang bersisik dan yang lain memangkas ke dalam bekas yang sama. Hasil daripada ketidakkonsistenan tersebut adalah UI yang tidak begitu menarik, terutamanya apabila gambar profil pengguna dipangkas sedemikian rupa sehingga kurang kelihatan.

Penyelesaian
Saya memutuskan untuk mencari penyelesaian yang lebih baik. Mencontohi cara platform media sosial mengendalikan muat naik imej, saya fikir adalah baik untuk memberi pengguna keupayaan untuk memangkas dan pratonton imej sebelum memuat naik. Sedikit penyelidikan, dan akhirnya saya menemui pakej reaksi-imej-crop. Pakej ini menyediakan pengguna dengan keupayaan untuk memangkas imej mereka dalam masa nyata, sekali gus menyelesaikan sebahagian daripada isu tersebut.

Semasa menguji kefungsian pemangkasan, saya perhatikan saiz imej yang saya gunakan ialah 9.5MB. Pada masa itulah saya menarik perhatian: mengapa tidak memampatkan imej pada sisi pelanggan sebelum memuat naik? Walaupun bahagian belakang mengendalikan ini juga, keupayaan untuk mengoptimumkan imej selangkah lebih awal menjimatkan lebar jalur dan meningkatkan masa muat naik.

Ini membawa saya ke pakej lain yang berguna: pelayar-imej-mampatan. Menggabungkan ini dengan react-image-crop membolehkan saya memangkas dan memampatkan imej dengan cepat, dan memberikan kesan yang hebat.

Perdagangan
Penyelesaian ini bukan tanpa beberapa pertukaran. Pertama sekali, anda perlu menambah dua lagi pakej pada projek anda; Selain itu, imej yang masuk di bawah 30KB sebenarnya akan menjadi lebih besar disebabkan oleh overhed mampatan.

Saya juga menggayakannya menggunakan komponen UI Shadcn dan pakej zon jatuh balas supaya membenarkan pengguna mengklik untuk memilih atau menyeret dan melepaskan imej mereka.

Menggunakan Komponen Imej Next.js
Untuk prestasi yang lebih baik, penyelesaian ini boleh digabungkan dengan komponen Next.js Image, yang mengoptimumkan imej secara automatik. Komponen Next.js Image membantu menyampaikan imej bersaiz sesuai, meningkatkan masa pemuatan dan prestasi keseluruhan. Dengan menyepadukan pemangkasan dan pemampatan dengan kuasa pengoptimuman imej Next.js, anda boleh memberikan pengguna pengalaman yang lebih lancar dan cekap.

Demo dan Kod Sumber
Anda juga boleh mencuba demo langsung di sini

Juga di sini ialah repositori GitHub kod sumber. Sila bintangkan jika anda rasa ia berguna! Beritahu saya jika anda mempertimbangkan untuk menggunakan penyelesaian ini dalam projek anda.

Atas ialah kandungan terperinci Mengoptimumkan Muat Naik Imej dengan Pemotongan dan Pemampatan dalam Projek Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!