Retina images
-
First of all, thanks for another marvellous-looking theme. Maybe it’s just me, but I seem to be using one or another of your themes on all of my various sites… ??
Anyway, a simple question (probably with an obvious answer): I can’t seem to make Hamilton display hi-res images on Retina and mobile screens. As far as I understand, all it should take is a second image file with “@2x” appended to the actual file name (i.e. before the suffix) uploaded to the same directory as the low-res version – but that doesn’t do the trick for me. Since the theme is “Retina-ready”, I suppose I shouldn’t have to use a plugin to work the magic. What am I doing wrong?
-
Hi andrejslavik,
Happy to hear it!
Hamilton being retina ready refers to icons and image files included in the theme itself – not the images being displayed through the theme. Post images on the archive pages are loaded at 1200px maximum width and displayed at 610px width (with the two column layout) on desktop, so they’re pretty close to retina (provided the featured image selected is at least 1200px wide to begin with).
As for images on single posts and pages (both the post content images and the post thumbnail), they’re output using standard WordPress functions, which mean that they have the srcset attribute set. The srcset attribute includes a number of different image sizes, and lets the browser figure out which one is best suited depending on the resolution of the screen, the speed of the connection, whether the screen is retina or not, combined with the resolutions specified in the srcset attribute. You can read more about that here. It’s a bit of a black box, so can be difficult to tell why a retina image is or isn’t served in different circumstances.
Hope it helped! There are also plugins like WP Retina 2x that are more proactive in forcing retina images, but I don’t have enough experience with them to either recommend them or dissuade you from using them.
— Anders
- The topic ‘Retina images’ is closed to new replies.
