Image Sizing Conflict with WordPress Jetpack?
-
Hello – it seems that WordPress Jetpack causes conflict with Retina 2X, thereby causing images to be displayed too small on retina devices. At least that’s what I’m experiencing.
Specifically, it seems Jetpack introduces its own handling of retina icons etc within its own UI for the features it includes. This causes the image “width” and “height” attributes specified on any image inserted into a post to be recalculated by Retina 2x to a smaller size than specifically indicated in the post itself.
To see what might be going on, try this:
1. Install the WordPress Jetpack (or more easily, install Slim Jetpack) plugin, and activate it. No need to activate any of the modules within Jetpack – just activating the Jetpack plugin causes the issues.
2. Make sure Retina 2x is activated as well. I’ve experienced this with HTML Re-Write mode (although it seems to occur on retina.js and server side as well).
3. Create a post with an inserted image of a specific size, for example width=720 height=360. Of course, ensure the original uploaded image is at least 1440×720, so Retina 2x can generate appropriate @2x images.
4. Access this on an iphone retina, check out the html code delivered to the iphone itself (e.g. using browser developer tools and/or simulation). You will see that the appropriate @2x image file for size 720×360 was delivered.
5. Now, normally (Retina 2x without Jetpack) you would also see the html img attributes height=”720″ and width=”360″ being delivered to the iphone, the same dimensions you defined in the post. However with Jetpack activated, these get recalculated to something about half the size smaller like width=”268″ and height=”178″ (depending on padding etc) AND A NEW ATTRIBUTE scale=”2″ is included in the html img. Note: this “scale” might be set to scale=”0″ when viewing on an ipad.
6. This “scaling” attribute does not occur when Jetpack is deactivated. Is this scaling methodology by Jetpack the culprit?
7. Basically, with Jetpack activated, the height and width of the image get dynamically recalculated and “hard wired” to the physical size for the device, not the size specified in the post definition.
8. This “hard wiring” of the width and height is a problem because if you then rotate the iphone (or ipad retina), then the image will display in the wrong size (the hard-wired size) for the new orientation (i.e. displays smaller than it should for the wider landscape orientation).
So basically, the proper @2x image is being delivered, but the hard-wired (and recalculated to smaller sizes) height and width cause issues on retina mobile devices and ipad/tablets that are rotated to see a landscape view. Seem that Jetpack’s “scaling” behavior is causing recalculation and hard-wiring of the image height & width in the html.
Of course, when Jetpack is deactivated, then Retina 2x continues to behave properly as always.
Considering that Jetpack offers a lot of interesting functionality (e.g. tiled galleries, carousel, social sharing buttons, etc) I would suspect many people will try to install Jetpack (or Slim Jetpack) alongside Retina 2x, and thus may end up having a similar conflict.
Might anyone have ideas on this? Might there be a CSS tweak that could prevent this conflict from occurring?
Hope this makes some sense, thanks in advance.
- The topic ‘Image Sizing Conflict with WordPress Jetpack?’ is closed to new replies.
