images on apple retina display

This thread is resolved. Here is a description of the problem and solution.

Problem:

High-DPI (retina) Apple displays made gallery images look soft: a 250 px image placed in a 250 px container was effectively upscaled (should be 500 px for 2× density).

Solution:

Use WordPress’s responsive images with srcset/sizes: upload originals at ≥2× the largest CSS display size; output images via standard (not CSS backgrounds) so WP generates srcset. In Toolset, use dynamic Image blocks or image shortcodes that output HTML (e.g., [types field="artwork-image" size="large" output="html"][/types] or [wpv-post-featured-image size="large"]), letting retina browsers pick higher-resolution candidates automatically.

Relevant Documentation:

https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by Christopher Amirian 2 months, 2 weeks ago.

Assisted by: Christopher Amirian.

Author

Posts

October 29, 2025 at 9:04 pm #2831458

Steve

Hi this client is a high end art gallery and they are very concerned about how their images display. They use apples double pixel density displays in thier office and i thing because of that the images appear soft to them So for example if i put a 250px image in a 250px container. those displays want a 500 px image in essence and so the browser up rezes them and so they appear soft.

Is there any practical solution to this issue- like someway to use a different image size if its being viewed on a retina display.

Hope ive framed this correctly

October 30, 2025 at 11:02 am #2831562

Christopher Amirian

Supporter

Languages: English (English )

Hi,

Welcome to Toolset support. Toolset does not have any additional consideration when it comes to Retina screens, as it uses the WordPress standards.

But as WordPress uses scrset, it handles such scenarios automatically. I can suggest a few points which is not related to Toolset directly per se, but are general points:

Upload big enough originals

- Make sure your source image is ≥ 2× the largest CSS size it will appear at.
- Example: if you display at 250 px wide, upload at least 500 px wide.

Let WordPress generate responsive candidates

- WordPress adds srcset/sizes automatically for <img> tags created by the editor/theme/Toolset.
- Retina browsers then pick the higher-resolution candidate without you doing device detection.

Use <img> (not background images) in your templates

- Blocks editor: use the Image block with Dynamic Source (pick your Toolset image field or Featured Image). This outputs srcset.
- Legacy Views/CTs: use the image shortcodes in HTML mode, not URL-only:

[types field="artwork-image" size="large" output="html"][/types]

[wpv-post-featured-image size="large"]

Please check the documentation below to know more about srcset and how to implement that for Retina screens:

hidden link

Thanks.