XF 2.3 Do attachment thumbnails not support webp?

[JoyFreak]

I've noticed that attachment thumbnails do not support webp. Any reason why that is or will there be support for those too? Do I need to add this as a suggestion or could it be a bug?

 

[Chris D]

Are you basing this on the actual information inside the image file or the extension of the file?

Worth noting that the extension will always be .jpg no matter what the underlying file type is.

 

[JoyFreak]

Are you basing this on the actual information inside the image file or the extension of the file?

Worth noting that the extension will always be .jpg no matter what the underlying file type is.

For example, this here is the full attachment url: https://www.adminintel.com/test321/index.php?attachments/saturnalia-tips-webp.23/

And this is the thumbnail url: https://www.adminintel.com/test321/data/attachments/0/23-cf9618eddaf14cdaf064ea1ab9fe9667.jpg

Inspecting it in the console looks as if though thumbnails are still .jpg files and don't support webp as full attachments do. Hope this makes sense.

Edit: When I save the full attachment image, it saves as webp. When I save the thumbnail attachment, it saves a .jpg. So it looks like it doesn't support it which is unfortunate.

 

[Mr Lucky]

I noticed that when optimising, the time/date of thumbnails is updated as with the actual attachments, ie they have actually been processed in one way or another.

I can't tell what the actual file type is. Mac finder information just says it's whatever file type the extension is. So if I take a )known) webp file and change the extension to jpg then finder tells me it's a jpg.

So how do we actually know the file type?

One thing I found was that the folders within /data/attachments (thumbnails) seems to be slightly larger after optimising. Also the files get renamed. I'll attach them here as zipped so that they don't get optimised on uploading

Original thumbnail from live 2.2.15 forum(2698 bytes) is attached name 3-0ffff72b872c1fda398ad693b1da02f5.jpg


Optimised thumbnail from test 2.3.0.beta 3 (3186 bytes) attached name 3-bf6e4643b296041be2406f7e586d7b00.jpg

If it actually ends up larger it seems we'd be better off not having thumbnails optimised

 

[Kirby]

When I save the full attachment image, it saves as webp. When I save the thumbnail attachment, it saves a .jpg

The extension doesn't matter, it is webp even though the extension is .jpg.

 

[JoyFreak]

The extension doesn't matter, it is webp even though the extension is .jpg.

But I don’t see any reference that the file nor url or extension is webp for thumbnail attachments.

Full attachments are fine and working as expected.

 

[Mr Lucky]

My unscientific way to test is upload the optimised thumbnail to my live 2.2.15 forum. The image (with .jpg extension) does appear to be webp because it shows very briefly then I get this error:

 

[Kirby]

So how do we actually know the file type?

Open it with a program that can show file metadata (like IrfanView) or with a text editor and look at the beginning; JPEG usually starts with JFIF at byte 5, WebP with WEBP at byte 9.

 

[JoyFreak]

Open it with a program that can show file metadata (like IrfanView) or with a text editor and look at the beginning; JPEG usually starts with JFIF at byte 5, WebP with WEBP at byte 9.

Yeah I tried that and found that both avatars and thumbnail attachments are showing as JPEG in the metadata.

 

[Mr Lucky]

thumbnail attachments are showing as JPEG in the metadata.

I found the optimised thumbnail shows as webp in texteditor

RIFFjWEBPVP8 ^p>ù*îd>Q$çE$£!îZç‡H†EÂ
πÍ?Ì<‹π/πÔx`˚ÓÛSÁ–Ô˝ÉÆO–cÀã⁄#˜;ı∫„ìÜòæÈ\?ŒCÓ{W«åæ]+Vp˜bæyX`säæ·^L9ÌKAº*ä∏J•.+ˇ‚’¡?ví∂êz¸ /A◊ü≈D”1•eá©øˇ˚(˛Û<5;CÉ…Ö„}•ËzI¶ûƒ§öy[Ú4.ôê˘ñëqüo7j¯    $,°bö”1ë˙X‘‰Ç˙lFÚÛTÓÙ5ü˛t-ùÿ}÷Î-lmp§Ìf≤
Ÿfi9∂ Íâ*†3¶Û|◊t}l6;fC˜€¬{mê»éIˇô6∞“¿™1|æΩW¨’é°äߢ◊4ä·L‰ö/a…4ç‘ì86"‚÷«Œ˛ ◊o¶ÖÁNÅm£•úÒ„sFˆ∞k“Dœmìä
ÿÇj܃Eêtû!ÌÈlÏîÓ–Ÿ‰≠I≈^°H˚f–ºId€¬
6Õ¢™ä9-®¯8x"Tflë‚6˘öèµ^IjSªı´+x2ÿô
⁄nk    Ö≠.
UÚ˙ùXÉ#ïflœäà{^8{Ë=+mì∆¥∫°Ç‘ˇ•%≈_ñ±QÉ4:›°cOtbæM√P粨√|Ó^Ë–Á,K{~rB’Œf~Æ¿¸?ú‹à<˛uÈ`2BÑEÀ˜¯„9áwÍ®Î2Í≤ãÄè4.,'*éπÜÑ*"Fd(lr
óˇŒÂ
ΩA˛≈÷uè¿êUX.G ˝s˝—ªµ;æG="µ¨I}@(HÙwrÕæ€ÒˆX#ö˜∞∞‚°ÉósÒÚ~< o댶â{0‰çaw∑º?Gü‹Å…ê≥±-‘ôÃú9Ø∑¨¶”äÍW4¨flqNB4r\bT7}|íS$‡|‘ÔçØ>DYدåí≥ñx"Zñ‚ç`9µ»ëoπ¡    sø˘D*ªΩg«∞K÷êÙëêã»ipòñ”àåzíÏûz™›ìº2ÊU(™§‚Lߢ›ƒ°…äãA”#F"O–ÒŒÁ[OŸ1Lá‘Ö⁄`◊ 2ÀÄ$Ê=[L˛“≥™√π€≤    "Ω@.-ˆ?4∂kTiU⁄dDéhŸçƒ7â¸jR :ÀÚßF`–M1•}ÚT|UƒÉânÓ«@⁄}ZQ'DÅôAqZúœ`)§p@b<kiônRŒØÁ«œÎò8ÍìXhãnbRÙ>ÕÁÓá•„™§–±∑â≤©ç¿Ö ¶Ó}·(S˙Ç—¨íÏÉ!Ó≈aÆê
ñ5õ∏ùOABfißy¸ÇCe„{?yˆbì‰-÷flo«›,U–∂ÇZôJ›Ã‡àBüCUpΩõ˘«,QÙ≤ÛS1ù∑N—ßÓ
2›«•x&CS¶Y©Î4Ü]Ñ®fi¢z•ù∆b ÄôëjŸƒBK…;ãx;Öº–©cX¶Ó»
ŒÖkFlÍÆZ+§fNPï®|K
Õ_fl!˚&ÆVØHr‡æ5Ë\À˙ô—xa«⁄¨Ü7—'ªn"iç…HwV¢véù;ˇfinTÏŸ!ø‘∫˚ÍaHnÈ60:"–$ã”e;Dä˛íLáî≥—¥bí,˘:®Ø_wÈîrûvĢçåÉœ∑ã∫ó‘Ôµ∂çºæ/ç7ÒÁPQlŒc\U@uˇ¡àÕ*㔋)”ÜÅç™LÁπ∆˙ü»j∏‘/]ûÕ¡‰$ÿ?¶"…ƒ¸FL˚hc=s['æ\^·/u˝áıP)‹˛∆¸9ÚLW´y2,çü◊Ω–"∑3q(b¬dçm´‚ìnt„(WˇV-ʧ¨8)Á°®‹°©£Q‘‰·çâI·Ü°zé
1|èê,7∏j˘] l7Ùø~|è∫¯c*¢oæŸ%'ùNw`Rúñf2Õün˚foû>§≥{∑9ÆZ]˘ûR'øü¨JÙ—HÀÄb”ıì≈›√ô‘¯∂»ìËÀ˘sâ?$— :GæIYóy,–Ú±6ugŸŸjEÖÒä-]±b®âÁdfl>¶"ç kº]RDˆõ≥≠¡í~€Ω+LW¬[3D&JÜ çDàø,ÀÖ9FsiË@Ú÷´∞Å3w√%å˜⁄3ºYôh‘˘¯Ì<∑0∂À≈9˛    £–Ï‹¥vúo’Å`pöTæ¡—Úzjõ’#™˙d‡›Ïq~VIª3E(À(jX||ÿjT√èT6Âés˙YŒ•¢!ú¢,ù2ûȶ∆·0r¡ÈRnf!<Ê@4,ê
∑ ùH≤/V∫Q˛bˇ£≥«Àò-P¯õÖdœÔg
…9◊»˙’≠≈¥ØˇãÚ<%’Ì8À’ÛØü©Ó∑ûµªY1+eb¥ÿåZΩcˆ'RŸK~∫|êõc›c‰∏5Wú,©ë!q◊D©üª–ú<ªÜ¥@Õ≥ ıñ; ›∞¯¥¨Ö¡˜Q“?∑V ˙9≈ôï¸MÎ'òƒÈn"®â#⁄{Ïv(€ç—∑·º_÷ˇ«z≤.<)Õ≈fiEü
ãq*©¶Xâ⁄πò¸X–øäLcd≈ôé
ëN˛∆⁄ê√   
Tz¢]¶jeKmmß)0yF∫âmˇÛG•Z“,ôÆEEìçv⁄p,≈¢’·µ7Ÿ‚oƒ8ŸÌ E·&|≈VK˙+œ
$㈮l©Îq∆Æ
<UXı@( Yk[n∏{ôëÀn∏r~ób¯œm…íz2ës}©¨:—P*v.ˇ¬{qœÚ¶ÙXÄ∫˛l)CÙ ë;ø5*÷˘4¸˛]J‘˙-ıû    µÁsÁ0g⁄5*
•i6}?*J‚±Œ]≤ìc?ïP£â±KßoíÈhjLìo5)%4JT0—ÄWB˝“dx§a7—«‚o…n”HOâËÀàîΩÑ≤§§8°q£≥â¿ëûä˙’˛ÁT„€™õ≥I∆flØÈ-ÿˇÈk¸v‘    ܸ†—5@\=3ìQ{æDfl≤⁄‘7ˆƒk@œz~Ão‚«ësŒ(øñ?yÒôIKªi∫Ê_ÆvY•PŒwÙ-Ö–,Hû‡Æ°¸ì*“¡s««ñ–Mïûíõøñ‚Yò    ï™,;d…M¸≠Fpà[źÙߣêæx—cÛØÅŒ|˛QrõKõ1∂±6Ü&∫å˙;=qŒÄ -Q}̯ôÎ7Chu∫Ï)ÇÙÅ°ãFÙÄ›2Øq∏ + é˛Y$æ‹O·flºõí≈§ÙÇ$∞h™+ìsÙÜw€∆øŸ∂∆£<«JTæ≥õl<À˜4íèë¢û/€≥Pú;WÃ≤»(∂»¥.±ŸÃŸ¶≠S/ö1\ÀL†E±Á|*K∆œ±∞ô_gÇ—|⁄2«>ƒ˚‚j3=Ï;TK,#áÏYHfô>˜ªâÚÒ˝√}äŒîz_ê>∑‡–Ê∆÷ÇeH¯9≥ùXéπó˙Õõ≈∏s@p°/ÿŸê≤=Æ˚ˆÚ‘Î>— Èj‚âN´    ·Ò-ÁÛ>dÇ£y*oE–!Àº=‰ø≥óbƒ°fõMåÑd™»¸’üÖv≈äS
H‹·re”y+Œ–±'qYÉcsÉÔÈK‡zïÒ–Îôî®ã–A„‘™!˙4´Ò“.&»"◊<H9§±ºuªEæZÙ¸≥]≤
øû˙e~≈“ïw«˚È&j>πÂR∏Âu¿≥à±f°ÓeºÉáŒü8ÅáqÓm˙∂≠jQ:ÙRly~ÓÒlfl_‰1%[ñõ@]$aLUOtÇwº‘π≠˝7ƒ…£·†≈E¶ÖÎ_7pâd®eÎE–∑€5≠’¬ñ|≠'C∏Q¥o÷ÀóyóªoW*l1%¡„b$&≈~NÜflò&jœÒ5r´{B˜T™‰Ä
ò55…öÎUIN1'≤rt[dé3û{v¨!⁄SáËÍoOÚg駪
¬Bê‹íÉ◊ŒõôyQ’Zã¯òQU„+Dª∫€ÜLÎù!†$ŒkëÄäó?wxu˙©ÜöF⁄    mmı
•èܵTeδ‰˛„πcµ‰®:ØÇ8™î¬ô7ôÑÕëÎÂP'-i*æËV$nÎÍ”3å$ÌjᲩÚ*4^ËãZÔ•SA´æ.ÏE/@~=‚¢xe∞…qÑe°>≠@/¿πcéwË÷1 ÚöJ¶´ΩÁ(jˆ˚–ÌEÜÄ…b&∂Ó»°dA<›+√µû….΂O

 

[Mr Lucky]

Same one before optimising

ˇÿˇ‡JFIFˇ˛;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 85
ˇ€C     !"$"$ˇ€Cˇ¿Cd"ˇƒ   
ˇƒµ}!1AQa"q2Åë°#B±¡R—$3brÇ   
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzÉÑÖÜáàâäíìîïñóòôö¢£§•¶ß®©™≤≥¥µ∂∑∏π∫¬√ƒ≈∆«»… “”‘’÷◊ÿŸ⁄·‚„‰ÂÊÁËÈÍÒÚÛÙıˆ˜¯˘˙ˇƒ   
ˇƒµw!1AQaq"2ÅBë°±¡    #3Rbr—
$4·%Ò&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzÇÉÑÖÜáàâäíìîïñóòôö¢£§•¶ß®©™≤≥¥µ∂∑∏π∫¬√ƒ≈∆«»… “”‘’÷◊ÿŸ⁄‚„‰ÂÊÁËÈÍÚÛÙıˆ˜¯˘˙ˇ⁄?ÆÆR‹GI#ó'Ê$qå˛5´·ï땪ô`xXÑ…'<˜Í¶ï•j>Hi∞ûf1ìÿ÷Œô0›àû‡yìFSz`˜˙W∆”MY≥ƒKSXfiƒêïI√JΩI9#>û¸–∂s*º˘˝ »£$r√*;mÂjŸ-ˆld˚q…≠Pflπ—Ç•v‡‘gßJÈ—Ë4Æ2Ÿ–œ$pÆ˘Jm<åu–d‘ñ±ò'óÌiTaGÃ3üÁPX∏éIÁ3Eoèf˜!AbsÍ=
4\⁄›H±≈}üƒ≈%Sµ{û¶Öµ“5ï
믢—ß,o**¸G=jfiô$rC:ïdÿF    9Œ}´/¥Îáh·πIç≤Oπ≈hhxé+ñÑ4HHúíxÈÕs"RiŸö˛PVñm«<‰Áˇ≠Rd€n9 r3U·r„pY    e∆?<Tƒ(Ã√úg9‡{V‹¬‹YÂf.{1ı¨˚©.¬Öâ«¢±˛∫Iü,R96±n˝ˇµ"«pIwö1(q¿§‰-«[DV<J«y9!I QPI41∂Ÿñ«$ìEFèqÛXÛªÎmKNÜÓŒV∏∂∆ËÃD yËx≈QkõX'Üf›Ë√E;è5„fl    ºA·}KÏwÖüJ∫qÊÉúƒflfl»é„Ë+⁄g∫é—7Y≈5’≈∆2¸‰/`0::Ösbh∫ZËvcpnÑ¥ÿÈ.µ{;hßfp%ÿ#»¡˝—ıˆ´æ””^ó㮀¨ˆ+ø…iS$Ú}˙◊õÍ¡yNπ*/mïù#,    ÖŸHèb3^c7å‡áÓm,o˜P‘ŒÎŸ…Í∫øNkL˝¶#ûˇNÌÏ}&,ç$jŒ7u5øHØÛyÌøıÕ"¬‚-:+¢Ú£¨≤ƒπïâ^ºx=9„öÚèx”√(´≠Ëê€iöÊùà∆KvCû_Ç3«BzwÆÁ∆f-0Ív—πûrÂæf>Ê´<˙Oâ-Ê·æ…©`îœ ˇ*ıiW¥}¯5ı◊~˙∏‹®ÔäSi4≠•∫k‹Ùµœ]XXy4Ù∏ãÕ-
Ç'#=Fx vÕO߸FÒÜÊ뢒„ºÚXõvm=ÒÿèQ\Eflé8-bÛ“§î    UW*@«∞¨]KXå_˝ÆDigeÀ=GÂP©sFˆ∑ï∑ıgüÏ©U√øk´]nÙ^Kmœ¥~x∆À≈⁄8ªÖÑ2™©û¨2≥¡¡ˆ5‘ìæ<ÜìúëıØúæαŸ]c%&w∫Çvå˙ü«5Ù\3G0˘H∆2ŸÏoZÛ”πÚıi®M≈2•”5ºÒï]…BœΩ?dçÄBß'!qëR∫´+Ï(>ùOȸÍπS±ÂÆ4˘åâ°b©Ö…Á®#ö*®2®⁄X~
åQSÃ֩ڕ蟀Ä5ËfiÒ=∂òãiz¶H1àÿû„˘WáÈ˙∂‹d÷ÃZ∏(>c^≈EëÂí>⁄t!UrÀbOà∫ú÷û9’µ'€–∆‡Ÿ∆^?œ5Áæ!í”Pç9Ÿ˜X˸U∫˝|ÿ¡s∑k◊Î\‹ok'ñK8=X◊>Ôy_ë—_®“T-xÿQv™Çœ ºRÿä„Ìé‹éÉ“©≈3ñ'⁄§[Ifl*áΩkæQäM^«ëW&ìóMÑëV{â.êNq[ZR^ ÖÜÿ√Åúg?OZÉI—ß∏*ÅXÓËz
Ùflx\[¨o √†«J‰≈baÚ≠œ>¶1B¸õ≥≠¯]•À£ÂÎ …«˘ıØ£¨mø2a±…Ø*=Ç¡´o*Ã\É∑æ+‘-N≈Uf 1Ø2gñ››ŸeëæŒÂŒ=≈Uy'Œ6(T‡s≈Yñl»±)ULsÉ–U;…a⁄Ÿ¿‰v≈LñÜ«®Y†+p«Ã≥QT-,ƒË“$8$Q\“nÂ∆ˆ>äI¸ j“]∞Ml•Ω¥ù@©?≥mòq_LÏ}äM∂í\À"˘A≤OØDü·úW>MFˆnõa!Œaûjá∫w:¨l»Qê«äÙÎ…ib∫leá8ÙØ#âîehûn'8œïÏèè¬∫TVSπ∆d˚øß"°o
^[N$X7ƒsáOò°wXï÷•b@Ì\‹⁄ï‚fiÓ∑∏ñ2ä÷ö≠5¨è6øô€¯kAπéh…èÂ'é:WßxG0Ø*§å„Ωy^ë‚Mn¬ƒL◊BC◊˜®ı<’ãOã#µô]VÇÁ3É˙◊/≤©6⁄gì‘˙[@“c¥EîźïO&∂ï„|¬ Usë“æqè„ÁàƒAõ`Œ1ÛEv^¯Ω®√⁄¥(á9cá,OÿJ“[≥◊·Vîˆı®.Ó)UVg˃+œ≈    …ß<E«$ú‚∂≠ù'µY›Ö¡ÕL£u†:RÂπ-ÖÏIn»™A9¢∞ß±∫iI@{
ÿ¢±ºâRk°Ú4N‡}„V·wœfi4Q^¸è¥=k·⁄*h¢EPı5…¯ÆI$Ò…˘±E·Ωkû#¯ü3«¢Z°U„µq6
≠r7ÛEÍ/щ≈ÓoͧÆû8Æi˙ö(¨∞fl    œ
áÿ|◊H#"Ω£¡q∆∂iÖä)b∑DVËzVúÏñ√i«5≠› \ì0…¢äö{9;DfifiÙI$Ì¢ä+ûÁˇŸ

 

[Kirby]

RIFFjWEBPVP8

This is a WebP image.

ˇÿˇ‡JFIFˇ˛;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 85

This is a JPEG image.
So ... seems to be fine to me.

For example, this here is the full attachment url: https://www.adminintel.com/test321/index.php?attachments/saturnalia-tips-webp.23/

This is a WebP image.

And this is the thumbnail url: https://www.adminintel.com/test321/data/attachments/0/23-cf9618eddaf14cdaf064ea1ab9fe9667.jpg

This is also a WebP image.

 

[avalanch]

Are you basing this on the actual information inside the image file or the extension of the file?

Worth noting that the extension will always be .jpg no matter what the underlying file type is.

So even if it's a png, gif or webp, the extension will show as .jpg, correct? Wouldn't that make optimizing images more difficult?

 

[Chris D]

Yes, any avatar or attachment thumbnail uploaded is normalized to have a .jpg extension. Difficult in what sense?

 

[avalanch]

for running any optimization on them like jpegmini server

AWS JPEGmini Server Documentation | Deploy & Optimize on the Cloud

Explore the specifics of deploying and using the JPEGmini Server on Amazon Web Services. Harness cloud power for image and video optimization.

jpegmini.com

or grabbing them via ftp to process locally.

 

[Chris D]

I wouldn't expect it would make such things difficult. These tools should base their optimisation on the contents of the file, rather than the extension.

The difficult part is that there's a bunch of metadata stored in the database which would be incorrect if you took external approaches such as these. Significant one being the file size we store which get passed into the Content-Length header when outputting in the browser.