sdai

Thank you for your work David, I was on a short break but I have confirmed that its working perfectly! Developers like you are what make the community great. I am happy to hear that it works for “real” webp files too!

Hi David, this works great for some files, but it seems that some files created with Pillow have a prefix on the exif data, which may need to be manually skipped. I have been looking for what could cause this prefix, but I cant seem to figure it out and it causes an error in parsing. If skipping over the Exif(?)(?)prefix where present is all that is needed then that might be a workaround, but some files do not have that prefix and I’m trying to find out where it is/isnt present.

Here’s the parsed result:

post_id => 3851
exif:FileName => test2.webp
exif:FileDateTime => 1676829753
exif:FileSize => 57642
exif:FileType => 2
exif:MimeType => image/webp
exif:SectionsFound =>
exif:COMPUTED.html => width="550" height="368"
exif:COMPUTED.Height => 368
exif:COMPUTED.Width => 550
exif:COMPUTED.IsColor => 1
mla_exif_errors.0 => E_WARNING (2) exif_read_data(exif.jpg): Invalid TIFF alignment marker
id3:GETID3_VERSION => 1.9.22-202207161647
id3:filesize => 57642
id3:filepath => /bitnami/wordpress/wp-content/uploads/2023/02
id3:filename => test2.webp
id3:filenamepath => /bitnami/wordpress/wp-content/uploads/2023/02/test2.webp
id3:avdataoffset => 0
id3:avdataend => 57642
id3:fileformat => webp
id3:video.resolution_x => 550
id3:video.resolution_y => 368
id3:encoding => UTF-8
id3:mime_type => image/webp
id3:riff.header_size => 57634
id3:riff.WEBP.VP8X.offset => 12
id3:riff.WEBP.VP8X.size => 10
id3:riff.WEBP.VP8X.data => ???%?o?
id3:riff.WEBP.VP8 .offset => 30
id3:riff.WEBP.VP8 .size => 57534
id3:riff.WEBP.VP8 .keyframe => 1
id3:riff.WEBP.VP8 .version => 0
id3:riff.WEBP.VP8 .show_frame => 0
id3:riff.WEBP.VP8 .data_bytes => 134256
id3:riff.WEBP.VP8 .scale_x => 0
id3:riff.WEBP.VP8 .width => 550
id3:riff.WEBP.VP8 .scale_y => 0
id3:riff.WEBP.VP8 .height => 368
id3:riff.WEBP.EXIF.offset => 57572
id3:riff.WEBP.EXIF.size => 62
id3:riff.WEBP.EXIF.data => Exif??MM?*???????????????this is my comment smiletest??
id3:riff.encoding => ISO-8859-1
id3:playtime_seconds => 0
id3:mla_webp_exif_metadata.FileName => test2.webp
id3:mla_webp_exif_metadata.FileDateTime => 1676829753
id3:mla_webp_exif_metadata.FileSize => 57642
id3:mla_webp_exif_metadata.FileType => 2
id3:mla_webp_exif_metadata.MimeType => image/webp
id3:mla_webp_exif_metadata.SectionsFound =>
id3:mla_webp_exif_metadata.COMPUTED.html => width="550" height="368"
id3:mla_webp_exif_metadata.COMPUTED.Height => 368
id3:mla_webp_exif_metadata.COMPUTED.Width => 550
id3:mla_webp_exif_metadata.COMPUTED.IsColor => 1
id3:mla_webp_exif_errors => E_WARNING (2) exif_read_data(exif.jpg): Invalid TIFF alignment marker
id3:width => 550
id3:height => 368
id3:post_id => 3851

And the file itself: https://a.uguu.se/RkKgNxyx.webp

My only thought is that I made some of these test files using a different method that doesn’t include the prefix, but it appears that every file that Pillow creates has it.

• This reply was modified 1 year, 9 months ago by sdai.

That’s a very clever solution! I did some digging and it did seem that the limitations of built in wordpress data parsing might make it difficult, but moving the data over to a jpeg and getting WP to parse that is very clever. I do have imagick on my server, I’d be happy to test your dev version, your solution sounds like it would work well.

Thanks for your reply, here is a sample: https://nyai.link/2023/02/14/test-post/

Clicking on the first image takes you to somewhere in the middle of the order and theyre in the default order.

Additionally, using Pillow to assign a “default” value (0x010f, camera make) and using exiv2 to read it (which I believe is the “standard” for manipulating metadata) appears to work correctly too. https://i.imgur.com/3q7iVbO.png

Trying to figure out the “correct” way to do this is not easy though… I cant find a single thing about writing webp metadata programatically, beyond a couple of C# libraries

• This reply was modified 1 year, 9 months ago by sdai.
• This reply was modified 1 year, 9 months ago by sdai.

Hi David, thanks for your reply. I am using the Pillow module in python to do this, however as a small disclaimer I cannot say with 100% certainty that I am doing it the correct way. I’ve done a few hours of googling over the past couple of days and come up with not much about the “intended” way to implement metadata in webp, however this method does appear to work, and is very straightforward. Using tools such as https://jimpl.com/ to check the files shows that the data is added to the file.

Here are two images, one with exif data set and one without: https://a.uguu.se/AEzTDjur.webp
https://a.uguu.se/sgkMqNFG.webp

The code used to generate the file:

from PIL import Image

def get_images():  

    rules = "this is my comment smile"

    first = Image.open("1.webp")

    first = first.convert("RGB")

    exif_data1 = first.getexif()

    exif_data1[0x9286] = rules

    first.save("test.webp", optimize = True, quality = 98, exif = exif_data1)

    exifed = Image.open("test.webp")

    exif_data2 = exifed.getexif()

    print(exif_data2)

get_images()

The result of a metadata check showing the comment: https://jimpl.com/results/oMZ8qY6T8HiXsXNLtaWtuFZo

Hex codes for setting specific fields: https://exiv2.org/tags.html

Conversely here is the exact same file saved as jpeg

post_id => 3659
exif:FileName => testjpeg.jpeg
exif:FileDateTime => 1676112510
exif:FileSize => 50414
exif:FileType => 2
exif:MimeType => image/jpeg
exif:SectionsFound => ANY_TAG, IFD0
exif:COMPUTED.html => width="512" height="512"
exif:COMPUTED.Height => 512
exif:COMPUTED.Width => 512
exif:COMPUTED.IsColor => 1
exif:COMPUTED.ByteOrderMotorola => 1
exif:COMPUTED.UserComment => this is my comment smile
exif:UserComment => this is my comment smile

• This reply was modified 1 year, 9 months ago by sdai.

Thanks for your reply, I will try this