Responsive images – do we still need a plugin?

  • Resolved Bad_Egg

    (@bad_egg)


    5 years, 7 months ago

    I’m trying to optimize my site for faster loading, and GT Metrix notes that some of my images are being scaled down in CSS and recommends I deliver smaller images. For example, my site header was scaled from 2500 pixels wide down to 1160. The larger original image was in order to accommodate Retina screens, so I am hesitant to reduce the pixel dimensions.

    I am using WP 4.9.8 with Clean Box theme. I have the Adaptive Images plugin installed but it only works with mobile devices, not laptops or desktops.

    I have read that with WP 4.4, WP started creating multiples of each image uploaded to one’s media library in order to deliver on responsive design. However, does that only apply to new images uploaded since 4.4? If so, do I need to delete and reload all my images? How does this feature work with third-party themes?

    If I remove Adaptive Images and replace pre-4.4 images with new ones, do I need a plugin going forward? Or can I rely on WP 4.4 to deliver responsive image sizes?

    • This topic was modified 5 years, 7 months ago by Bad_Egg.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Radu Constantin

    (@raduconstantin)

    5 years, 7 months ago

    Hi @bad_egg,

    This part with responsive images (https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/) depends on how the theme you’re using takes advantage of it (or not). This is something that the theme author can tell you for sure.

    Since you’re looking to improve the loading time of your website, I think that a tool for image optimization. Have you tried to use a plugin like https://wordpress.org/plugins/wp-smushit/ or https://wordpress.org/plugins/ewww-image-optimizer/? I’m sure that some improvements will be seen after this change.

    Thread Starter Bad_Egg

    (@bad_egg)

    5 years, 7 months ago

    Thanks, Radu. Image optimization is my next task. First is to determine if I need to keep my Adaptive Images plugin or not.

    I read through the comments on the blog post you linked to; it seems to indicate this update is applied retroactively to older images, is independent of the theme used (it’s now a core process of WP, though I would suspect it still relies on the theme itself being responsive), but that disabling previously used responsive image plugins can create havoc. But there is nothing in the post that provides answers to these questions.

    Radu Constantin

    (@raduconstantin)

    5 years, 7 months ago

    Hi,

    Could you share a link to a page where you have some images so I can check the way that they are added, please? The responsive images option was added to WP to improve the loading time but, somehow, the GT metrix seems to suggest that there are still improvements that need to be done. Maybe I can have a look at a page from your website and see what’s going on.

    Thread Starter Bad_Egg

    (@bad_egg)

    5 years, 7 months ago

    Hi Radu,

    Sorry, I’ve been away from my computer for a few days…

    Thank you for the offer. My home page is http://www.mademers.com. It’s indicative of a larger problem, that of image/site optimization.

    I’m also dealing separately with finding a new server and then assigning a new SSL certificate. But first I was trying to figure out what, if anything, I could clean out from my servers before I move the site and proceed with further optimization. If you have time to check, great; if not, it can wait until I move the site, which will likely happen in the next few days or so.

    Regards,
    Michelle

    Radu Constantin

    (@raduconstantin)

    5 years, 7 months ago

    Hey Michelle,

    I just checked the images of the website but none of them are loaded as responsive images. I checked the results of GT Matrix and the message from Serve scaled images is not related to Responsive Images from WordPress 4.4 at all.

    Let’s take this image as an example: https://mademers.com/wp-content/uploads/Floyd3.jpg. As you can see, the size of this image is 388x500px (this is the size you uploaded). Now, GT Metrix says that the website displays it with the 155x200px size and you should upload again the image in this smaller size. I personally don’t agree with this because if the image is too small and a big resolution screen is used to check your website, everything will look bad.

    Thread Starter Bad_Egg

    (@bad_egg)

    5 years, 7 months ago

    Hi Radu,

    Thank you. This is exactly what I am struggling with. GT Metrix says to upload a smaller image, but if a viewer is using a Retina screen, the smaller image will look terrible. But then how to optimize the images?

    And I still don’t entirely understand the whole WP 4.4+ responsive images. For example, the uploaded site header gif is 2500 x 462 pixels (2500 wide for Retina screens}. When I check the image in FireFox opened on my laptop, the image has been scaled down to 1160px × 214px. This I assume was done by the theme’s CSS?

    When I check the files on the server, there is the original gif and 8 copies in the wp-content/uploads folder:

    SiteHeadergif-1024×189
    SiteHeadergif-1200×462
    SiteHeadergif-150×150
    SiteHeadergif-1680×462
    SiteHeadergif-300×55
    SiteHeadergif-400×300
    SiteHeadergif-778×438
    SiteHeadergif-800×462

    The developers of the Clean Box theme tell me multiples are made of images as they are needed in different parts of the website: a thumbnail in one place while the full size in another, for example. I totally get that. And that explains why most of the above images do not maintain the image ratio. But this has nothing to do with responsive images or, I think, with the scaling down of the header in FF.

    My responsive images plugin stores copies in a different folder, wp-content/cache. Here, up to four copies are made, a 1024-pixel, 640-pixel, 600-pixel, and 480-pixel version, each maintaining the image ratio, and no image upsized (so a 500-pixel image will be downsized to 480 but not upsized to 600, for example).

    I do not know which, if any, of the above images are created by WP’s core responsive design. The makers of the plugin say WP is making the first 8, but only at the instructions of the theme, but that this is nothing to do with responsive design. In other words, WP’s responsive imaging is only active if the theme calls upon it, for lack of a better phrase. Is this correct? So if my theme doesn’t utilize WP’s responsive images, then one needs a plugin, yes?

    Michelle

    Radu Constantin

    (@raduconstantin)

    5 years, 6 months ago

    Hi Michelle,

    I don’t think that the theme is using the WordPress responsive images. From what I see (and from the message you got from theme authors), they just generated some thumbnails that the theme uses in certain areas of the website.

    Regarding website improvements, have you tried to use a different tool like https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.mademers.com%2F&tab=desktop? I think you should give it a try. Here, the recommended image optimizations are a bit clearer and can be done using some plugins (like the ones I recommended in my first reply). Also, CSS minifying can be done using some plugins too so this is a good start for website improvement 🙂

    Thread Starter Bad_Egg

    (@bad_egg)

    5 years, 6 months ago

    Hi Radu,

    Thank you again. I really appreciate your time and expertise.

    Michelle

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive images – do we still need a plugin?’ is closed to new replies.