Save for Web PNG-24 = Soft/Blurry Fonts

Thanks again for everyone's input on this.

I'm working with our developer now on using SVG to display these, as I think it's a more elegant solution. The only complication in our case is that we have ~50 different versions of these buttons (different text, same colors) that are delivered to certain categories of our Wordpress site using a plugin. So I'm working with him to make this work instead of using individually-uploaded button images, which are not optimal for reasons pointed out in this thread.

I'll report back once we settle on a solution.

And another option is to save an SVG image instead of a bitmap, as Nancy suggested, but I think that bit of info got overwhelmed by the noise in this thread. Your example image is a prime example of SVG rather than a bitmap.

Just be careful to convert the text to vectors before doing this, otherwise there is a chance the typeface won't display properly.

Since you are working in WordPress, in principle you only need to feed WP one image prepared for the highest resolution @X requirement. @4 will cover all hardware cases. @3 will be more lightweight, though, and more than suffice for most. At the very least a @2 image should be uploaded.

That means your original 360x125 image should be exported at 1080x375 (@3) (or 1440x500 if you intend to include very high ppi devices, see this list: Device Metrics - Material Design​) .

Key thing to know here is that WordPress has had built-in responsive images support since 2015 and generates appropriately sized images for various devices, and will display the image that makes most sense at that size and the device it is displayed on. You can check this yourself by inspecting an image tag in a browser with the inspect element option: on a @1 screen the lower resolution version will be served, while on a screen with a DPR higher than 1 a higher resolution version will be displayed. This only works if you uploaded a sufficiently high resolution image in the first place, of course.

There's a little more to it, though, and your developer should probably create the required image size cases in the theme's functions code.

Refer to:

Responsive Images in WordPress 4.4 – Make WordPress Core ​

Article on this: https://alexwright.net/web-design-secrets/responsive-images-wordpress/​

PS I test in Firefox Developer to check if the right image resolutions are loading up. The device preview includes a DPR setting which is quite handy, and will emulate very high ppi density screens (even if your own screen can't hope to match these values).

PPS to view/check WP's generated versions, open the uploads folder: a minimum of 9 versions will be created, I believe. It becomes important to install a good image optimization plugin, such as the ones listed here: https://www.wpbeginner.com/plugins/best-wordpress-image-compression-plugins-compared/

D Fosse​

Thank you for summing this up, that makes sense. It sounds like at a minimum, I'll need to create the graphics at 2x my original size in order to account for higher-res screens.  That is, if I do not pursue the HTML/CSS route using the others' suggestions.

pierrec86934804​

Sorry I forgot to respond to your other questions. The blue background is simply a solid color with slightly rounded edges. The same for the orange button. Originally, the whole graphic was going to be clickable (an image). But if our developer can create these with HTML/CSS, etc., then only the orange button would be clickable.

I believe we are currently on Wordpress 5.1.x  and we are using Elegant Themes Divi theme.

Thank you again, this has been very educational for me.

Just a small point to clarify what everybody here is saying:

Photoshop always renders text as pixels, at the base document resolution. The final exported file from Photoshop is always a raster image.

This matters very much on a retina screen, where your browser scales images up to 2x, thus effectively halving the on-screen resolution. HTML, on the other hand, is still rendered at native screen resolution, even when scaled to 2x screen size. Hence the difference.

On the web, real text is essential for screen readers, language translators, search engines and humans with less than 20/20 vision.   Images of text are not "readable or searchable."   What you have here can be created very easily with ordinary HTML and CSS code.   Or with SVG code. 

I'm signing off now because it's my dinner time.  If you want me to provide a code example, I can do that tomorrow.

What pixel dimensions is your master file, or do you have two, one for each final size? Photoshop has different text rendering options which are useful when working at final size.

christianv58609219  wrote Hey everyone, This one is driving me nuts. I'm trying to export a simple graphic for my website with a final display size of 360x125px. But when I export at this size, the fonts in my graphic look terrible. Particularly on Retina screens.

360x125 Pixels are not the many pixels to have a lot of fine detail. The just to few pixels. Nether the 360x125 or 720x250 pixel image shoul look awful on a retina display both should display well. However, the 360x125 size one will be very small on a retina display. On the display its size  will be aroundc 1" by 1/3"  Three line of extreamly small text. Retnia display have a  resolition in the 326 PPI range   what size is 125px/326ppi    0.3834355828220859‬" in height  text will be  around  0.1" tall

iPhones

• iPhone, iPhone 3G and iPhone 3GS: non-Retina
• iPhone 4: Retina (960 x 640, 326ppi)
• iPhone 4s: Retina (960 x 640, 326ppi)
• iPhone 5: Retina (1136 x 640, 326ppi)
• iPhone 5c: Retina (1136 x 640, 326ppi)
• iPhone 5s: Retina (1136 x 640, 326ppi)
• iPhone 6: Retina HD (1334 x 750, 326ppi)
• iPhone 6 Plus: Retina HD (1920 x 1080, 401ppi)
• iPhone 6s: Retina HD (1334 x 750, 326ppi)
• iPhone 6s Plus: Retina HD (1920 x 1080, 401ppi)
• iPhone SE: Retina (1,136 x 640 pixels, 326ppi)
• iPhone 7: Retina HD (1334 x 750, 326ppi)
• iPhone 7 Plus: Retina HD (1920 x 1080, 401ppi)
• iPhone 8: Retina HD (1334 x 750, 326ppi)
• iPhone 8 Plus: Retina HD (1920 x 1080, 401ppi)
• iPhone X: Super Retina HD (2436 x 1125, 458ppi)
• iPhone XR: Liquid Retina HD (1792x828, 326ppi)
• iPhone XS: Super Retina HD (2436 x 1125, 458ppi)
• iPhone XS Max: Super Retina HD (2688 x 1242, 458ppi)

iPads

• iPad and iPad 2: non-Retina
• iPad 3: Retina (2048 x 1536, 264ppi)
• iPad 4: Retina (2048 x 1536, 264ppi)
• iPad Air 1: Retina (2048 x 1536, 264ppi)
• iPad Air 2: Retina (2048 x 1536, 264ppi)
• iPad Pro 12.9in (2015): Retina (2732 x 2048, 264ppi)
• iPad Pro 9.7in (2016): Retina (2048 x 1536, 264ppi)
• iPad 9.7in (2017): Retina (2048 x 1536, 264ppi)
• iPad Pro 10.5in (2017): Retina (2224 x 1668, 264ppi)
• iPad Pro 12.9in (2017): Retina (2732 x 2048, 264ppi)
• iPad mini 1: non-Retina
• iPad mini 2: Retina (2048 x 1536, 326ppi)
• iPad mini 3: Retina (2048 x 1536, 326ppi)
• iPad mini 4: Retina (2048 x 1536, 326ppi)

iPod touch

• 1st, 2nd and 3rd generation: non-Retina
• 4th gen: Retina (960 x 640, 326ppi)
• 5th gen: Retina (1136 x 640, 326ppi)
• 6th gen: Retina (1136 x 640, 326ppi)

Hi

The problem is, this technique isn't practical for use on the web.

Why, I do it all the time for websites (if there are some text), just wrap it in a div with a max-width intent in your CSS.

Then, it could be save as a SVG from PS or Illustrator, you would still need some CSS control.

Pierre