DIY میڈیا ہوم علامت

اپنے گھر تھیٹر اور ہائی فائی سیٹ اپ کے ڈیزائن اور پیدا کرنے کے لئے الٹی سائٹ.

0ورڈپریس علامتورڈپریس کے ذریعہ خودکار طور پر اییف تصاویر تیار کریں اور پیش کریں

I have spent quite a lot of time optim­ising the per­form­ance of this site, and as part of ongo­ing work I mon­it­or new tech­no­lo­gies that could help improve the speed for vis­it­ors. I’ve been track­ing the adop­tion of next-gen­er­a­tion image formats for a while and with sup­port by web browsers now fairly wide­spread it was time to fig­ure out how to make use of these new formats in wordpress.

There are mul­tiple steps required which I have broken down into head­ings below

nginx میں مدد کو فعال کریں

The first step is to enable your web serv­er (میرے معاملے میں) to recog­nise the mime types of the new formats. ایسا کرنے کے ل you آپ کو mime.types میں ترمیم کرنے کی ضرورت ہے جو /etc/nginx/mime.tyype پر ملنے کا امکان ہے۔. I added the fol­low­ing section

جہاں فائلیں دستیاب ہوں وہ خود بخود پیش کریں

The next step is to tell nginx to serve files auto­mat­ic­ally whenev­er they exist (and to fall back to older formats where a new format file does­n’t exist)
To do this first edit the main nginx con­fig file (usu­ally /etc/nginx/nginx.conf) and add the fol­low­ing sec­tion inside the http{} sec­tion of the config

Note that I am only try­ing to serve jxl (JPEG-ایکس ایل) یا avif فائلیں, آپ مزید اختیارات شامل کرسکتے ہیں (in order of pref­er­ence!) اگر آپ چاہیں.
اگلے, you need to add the fol­low­ing under the serv­er{} sec­tion of the nginx con­fig (which may be in the main con­fig file or may be in a sep­ar­ate con­fig file depend­ing how you’ve set up your nginx con­fig structure)

Now nginx will look for image.jpg.jxl and then image.jpg.avif and then image.jpg.webp and finally image.jpg when it is asked for image.jpg by any browsers that sup­port the new­er formats. اگلا ہمیں ورڈپریس میں ان کو فعال کرنے کی ضرورت ہے

ورڈپریس میں اگلے جن شکلوں کو چالو کریں

Add the fol­low­ing code to your functions.php (چائلڈ تھیم میں مثالی طور پر یہ کریں تاکہ جب آپ اپنے تھیم کو اپ ڈیٹ کریں تو آپ کی تبدیلیاں زیادہ تحریر میں نہ آئیں)

Note that I also enabled sup­port for SVG ایک ہی وقت میں تصاویر

Now you can actu­ally upload next gen format images and use them dir­ectly in word­press if you want to, but I don’t recom­mend this as many older browsers don’t sup­port them yet — and we’ve already set up nginx to serve them intel­li­gently so we should make use of that. What we want to do is to auto­mat­ic­ally gen­er­ate the new formats when we upload images (there are plu­gins that do this for webp already, but noth­ing that does it for jxl or avif yet).

libheif انسٹال کریں

This step does require access to the com­mand line of your web host, which is straight-for­ward if you run a VPS, but may not be so simple if you’re on shared host­ing in which case you might need to ask your host for support
Run the fol­low­ing bash com­mands (these are selec­ted for کانٹاوس 8, oth­er dis­tri­bu­tions may be a little different)

ورڈپریس فنکشنس میں اپنی مرضی کے مطابق فنکشن شامل کریں (اور ان کے تمبنےل) avif کی شکل میں

As with the earli­er functions.php step I recom­mend adding this in a child theme

At present that is it — all images you upload will be con­ver­ted to avif cop­ies (with the ori­gin­als retained). You can regen­er­ate all of your images to cre­ate the avif files by using a plu­gin. Note — I haven’t yet set up JPEG-XL com­pres­sion as sup­port for it isn’t avail­able in main­stream browsers yet (although it is in prerelease browsers so it is com­ing very soon).

Whilst I’m cov­er­ing next gen formats and optim­isa­tion though I have one final tip — To com­press SVG gzip کے ساتھ تصاویر (or even bet­ter zop­fli and brotli). To do that requires anoth­er cus­tom function…

اضافی انعام: SVG دباؤ

نوٹ کہ آپ کو اپنے نینگس تشکیل میں gzip_static اور brotli_static فعال کرنے کی ضرورت ہوگی.

ایک نئے ورژن کیلئے خود مرتب کریں

I found that on Cen­tos the latest ver­sion of heif-enc is 1.7 which has quite a few bugs when cre­at­ing avifs. So I opted to com­pile my own new­er (1.12) اس کی بجائے اس کی تعمیر اور استعمال کریں. Doing so was a little com­plic­ated as it required the aom codec as a shared lib­rary. To do so run the fol­low­ing bash com­mands. Make sure to run them as a nor­mal user, جڑ صارف کے طور پر نہیں. Also note some of these com­mands may not be strictly needed, it took me a while to get it work­ing and I just made a note of what worked — I am by no means a linux expert!

ایک بار جب آپ یہ کرلیتے ہیں, make sure it works by run­ning php -a and run­ning the fol­low­ing command

You should get a full out­put, صرف ایک نہیں 1 لائن میں خرابی. Assum­ing that works ok you can modi­fy your functions.php so that each of the shell-exec ref­er­ences points to /us­r/­loc­al/bin/heif-enc instead of just heif-enc

ہم کچھ یاد ہے لگتا ہے? ہم سے ذیل میں تبصرہ کی طرف سے بتائیں. آپ کے سبسکرائب کرنا چاہتے ہیں تو سب سے اوپر دائیں مینو پر لنک سبسکرائب استعمال کریں. آپ بھی ذیل سماجی روابط کا استعمال کرتے ہوئے کی طرف سے اپنے دوستوں کے ساتھ اس کا اشتراک کر سکتے ہیں. چیرس.

جواب چھوڑیں