c13creativeParticipantAugust 10, 2019 at 4:12 amPost 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.marklchavesParticipantAugust 10, 2019 at 7:24 amPost count: 873
Just to be a bit more specific,
srcsetdoesn’t resize any images. The
srcsetattribute for the HTML
imgtag 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.
That means, either the web dev (you) or the CMS (WordPress) being used needs to generate the alternate images that go into
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
srcsetattribute 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.bvallanceParticipantApril 13, 2021 at 1:02 pmPost count: 5
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
srcsetonly provides 400w, 600w, 800w, and 1200w image options (as shown in your code above). The
imgHTML 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
imgHTML 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
How can I add additional sizes into the
- You must be logged in to reply to this topic.