Code Snippet to Convert New Images to WebP - Code Snippets - Mark Harris - Media Library WordPress
Vložit
- čas přidán 27. 11. 2023
- Thanks to Mark Harris.
Code: codesnippets.cloud/snippet/Su...
Code Snippet to Convert New Images to WebP - Code Snippets - Mark Harris - Media Library WordPress
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your CZcams Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - Jak na to + styl
That's pretty awesome (especially when clients keep uploading stupid-size images, even when you instruct them to do otherwise!) Cheers Imran and Mark.
More than perfect. Saves a lot a time. Thanks for sharing!
thank you imran and mark for sharing ---- this is just great and awesome!
Thank you Mark Harris and Imran...
Wowww! Awesome solution for clients that upload images at whatever format and resolution 😅!
Agreed.
Thank you, for the code. you have done my work half. Once again, Thanks a lot.
Thank you Mark Harris and thank you Imran
Very helpful. Great that you shared this!
Thanks Mark Harris !!
Thank Imran & Mark, it's a game changer specially for clients whose editing themself their site 😀
Exactly
Thank you for sharing. Really appreciate it.
You are the best! Thank you!!
Thanks, Imran and Mark - It's like magic happens in my WordPress!!
I know right and so quick!
Thanks Imran for sharing and Mark thanks big up for this code, one of the best snippet out there's! Cheers
This falls into the Game-Changer category for sure!
This is just fantastic !!!!
super helpful, thank you!!
That's amazing, thank you for sharing
KEEP UP THE GREAT WORK ✌
Thank you! Cheers!
This is a very awesome snippet!
Thank you!👍
Thanks you so much for your video!
Brilliant 💪
Very very useful!
Very helpful no need to use third party sites you saved hours
Great tip... In my test, it perform better than Bulk Resize
Thanks
Yes it does!
Thank u
That's quite impressive
nice
Ok, it's working, but for some reason, when testing with this particular image, the webp file is getting bigger than the original jpg file (JPG = 285 KB to WebP = 301KB)
Thanks guys! This snippet is awesome. I normally compress the image using PS. Is it possible to compress the image, so we can get an even smaller file size?
Maybe as we’re looking at other possibilities
Thank you so much Imran! Great job! One question: can we tweak settings in the output WebP file? In Bulk... we can set the quality and size. Is it possible here also?
That's part of Phase 2 with looking at what else we can do with it.
This is awesome! Is there something that could be added to scale down the size (say to 1200px wide) as well?
We're looking at scale buttons too, though you could manually edit the scale inside WP
Great ! (as usual:))
Does it work with user that have images libraries connected via a plugin as envato elements or instant images ?
When choosing an image from these connected librairies images are automatically downloaded in library.
To be honest, not tried that yet. Let us know what you find if you do test - but make sure you have a backup/staging site.
Thank you for sharing. However there are two vulnerabilities found in the code. Have they been fixed?
AI Bot Comments:
Potential vulnerability found : Arbitrary File Deletion
Found on line : 20
Code : unlink( $file_path )
Vulnerable line : 29
Code : $file_path = $upload['file']);
Potential vulnerability found : Arbitrary File Deletion
Found on line : 20
Code : unlink( $file_path )
Vulnerable line : 29
Code : $file_path = $upload['file']);
Found 2 vulnerabilities
Yes; that's about removing the original PNG or JPEG when added so that you don't get duplicated images in your File Manager.
Just works ! thanks. q. Any insight on changing the old Twitter 'share button' icon in Elementor? thks
Currently just upload the X SVG Icon to use. fontawesome.com/icons/x-twitter?f=brands&s=solid
@@websquadron as an icon yes thank you. But in "shared buttons" icons are by default..
Great ! Is that snippet converting all the images sizes generated ? (Medium, large, ...) Thank a lot for the answer !
Yes it does. I just tested by setting my Media Settings for Thumb, Medium, large, and after adding a PNG image, it created WebP versions in the File Manager for the other sizes.
So what a wonderful snippet ! Thanks a lot !@@websquadron
Hi Imran, great find, but have you seen the two notices about the code from the Code Snippets AI Bot? Should we be careful.
Don't worry that's about removing the original PNG or JPEG when added so that you don't get duplicated images in your File Manager.
Thank you, Imran. I have tested the code and it works really well Mark wrote a lovely code snippet. All the very best, John
@WebSquadron Does not work on my hosting. What did you say in the video what could be the problem if it doesn't work? I couldn't understand it acoustically. On my hosting ImageMagick 6.9.10 is installed (if that is what you were talking about). Thank you! 😊
Check with your host as ImageMagick and/or GD will be needed. if you used any other WebP Converting Plugin does that work?
@@websquadron Thanks for your answer! As I wrote: ImageMagick is installed, but it still doesn't work. Plugins that convert images I didn't test. What a pity. Thank you anyway.
Can I add the code in the php function of a child theme? to avoid deleting the code when I update the main theme
You could
Is it possible to add the IPTC fields of the original file (jpg) to the converted file in the database, or to get the wp_post ID of the new file?
i try wp_get_attachment_metadata, but not working.
You may need to write custom SQL query to update the post metadata for the new WebP file with the IPTC data extracted from the original JPG. However, this approach requires caution to avoid corrupting the database.
@@websquadron I already knew this, I just thought there was an idea to include it in this snippet.
Are there any potential drawbacks or risks associated with automatically converting all uploaded images to WebP format, especially considering compatibility issues or user preferences?
It's fine as the majority will use the browsers that support WebP.
@@websquadron gracias 🤙🏼
Is there another version of this script that converts the original image, serves it as a WebP, and saves the original, too?
I'll need to dig out a modified version that saves the original too
@@websquadron In the code snippet at line 50, it says " // Optionally remove the original image @unlink( $file_path ); "
If you comment this line of code it should keep the original image.
But whats happend it the users browers dont serve webp image it wont ben show
Almost all do, and the small minority that don't need to catch up. If you know that the client's target audience are likely to use a Non-WebP Compliant browser then consider if you should use WebP or an alternate 'auto format presenter' solution. Remember that just because a client uses an old machine/kit or a browser not ready for WebP - should you ignore 96%+ of the market?
Plus - WebP is just about page speed rendering of images. It's good practice to consider it.
caniuse.com/webp
Would you happen to know why the converted file is resulting in a WebP bigger than the uploaded jpeg file?
The compression algorithms for JPEG and WebP handle different types of image content with varying efficiency. Some images, especially those with large areas of uniform colour or simple patterns, might compress more efficiently with JPEG.
JPEG compression can introduce visible artifacts in areas with high colour variance. When converting such a JPEG to WebP, trying to maintain the perceived quality might result in a larger file size because WebP attempts to reduce these artifacts.
WebP supports the inclusion of rich metadata, such as ICC profiles, Exif data, and XMP data. If a JPEG image has minimal metadata and it's converted to a WebP that preserves or adds extensive metadata, the resultant WebP file could be larger.
WebP offers both lossy and lossless compression. A JPEG image converted to a lossless WebP can be significantly larger because the original JPEG's lossy compression may have reduced the file size by eliminating details that lossless WebP aims to preserve.
@@websquadron fair enough, thank you very much!
"Could not update snippet. Request failed with status code 500" Any idea why?
Same issue here😢
This is usually related to the server. Does your host allow access to GD or Magick?
The error message "Could not update snippet. Request failed with status code 500" typically indicates that there was an internal server error while trying to update or modify a snippet of code or content on a website or application.
This is usually related to the server. Does your host allow access to GD or Magick?
The error message "Could not update snippet. Request failed with status code 500" typically indicates that there was an internal server error while trying to update or modify a snippet of code or content on a website or application.
How about Avif images?
Many browsers are not ready for that
Anyone have problems with the code is not working thanks
Works for me.
Does your host allow gzip?
@@websquadron works fine but now stops working and the images doesn't show in the library
whit
FYI......Just checked the code and saw this. "Potential vulnerability found"
It's to do with removing items when it loads the WebP and can still be used.
Thank you Mark Harris and Imran...