Make Larger Images Responsive (Resize for Mobile), or At Least Warn Editors
Currently, web page images wider than 567 pixels are not responsive - i.e., not automatically resized for mobile screens. An admin editing a web page may make an image wider, in order to take advantage of the total width on a desktop screen, unaware that the image may then be too large to be seen on a mobile screen.
Best fix: Make all images responsive, up to the maximum width supported by any browser window.
Minimum fix: Warn editing admins by changing the "Large" size choice to "Largest Responsive" when the image is wider than 567 pixels.
-
Kristen Brown commented
Hello @Walt Bilofsky, Thank you for sharing this excellent guide to make the larger images responsive for all devices. I am facing similar issues to resize my website image for mobile users. So I hope now I can fix the issue following these instructions. I have benefited from this post. Appreciated!
-
Walt Bilofsky commented
Turns out that if the image is left at the original size, and no size setting is changed, the image is responsive regardless of its size.
So I would now recommend that when the user selects Original Size in the size menu, instead of setting the image to that exact pixel size, the pixel size setting should be removed entirely, as if the image had just been inserted. This would fix the responsiveness problem.