WordPress 7.1 AVIF HEIC: Txo Load Server Thaum Upload Duab

WordPress 7.1 AVIF HEIC hloov txoj kev WordPress ua duab thaum upload rau hauv ib tsab xov xwm: browser muaj peev xwm decode, compress, resize thiab tsim cov duab me ua ntej xa cov ntaub ntawv mus rau server. Vim li ntawd, PHP tsis tas yuav ris tag nrho txoj haujlwm ua duab hnyav ib yam li yav tas los. Qhov feature no pab tau tshwj xeeb rau cov duab AVIF, HEIC los ntawm iPhone, thiab cov server uas siv shared hosting thiab raug txwv CPU, RAM lossis PHP runtime.

Txoj mechanism tshiab siv ib qho WebAssembly build ntawm libvips uas khiav hauv Web Worker. Nov yog ib qho progressive enhancement, tsis yog kev tshem tawm tag nrho ntawm server-side processing. Yog browser lossis cuab yeej tsis ua tau raws li cov cai, WordPress tseem tuaj yeem rov qab siv txoj processing flow qub.

WordPress 7.1 AVIF HEIC ua duab li cas?

Hauv txoj kev ua haujlwm ib txwm, tus neeg siv upload daim duab qub mus rau server, ces WordPress hu GD lossis Imagick los tsim thumbnail, cov duab nruab nrab thiab ntau qhov responsive sizes. Thaum daim duab loj, theem no yuav ua rau PHP memory usage nce, response time ntev dua lossis ua rau muaj memory limit error.

Hauv WordPress 7.1, browser tuaj yeem ua cov kauj ruam hauv qab no ua ntej upload:

• Decode cov duab JPEG, PNG, WebP, AVIF thiab qee hom HEIC/HEIF.
• Resize raws li WordPress cov image-size settings.
• Compress thiab encode daim duab dua los ntawm libvips pipeline uas khiav dhau WebAssembly.
• Tsim cov duab me thiab xa txhua daim ntawv uas twb ua tiav lawm mus rau server.
• Khaws daim HEIC qub ua source file nrog rau thaum tsim nyog.

WordPress nplooj ntawv qhia txog qhov feature no hais tias txoj kev no pab txo server CPU thiab memory usage, thiab txhawb AVIF, HEIC thiab HDR gain map hauv qhov media system tshiab (raws li wordpress.org).

Qhov tseem ceeb yog feem ntau koj tsis tas yuav nruab WebAssembly libvips los ntawm SSH lossis ntxiv PHP library. Pipeline yuav raug download thaum editor xav tau, tsis yog muab tso rau hauv thawj JavaScript bundle kom loj zuj zus.

Yuav txo PHP load li cas thaum upload duab hauv WordPress 7.1

1. Ua raws li browser thiab cuab yeej cov cai

Full WebAssembly flow yog tsim los muab qhov tseem ceeb rau cov Chromium browsers niaj hnub thiab cov cuab yeej uas muaj resources txaus. WordPress cov ntaub ntawv kuaj qhia tias browser-side processing xav tau RAM ntau dua 2 GB thiab ib qho connection ruaj khov hauv cov xwm txheej tsim nyog (raws li make.wordpress.org).

HEIC tseem vam khom rau platform codec. Chrome, Edge lossis Brave ntawm macOS yuav ua raws li codec uas muaj; Windows yuav tsum muaj HEVC support; Safari yuav siv nws tus kheej HEIC processing path. Yog li, tsis tsim nyog hais tias txhua browser hloov HEIC ib yam nkaus.

2. Khaws image-size settings kom tsim nyog

Kev hloov processing mus rau browser tsis txhais tias yuav tsum tso cai rau cov duab qub loj dhau. Mus xyuas cov sizes hauv Settings → Media thiab khaws cia tsuas yog cov sizes uas theme lossis block siv tiag tiag. Ntau dhau sizes yuav ua rau processing time ntawm tus neeg upload lub cuab yeej ntev dua thiab tsim cov ntaub ntawv ntxiv hauv media library.

Piv txwv, ib lub website xov xwm yuav khaws ib qho loj rau cov duab saum toj ntawm tsab xov xwm, ib qho nruab nrab rau cov npe xov xwm thiab ib qho square rau social-media cards. Tsis tsim nyog tsim ntau kaum sizes tsuas yog vim ib lub plugin qub tau xav tau lawv yav tas los.

Yog koj tab tom upgrade plugin thiab theme tib lub sijhawm, saib WordPress 7.1 testing checklist ua ntej siv rau lub website uas twb muaj neeg upload xov xwm.

3. Kuaj server-side fallback path

Tsis yog txhua daim ntawv yuav raug ua hauv browser. Cov format uas tsis nyob hauv daim npe txhawb nqa, browser uas tsis muaj zog lossis cuab yeej uas tsis muaj WebAssembly capability yuav rov qab siv server-side processing. Yog li, server tseem yuav tsum muaj GD lossis Imagick ua haujlwm ruaj khov rau cov xwm txheej fallback.

Hauv DevTools, qhib lub tab Network, upload ib daim JPEG lossis AVIF thiab saib cov media requests. Tom qab ntawd muab PHP-FPM CPU, RAM thiab processing time piv ua ntej thiab tom qab qhib WordPress 7.1. Qhov txiaj ntsig uas ntseeg tau yuav tsum siv tib hom duab, tib qhov loj thiab tib tus naj npawb ntaub ntawv los sib piv; tsis yog cia siab rau qhov kev xav tias upload ceev dua xwb.

Yuav txo qhov pheej hmoo thaum update, koj kuj yuav tsum saib plugin update testing process thiab sim hauv staging environment ua ntej hloov lub website tiag.

Cov kev txwv thiab teeb meem uas nquag ntsib thaum ua duab hauv browser

Gutenberg cov ntaub ntawv rau developers tau hais meej tias qee cov hooks xws li wp_image_editors, image_make_intermediate_size thiab image_memory_limit tej zaum yuav tsis raug hu thaum tab tom siv client-side processing (raws li GitHub WordPress Gutenberg). Qhov no yog ib qho tseem ceeb uas yuav tsum kuaj yog lub website muaj plugin watermark, CDN, cuab yeej optimize duab lossis lwm txoj kev post-processing uas tau kho tshwj xeeb.

Hauv kev siv tiag, txoj kev nyab xeeb tshaj yog saib client-side processing ua ib txheej pab kom nrawm dua, tsis yog ib qho laj thawj los kaw tag nrho qhov peev xwm ua duab ntawm server. Kuaj peb yam no: lub sijhawm upload tiav, kev siv PHP-FPM thiab qhov loj ntawm cov ntaub ntawv uas raug tsim. Yog tias peb yam no puav leej zoo dua, hos qhov zoo ntawm daim duab tseem nyob rau qib uas lees txais tau, ces WordPress 7.1 tab tom muab cov txiaj ntsig uas xav tau.

Cov ntaub ntawv siv

• WordPress 7.1
• Client-Side Media Processing in WordPress 7.1
• Call for Testing: client-side media processing
• gutenberg/docs/reference-guides/filters/editor-filters.md at trunk · WordPress/gutenberg