Avada Forums Community Forum Mobile Site Not Serving Scaled Images

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • c13creative
    Participant
    Post count: 6

    I have been going back and forth with Theme Fusion support and am getting nowhere.

    When viewed on mobile, some pages on my site are not loading the optimal image size. The PageSpeed report is showing a zero for “Serve scaled images”. The support agent stated that srcset resizes the full size images via HTML. My understanding has always been that srcset loads smaller version of the images based on viewport size.

    Can anyone point out what I am missing? Is my site loading correctly?

    Thank you.

    marklchaves
    Participant
    Post count: 873

    Hi,

    Just to be a bit more specific, srcset doesn’t resize any images. The srcset attribute for the HTML img tag gives the browser options for which images to use depending on the device requesting the page. Here’s a definition from MDN.

    srcset defines the set of images we will allow the browser to choose between, and what size each image is.

    Reference: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    That means, either the web dev (you) or the CMS (WordPress) being used needs to generate the alternate images that go into srcset.

    In your GTmetrix PageSpeed report, did you drill-down to see the list of offending images (ones Google wants you to scale properly)? Once you do that, you will know which image to hunt for when you view your page’s source code. When you view the source code for that image, you can verify if the srcset attribute is in there for that image.

    Here’s an example code snippet from one of my pages on my Avada site. Look for something like this in your code.

    
    
    img src="https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-1024x679.jpg"
      srcset="https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-200x133.jpg 200w, 
        https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-400x265.jpg 400w, 
        https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-600x398.jpg 600w, 
        https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-800x531.jpg 800w, 
        https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb-1200x796.jpg 1200w, 
        https://marklchaves.com/wp-content/uploads/2019/03/balinality-offerings-wedding-sukma-wb.jpg 1544w" sizes="(max-width: 768px) 100vw, 1200px"
    
    

    If you see something like this with the array of differently scaled images, then your site is serving (at least offering to) scaled images.

    You can run your Firefox or Chrome dev tools in private mode with cache disabled. Open the network tab. Filter on img only. Select a mobile viewport. Reload your page. Then look at each image that was loaded to see which version was used. Pay attention to any 404s of course.

    Hope that helps.

    bvallance
    Participant
    Post count: 5

    Mark,

    I’m trying to get responsive images to work on a 3840 x 2160 4K UHD monitor. I’ve placed a 100% Width container on a page and placed a 3/5 column inside the container and an image inside the column. The page uses the 100% Width Template. The HTML that is generated by Avada for srcset only provides 400w, 600w, 800w, and 1200w image options (as shown in your code above). The img HTML also defaults to 1200px if the browser can’t make a selection from the 400w, 600w, 800w, and 1200w images (which it can’t on a monitor with a width of 3840 pixels which creates a 3/5 column ~2200px wide). I’m trying to get the correct image size displayed at the native resolution of my monitor, which is 3840 pixels wide. Avada keeps serving the 1200px wide image because that’s how the img HTML has been generated.

    I have been able to add new image sizes to Avada and I’ve been able to have the new sizes appear in the “Size” drop-down in the Attachment Image panel on the Add Media page (when I insert an image into a page). But I haven’t been able to add the new sizes to the img HTML.

    How can I add additional sizes into the srcset HTML?

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.