SMUSh CDN auto resize breaks img tag on mobile

When enabling the auto resize option in the Smush Pro CDN settings, I get some strange code on my images when viewing it on mobile (or in dev tools responsive mode).

For example:

https://cdn.livechat-static.com/api/file/v2/lc/att-old/8801096/6ba999eb85a36e64fb7702290c09f011/Screenshot_20190514-125145.png

https://cus+++++++++++apps.com/features/

similar thing occurs on this page: https://cus++++++++++++apps.com/giving/

<img src="https://755652.smushcdn.com/1333638/wp-content/uploads/2018/09/04-2-1024x716.png?lossy=1&strip=1&webp=1" alt="Empower <span srcset=" https:="" 755652.smushcdn.com="" 1333638="" wp-content="" uploads="" 2018="" 09="" 04-2-1024x716.png?lossy="1&strip=1&webp=1" w,="" "="" data-resize-detection="0">

it’s adding a “<span srcset=” https:=”” ” right in the middle of my img tag.

  • Predrag Dubajic
    • Support

    Hi Craig,

    I was doing some extensive testing and the issue seems to be related to ALT attribute loaded from Advanced Custom Fields when there’s HTML used in it, as you have <span> in your title that is also used as ALT text for your image.

    I also tried testing this on my end by adding the image in WP content editor and it works fine in that case, but what I noticed is that WP will load ALT first and image source later so making this change in your template should be enough to sort it out.

    So if you check your features page template you will find this code that is used for loading image:

    <img src="<?php echo $image_url; ?>" alt="<?php the_field('features_header_title'); ?>" />

    Edit that so the ALT is before source, like this:

    <img alt="<?php the_field('features_header_title'); ?>" src="<?php echo $image_url; ?>" />

    Save the changes to your template file, and change it for other templates (if you have any), and that should be it.

    Let us know how it goes.

    Best regards,

    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hi Craig

    Thank you for getting back to us!

    I did some more tests on my end and I can confirm the issue. To be exact, what happens is that if the alt text contains HTML:

    – if “alt” is after “src” – the CDN code gets injected into the “alt” content (the initial issue that you reported)

    – if “alt” is before “src” the CDN code is not injected at all (so images are not fetched from CDN, neither resized therefore)

    The only working solution here at this moment is to actually strip all HTML from “alt” content – it would work then regardless whether “alt” is before or after “src”. In fact “alt” shouldn’t use any HTML as it’s purpose is to be an alternative for wherever images cannot be displayed. It shouldn’t even be used with any custom code for any “tooltips” and similar features (a “title” attribute should be used for that instead) but I understand that for some reasons it can be there.

    That said, to make it work you would want to actually replace all the occurrences of this code inside any “img” tag

    alt="<?php the_field('features_header_title'); ?>"

    with this

    alt="<?php strip_tags( the_field('features_header_title') ); ?>"

    That would remove HTML tags from “alt” attribute content and make Smush CDN work for these images that did contain HTML inside “alt”.

    Additionally, I have also reported it to our developers as a bug so they could include additional HTML parsing/filtering improvements into the plugin in future.

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.