Meningkatkan Persepsi Prestasi: Saiz semula imej atas permintaan

Artikel ini adalah sebahagian daripada siri untuk membina aplikasi sampel-blog galeri multi-imej-untuk penandaarasan dan pengoptimuman prestasi. (Lihat repo di sini.)

---

Kami telah membina aplikasi sampel-blog galeri multi-imej-untuk penandaarasan dan pengoptimuman prestasi. Pada ketika ini, aplikasi kami menyajikan imej yang sama tanpa mengira resolusi dan saiz skrin yang disampaikan. Dalam tutorial saiz semula imej ini, kami akan mengubahnya untuk melayani versi saiznya bergantung pada saiz paparan.

Takeaways Key

Gunakan SRCSET untuk membolehkan imej responsif yang menyesuaikan saiz berdasarkan skrin penonton, meningkatkan masa pemuatan dan prestasi tanpa mengorbankan kualiti.
Melaksanakan saiz semula imej atas permintaan dengan meluncur untuk menguruskan penyimpanan pelayan dengan cekap dengan menghasilkan imej pada saiz yang diminta hanya seperti yang diperlukan.
Meningkatkan pengalaman pengguna dengan menggunakan JavaScript untuk secara dinamik memohon atribut SRCSET dalam modal imej, memastikan saiz imej yang optimum digunakan dalam konteks tontonan yang berbeza.
• Mengoptimumkan gambar kecil untuk memuatkan cepat di halaman rumah dengan menetapkan saiz yang lebih kecil, sambil membolehkan imej yang lebih besar dan terperinci apabila interaksi pengguna.
• Pertimbangkan penyepaduan saiz semula imej ke dalam seni bina aplikasi untuk mengurangkan penggunaan jalur lebar dan meningkatkan responsif laman web secara keseluruhan.
Objektif

Terdapat dua peringkat untuk peningkatan ini.

kita perlu membuat semua imej responsif di mana sahaja ini mungkin berguna. Satu tempat adalah gambar kecil di halaman rumah dan di halaman galeri, dan satu lagi adalah imej bersaiz penuh apabila imej individu diklik di galeri.

1. kita perlu menambah saiz semula logik ke aplikasi kami. Intinya ialah
menghasilkan
2. imej yang diubahsuai dengan cepat seperti yang diminta. Ini akan menyimpan imej yang tidak popular daripada mencemarkan cakera keras kami, dan ia akan memastikan yang popular, atas permintaan berikutnya, berkhidmat dalam saiz optimum.
imej responsif?

Seperti yang dijelaskan oleh siaran ini, imej di web moden sangat kompleks. Daripada hanya dari zaman dahulu, kita kini mempunyai sesuatu yang gila seperti ini:

Kombinasi SRCSET, gambar dan saiz diperlukan dalam senario di mana anda ragu bahawa jika anda menggunakan imej yang sama untuk saiz skrin yang lebih kecil, subjek utama imej mungkin menjadi saiz terlalu kecil. Anda ingin memaparkan imej yang berbeza (lebih fokus pada subjek utama) dalam saiz skrin yang berbeza, tetapi masih ingin memaparkan aset berasingan imej yang sama berdasarkan nisbah peranti-piksel, dan ingin menyesuaikan ketinggian dan lebar imej berdasarkan pada viewport.

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

kerana imej kami adalah foto dan kami sentiasa mahu mereka berada dalam kedudukan yang ditentukan oleh doman mereka yang mengisi maksimum bekas induk mereka, kami tidak memerlukan gambar (yang membolehkan kami menentukan sumber alternatif untuk resolusi yang berbeza atau Sokongan penyemak imbas - Seperti cuba membuat SVG, maka PNG jika SVG tidak disokong) atau saiz (yang membolehkan kita menentukan bahagian Viewport yang harus diduduki). Kita boleh lari dengan hanya menggunakan srcset, yang memuat versi saiz yang berbeza dari imej yang sama bergantung pada saiz skrin.

Menambah srcset

Lokasi pertama di mana kita menemui imej adalah di rumah-galleries-lazy-load.html.twig, templat separa yang menjadikan senarai galeri skrin utama.

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

kita dapat melihat di sini bahawa pautan imej diambil dari penapis ranting, yang boleh didapati dalam fail SRC/TWIG/IMAGERENDEREXTension.php. Ia mengambil ID imej dan nama laluan (ditakrifkan dalam anotasi dalam laluan serveImageAction ImageController) dan menghasilkan URL berdasarkan formula itu:/image/{id}/raw -> menggantikan {id} dengan id yang diberikan:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

mari kita ubahnya kepada yang berikut:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Sekarang, semua URL imej kami akan mempunyai --x sebagai akhiran, di mana x adalah saiz mereka. Ini adalah perubahan yang akan kami gunakan untuk tag IMG kami juga, dalam bentuk SRCSET. Mari kita ubah ke:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Jika kita menyegarkan halaman rumah sekarang, kita akan melihat saiz baru SRCSET yang disenaraikan:

Ini tidak akan membantu kita banyak, walaupun. Jika viewport kami luas, ini akan meminta imej bersaiz penuh, walaupun mereka menjadi gambar kecil. Jadi bukannya SRCSET, lebih baik menggunakan saiz kecil kecil tetap di sini:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Kami kini mempunyai Thumbnails-on-Demand, tetapi yang mendapat cache dan diambil ketika mereka sudah dihasilkan.

mari kita memburu lokasi srcset lain sekarang.

Dalam templat/galeri/single-galeri.html.twig, kami menggunakan pembetulan yang sama seperti sebelumnya. Kami berurusan dengan gambar kecil, jadi mari kita mengecilkan fail dengan menambahkan parameter saiz ke dalam penapis getimageurl kami:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

dan sekarang untuk pelaksanaan SRCSET, akhirnya!

Pandangan imej individu diberikan dengan tetingkap modal JavaScript di bahagian bawah pandangan tunggal-galeri yang sama:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Terdapat panggilan tambahan yang menambah elemen IMG ke dalam badan modal, jadi di mana atribut SRCSET kami mesti pergi. Tetapi kerana URL imej kami dihasilkan secara dinamik, kami tidak boleh memanggil penapis ranting dari dalam skrip. Satu alternatif adalah untuk menambah SRCSET ke dalam gambar kecil dan kemudian menggunakannya di JS dengan menyalinnya dari unsur-unsur ibu jari, tetapi ini bukan sahaja akan membuat beban imej bersaiz penuh di latar belakang kecil (kerana pandangan kami luas) , tetapi ia juga akan memanggil penapis 4 kali untuk setiap lakaran kecil, melambatkan perkara. Sebaliknya, mari buat penapis ranting baru dalam Src/Twig/ImagerendereRextension.php yang akan menghasilkan atribut Srcset penuh untuk setiap imej.

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span> alt<span>="{{ gallery.name }}"</span>
</span></span><span>    <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

kita tidak boleh lupa untuk mendaftarkan penapis ini:

<span>public function getImageUrl(Image $image)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId(),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

kita perlu menambah nilai-nilai ini ke dalam atribut tersuai, yang akan kita panggil data-srcset pada setiap lakaran kecil individu:

<span>public function getImageUrl(Image $image, $size = null)
</span><span>{
</span>  <span>return $this->router->generate('image.serve', [
</span>      <span>'id' => $image->getId() . (($size) ? '--' . $size : ''),
</span>  <span>], RouterInterface<span>::</span>ABSOLUTE_URL);
</span><span>}
</span>

Sekarang setiap lakaran kecil individu mempunyai atribut data-SRCSET dengan nilai SRCSET yang diperlukan, tetapi ini tidak mencetuskan kerana ia berada dalam atribut tersuai, data yang akan digunakan kemudian.

Langkah terakhir mengemas kini JS untuk memanfaatkannya:

Menambah Glide

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>srcset<span>="
</span></span></span><span><span>           {{ gallery.images.first|getImageUrl('1120') }}  1120w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('720') }} 720w,
</span></span><span><span>           {{ gallery.images.first|getImageUrl('400') }}  400w<span>"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Glide adalah perpustakaan yang melakukan apa yang kita mahu-saiz semula imej atas permintaan. Mari pasangnya.

Seterusnya, mari kita mendaftarkannya dalam aplikasinya. Kami melakukan ini dengan menambahkan perkhidmatan baru ke SRC/perkhidmatan dengan kandungan berikut:

<span><span><span><a</span> class<span>="gallery__link"</span> href<span>="{{ url('gallery.single-gallery', {id: gallery.id}) }}"</span>></span>
</span>  <span><span><span><img</span> src<span>="{{ gallery.images.first|getImageUrl('250') }}"</span>
</span></span><span>       <span>alt<span>="{{ gallery.name }}"</span>
</span></span><span>       <span>class<span>="gallery__leading-image card-img-top"</span>></span>
</span><span><span><span></a</span>></span>
</span>

Perkhidmatan ini menggunakan perkhidmatan FileManager yang telah diisytiharkan yang disuntik secara automatik kerana pendekatan pendawaian baru Symfony. Kami mengisytiharkan kedua -dua laluan input dan output sebagai uploadsdir, berikan output dire akhiran cache, dan tambahkan kaedah untuk mengembalikan pelayan. Pelayan pada dasarnya adalah contoh Glide yang melakukan saiz semula dan berfungsi kembali imej saiz.

<span><span><span><img</span> src<span>="{{ image|getImageUrl(250) }}"</span> alt<span>="{{ image.originalFilename }}"</span>
</span></span><span>    <span>class<span>="single-gallery__item-image card-img-top"</span>></span>
</span>

kita perlu membuat kaedah getuploadsdirectory di FileManager Public, kerana ia kini swasta:

Akhirnya, mari kita ubah kaedah ServeMageAction ImageStroller supaya kelihatan seperti ini:

{% block javascripts %}
    {{ parent() }}

    <span><span><span><script</span>></span><span>
</span></span><span><span>        <span>$(function () {
</span></span></span><span><span>            <span>$('.single-gallery__item-image').on('click', function () {
</span></span></span><span><span>                <span>var src = $(this).attr('src');
</span></span></span><span><span>                <span>var $modal = $('.single-gallery__modal');
</span></span></span><span><span>                <span>var $modalBody = $modal.find('.modal-body');
</span></span></span><span><span>
</span></span><span><span>                $modalBody<span>.html('');
</span></span></span><span><span>                $modalBody<span>.append($('<img src="' + src + '" >'));
</span></span></span><span><span>                $modal<span>.modal({});
</span></span></span><span><span>            <span>});
</span></span></span><span><span>        <span>})
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>{% endblock %}

Kaedah ini kini meletupkan ID imej dengan dua kali ganda, memisahkan saiz dari ID imej. Sebaik sahaja doktrin mengambil filePath imej dari pangkalan data, saiznya dilampirkan semula ke nama fail jika seseorang diluluskan, jika tidak, imej asal digunakan. Jika imej ini tidak wujud, seseorang dihasilkan dari laluan asal dan disimpan untuk kegunaan kemudian.

Untuk tujuan demonstrasi, kami mengambil jalan yang lebih lama di sini dan menjana fail secara manual dengan memasukkan saiz kepada mereka dan menyimpannya ke dalam folder muat naik. Harus diingat bahawa anda juga boleh menggunakan kaedah outputimage dari meluncur untuk secara langsung mengeluarkan imej, dan ia akan dihidangkan terus dari subfolder cache, tidak menyimpannya dengan akhiran dalam folder muat naik utama. Anda juga boleh menggunakan kaedah MakeImage untuk membuat imej dan membiarkan logik lama mengambil imej mengambil alih. Itulah pendekatan yang kami pilih di bawah:

<span><span><span><picture</span>></span>
</span><span><span><span><source</span> media<span>="(max-width: 700px)"</span> sizes<span>="(max-width: 500px) 50vw, 10vw"</span>
</span></span><span><span>srcset<span>="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"</span>></span>
</span>
<span><span><span><source</span> media<span>="(max-width: 1400px)"</span> sizes<span>="(max-width: 1000px) 100vw, 50vw"</span>
</span></span><span><span>srcset<span>="stick-figure.png 416w, stick-figure-hd.png 416w"</span>></span>
</span>
<span><span><span><img</span> src<span>="stick-original.png"</span> alt<span>="Human"</span>></span>
</span><span><span><span></picture</span>></span>
</span>

Perniagaan penentuan imej atas permintaan kami beroperasi. Sekarang yang perlu kita lakukan hanyalah menguji perkara.

ujian

Sebaik sahaja kami menyegarkan semula halaman utama, yang akan menjadi sedikit lebih perlahan sekarang, imej akan mula dihasilkan dalam folder VAR/Muat naik. Mari kita periksa, tanpa menatal ke halaman kedua.

Sudah cukup, kami kini mempunyai versi kecil kecil dari setiap imej di halaman rumah, dan itulah imej yang disampaikan. Perhatikan saiz fail kecil. Sekarang mari kita mengakses galeri dan klik pada imej untuk mendapatkan versi besar.

yep, imej kami dihasilkan dari asal.

Tetapi bagaimana dengan mudah alih? Dalam pelayar moden, ia cukup mudah untuk menghidupkan mod mudah alih. Mari cuba membuka imej galeri dalam paparan mudah alih dan periksa folder imej selepas itu.

Bagaimana jika kita menukar orientasi dan periksa folder kemudian?

Kejayaan, saiz mudah alih imej kami telah berjaya dihasilkan, dan imej skrin penuh dari sebelumnya telah digunakan semula kerana itu adalah betapa besar skrin "mudah alih" kami dalam mod landskap. Srcset atas permintaan telah berjaya dilaksanakan!

Aplikasi dengan peningkatan ini di tempat telah ditandakan sebagai pelepasan ini.

Kesimpulan

Dalam siaran ini, kami melalui proses mengoptimumkan imej untuk penghantaran di tapak berorientasikan foto. Kami menyimpan gambar kecil pada saiz tetap untuk hasil terbaik, dan dengan imej skrin penuh kami memberi tumpuan kepada pelaksanaan srcset-tambahan mudah untuk mana-mana laman web moden-selaras US.

Tetapi semasa kami mengubah saiz imej, tidakkah ia bijak untuk mengoptimumkannya secara automatik untuk kualiti dan saiz dengan mengeluarkan metadata? Dan adakah ia benar -benar pilihan terbaik untuk mengubah saiznya apabila permintaan pengguna sedang menunggu atau ada pendekatan yang lebih praktikal? Ketahui di bahagian seterusnya.

soalan yang sering ditanya mengenai saiz semula imej atas permintaan

Bagaimanakah saiz semula imej atas permintaan meningkatkan prestasi laman web? Daripada memuatkan imej bersaiz penuh, laman web memuat versi saiz yang sesuai dengan skrin penonton, yang biasanya lebih kecil dan dengan itu lebih cepat dimuatkan. Ini bukan sahaja meningkatkan pengalaman pengguna dengan mengurangkan masa tunggu tetapi juga menjimatkan jalur lebar, yang boleh memberi manfaat kepada pengguna dengan pelan data yang terhad.

saiz semula imej tradisional melibatkan saiz semula secara manual setiap imej sebelum memuat naiknya ke laman web. Ini boleh memakan masa dan tidak cekap, terutamanya untuk laman web dengan sejumlah besar imej. Sebaliknya, saiz semula imej atas permintaan secara automatik mengubah saiz imej seperti yang diminta oleh pengguna. Ini bermakna imej yang sama dapat disampaikan pada saiz yang berbeza kepada pengguna yang berbeza, bergantung pada keperluan khusus dan keupayaan peranti mereka. Menyediakan satu bundle yang dipanggil liipimaginebundle yang membolehkan anda melaksanakan saiz semula imej atas permintaan. Anda boleh memasang bundle ini menggunakan komposer dan kemudian konfigurasikannya mengikut keperluan anda. Bundle ini menyediakan pelbagai penapis yang boleh anda gunakan untuk mengubah saiz imej, termasuk skala, tanaman, dan penapis kecil. Anda boleh memohon penapis ini ke imej anda menggunakan fungsi 'apply_filter' dalam templat anda.

Bolehkah saya mengubah saiz imej pada muat naik dalam Symfony? Symfony. Ini boleh dilakukan dengan menggunakan Vichuploaderbundle, yang membolehkan anda mengubah saiz imej secara automatik kerana ia dimuat naik. Anda boleh mengkonfigurasi bundle untuk mengubah saiz imej ke saiz tertentu atau kepada peratusan saiz asalnya. Ini boleh menjadi sangat berguna jika anda ingin memastikan bahawa semua imej yang dimuat naik ke laman web anda adalah saiz yang konsisten.

Bagaimana saya boleh melayani imej S3 yang diubahsuai dengan cepat? Dengan cepat dapat dicapai menggunakan perkhidmatan seperti AWS Lambda. Anda boleh menyediakan fungsi Lambda untuk mengubah saiz imej secara automatik kerana ia diminta dari baldi S3 anda. Fungsi ini boleh dicetuskan oleh gerbang API, yang akan lulus saiz imej yang diminta ke fungsi. Fungsi ini kemudiannya akan mengambil imej asal dari S3, mengubah saiznya ke saiz yang diminta, dan mengembalikan imej saiz kepada pengguna.

Apakah faedah menggunakan CDN untuk saiz semula imej atas permintaan? . CDN mempunyai pelayan yang terletak di seluruh dunia, yang bermaksud bahawa imej boleh dihidangkan dari pelayan yang paling dekat dengan pengguna, mengurangkan latensi. Di samping itu, CDN boleh cache saiz semula imej, yang bermaksud bahawa jika imej yang sama diminta pada saiz yang sama sekali lagi, ia dapat disampaikan secara langsung dari cache, meningkatkan prestasi lagi. ? Masa pemuatan yang lebih cepat dapat meningkatkan pengalaman pengguna, yang merupakan faktor enjin carian yang diambil kira ketika laman web ranking. Di samping itu, dengan melayani imej yang sesuai untuk peranti pengguna, anda boleh mengelakkan masalah dengan kebolehgunaan mudah alih, yang juga boleh menjejaskan ranking enjin carian laman web anda. ?

Ya, saiz semula imej atas permintaan adalah pelengkap yang sempurna untuk reka bentuk web responsif. Dengan reka bentuk responsif, susun atur laman web anda menyesuaikan diri dengan saiz skrin pengguna. Dengan saiz semula imej atas permintaan, imej di laman web anda juga boleh menyesuaikan diri dengan saiz skrin pengguna, memastikan laman web anda kelihatan hebat dan berfungsi dengan baik pada semua peranti. Saiz semula?

Walaupun saiz semula imej atas permintaan mempunyai banyak faedah, terdapat juga kelemahan yang berpotensi untuk dipertimbangkan. Salah satu daripada ini adalah kuasa pemprosesan yang diperlukan untuk mengubah saiz imej dengan cepat, yang boleh meletakkan ketegangan pada pelayan anda jika anda mempunyai laman web trafik tinggi. Di samping itu, jika anda menggunakan perkhidmatan pihak ketiga untuk saiz semula imej atas permintaan, mungkin terdapat kos yang berkaitan dengan perkhidmatan ini. 🎜> Terdapat beberapa cara untuk mengoptimumkan persediaan saiz semula imej atas permintaan anda. Salah satunya adalah menggunakan CDN, yang boleh menyaiz imej saiz semula cache dan melayani mereka dari pelayan yang dekat dengan pengguna. Satu lagi ialah menggunakan perkhidmatan seperti AWS Lambda, yang boleh mengubah saiz imej di awan, mengurangkan beban pada pelayan anda. Di samping itu, anda boleh mengoptimumkan imej anda sebelum memuat naiknya, contohnya dengan mengurangkan kualiti mereka atau menggunakan format fail yang lebih cekap.

Atas ialah kandungan terperinci Meningkatkan Persepsi Prestasi: Saiz semula imej atas permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!