I just released Meteor Slides 1.5.5. This is a small update that adds support for responsive images using srcset in WordPress 4.4 and fixes some Twenty Sixteen theme conflicts.
WordPress 4.4
Meteor Slides has been responsive for years now, scaling the slideshow images down for smaller screens and devices. But WordPress 4.4 adds new built in support for responsive images using srcset. What this means is that rather than loading the full size images and shrinking them at smaller sizes, it will actually detect the size of the screen or device and load smaller images. This will reduce the file size of the images that are loaded on smaller screens, speeding up the load time of your websites!
Meteor Slides will still responsively scale the slide images in between these different srcset images sizes so that your slideshows scale smoothly to fit all sizes. By default WordPress sets the max width of the responsive images to 1600 pixels, so if you have images larger than that it will incorrectly load a smaller version of that image on larger screens. Meteor Slides will check the slideshow width in the settings and increase this max width if the slideshows are wider than 1600 pixels. If you need to fine tune the srcset sizes or adjust the WordPress defaults for a certain theme, there are filters for changing these.
Twenty Sixteen Theme
WordPress 4.4 ships with a new default theme, Twenty Sixteen. The latest version of Meteor Slides has been updated to be fully compatible with the new default theme.
I have also created a custom header.php file for Twenty Sixteen which will replace the header image on the homepage with a slideshow, just like featured image above. You can download this Twenty Sixteen header slideshow template on Github, which you can use in a child theme for Twenty Sixteen.
HI! This is a very important feature for slideshows. I’ve tested your slider, and there is a placeholder image that still loads without srcset with meteor-shim class. How could we add srcset to this image too?
Also checked my site with PageSpeed Insights and looks like it can’t recognize smaller images in slideshow yet. Is it a google problem? I think if we change placeholder to incorporate srcset too, maybe it’ll work better.
Could be a great plugin!
Hi Iggy, thanks for pointing out the lack of srcset for the shim image. I will update this in a future version of Meteor Slides. This image is hidden and is just used for sizing the slideshows, so loading the full sized shim image works fine, though it may load an extra hidden image on mobile and tablet.
PageSpeed Insights is seeing the smaller slide images for me, just not for the shim image. But these are just guidelines, the important thing for users and Google is that the site loads quickly. The size of the slide images, and the quantity of slides is going to have a much greater impact than a single large image.
Hi!
Sent you some code by mail, added to shim img. And custom theme function code.
Maybe you could check and use in the next version.
Thanks Iggy, I’ll check it out!
Just found this plugin by Googling WordPress slider + srcset. Looks good, but I can’t seem to verify if it’s working as it should?
For example, the path of an image in a slider opened on a wide desktop:
…./wp-content/uploads/2016/08/trees-940×200.jpg
And then reloading the page in Chrome > Dev Tools > Iphone 5 returns the same image path as above.
Hi jak, if you can see the srcset in the markup for the slides, and the image sizes in that set look right, it should be working correctly.
It can be difficult to test, with emulators it doesn’t seem to always load the smaller sized images. I have had better success testing it on actual devices. But even then the results can be different than you might expect. Higher resolution mobiles and tablets are going to use larger images even though the screen size is small, because of the pixel density.
I have the srcset content for the slide images setup using the native WordPress functionality for this, so the images should work the same in and out of the slideshows.
I have a question about using this for my header image? I have the php copied and ready to upload to my child theme but have a question.
How does it know which slider I have created to use for the header?
I have a header image right now but would prefer to use the slider I have displayed on the page below the header image.
Thanks!
Never mind. figured it out! Thanks!
Good to hear you got it working!