An issue with images resizing after enabling the plugin



  • I started working with the initial version of this plugin and I LOVE IT. When the update to version 3 came out everything crashed. I waited a few days and those issues were resolved. Now I am experiencing a problem with images resizing to their own liking when the plugin is enabled. I did a comparison of the code it is generating and this is what the IMG tags look like:

    Without the plugin:

    <img class="alignnone wp-image-44179 size-full aligncenter" src="https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;ixlib=php-1.2.1" alt="" width="828" height="315" srcset="https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 1024w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-300x114.png 300w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-768x292.png 768w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-290x110.png 290w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-360x137.png 360w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-147x56.png 147w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-522x199.png 522w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner-400x152.png 400w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 1530w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 1580w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 1280w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 170w, https://MYSITE.COM/wp-content/uploads/2019/03/Programs-Sales-Page-Banner.png 828w" sizes="(max-width: 828px) 100vw, 828px">
    
    
    

    When the plugin is enabled:

    <img class="alignnone wp-image-44179 size-full aligncenter" src="https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;ixlib=php-1.2.1&amp;q=90" alt="" width="828" height="315" srcset="https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=390&amp;ixlib=php-1.2.1&amp;q=90&amp;w=1024&amp;wpsize=large 1024w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=114&amp;ixlib=php-1.2.1&amp;q=90&amp;w=300&amp;wpsize=medium 300w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=292&amp;ixlib=php-1.2.1&amp;q=90&amp;w=768&amp;wpsize=medium_large 768w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=crop&amp;h=110&amp;ixlib=php-1.2.1&amp;q=90&amp;w=290&amp;wpsize=page-header 290w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=crop&amp;h=260&amp;ixlib=php-1.2.1&amp;q=90&amp;w=360&amp;wpsize=search-thumb 360w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=56&amp;ixlib=php-1.2.1&amp;q=90&amp;w=147&amp;wpsize=affiliation 147w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=199&amp;ixlib=php-1.2.1&amp;q=90&amp;w=522&amp;wpsize=blog-gallery-tile-wide 522w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=152&amp;ixlib=php-1.2.1&amp;q=90&amp;w=400&amp;wpsize=content-left 400w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=crop&amp;h=680&amp;ixlib=php-1.2.1&amp;q=90&amp;w=1530&amp;wpsize=slider-full 1530w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;crop=top&amp;fit=crop&amp;h=842&amp;ixlib=php-1.2.1&amp;q=90&amp;w=1580&amp;wpsize=slider-full-home 1580w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=crop&amp;h=800&amp;ixlib=php-1.2.1&amp;q=90&amp;w=1280&amp;wpsize=gallery-module-large 1280w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;fit=scale&amp;h=65&amp;ixlib=php-1.2.1&amp;q=90&amp;w=170&amp;wpsize=sidebar_book 170w, https://THESITE.imgix.net/2019/03/Programs-Sales-Page-Banner.png?auto=compress%2Cformat&amp;ixlib=php-1.2.1&amp;q=90&amp;q=90 828w" sizes="(max-width: 828px) 100vw, 828px">
    

    I am noticing a significant increase in image sizes when I hoped it would respect the image dimensions and just serve the proper compression through IMGIX. I looked for an option in settings for this but I found nothing about automatically resizing the image's dimensions.

    A little help please 🙂

    Thank you!
    Greg



  • @fillinthe

    Are you using Gutenberg by chance?



  • I have the latest version of Wordpress (which makes gutenberg the standard). I have the classic plugin installed. The pages exhibiting this are using the "classic" mode. Sooooo yes but no?



  • @fillinthe

    The differences in the tags is the srcset attribute. For some reason, WordPress is using ALL of your image sizes in the srcset, even the cropped ones when the src image is full sized un-cropped.

    I'm actually not sure if that's a bug in Media Cloud or WordPress. I will confirm in the AM. We are pushing an update tomorrow, unrelated to this, and if it's a bug I can fix I will notify you either way. The behavior should be that the srcset contains image sizes that match the cropping mode of the src image.

    Go into the Imgix settings in Media Cloud and disable the srcset. If the results are acceptable, leave it on until I can get back to you with regards to the potential bugfix.



  • Well... Now it is showing the bigger image and not the smaller one. The backend says to show full size. The frontend is showing it in full size. It is doing what it should be doing as far as I see it. I guess I will wait to see what my client says when they get online. The way it works makes sense at the moment and isn't in error, but it was smaller before without reason I guess.



  • @fillinthe

    It was smaller because srcset contained an image appropriate for your browser window.

    I think I found the issue, but it's 3:30am so I'll have to visit it again in the morning.

    Sorry, will get to it asap though.



  • My client seems to think with srcset off everything is looking fine. Interesting.



  • We had to modify some CSS but it is weird that the CSS kicked in after the update... Oh well all is well now but we did disable srcset to make things better.


Log in to reply