[Resolved] Uploaded Images

[Janine]

Thanks, Leo!

[Leo]

No problem!

[Stephen]

Hi Tom,

>>Personally I just go with having the image slightly larger than the content area.

Are you saying, instead of uploading two images, the normal size and the 2x version, and using a script to server the right image at the right time, you just upload one image that is slightly bigger than the column you add it to?

Is it that simple? I’ve been trying to come up with a solution for retina images for over a month now and its been driving me crazy.

I downloaded the wp retina 2x plugin and had some success with it but the developer does not officially support the plugin and wants $80 per hour for support so I’m looking for another solution.

Thanks
Steve

[Tom]

Hi Steve,

If you want to have retina images and non-retina images, then you need two different images (one normal size for the content area, and one twice the size).

Then you can set your HTML up like this:

<img src="normal-image.jpg" srcset="normal-image.jpg 1x, normal-image@2x.jpg 2x" alt="" />

That will serve the x2 image for browsers/monitors that support it.

[Stephen]

Hi Tom,

Thanks, I’ll try that. I’m using Elementor, so I’m not sure how easy or safe it is to go back and edit html in the WordPress text editor.

I’d prefer not to create two versions of each image. So I’m thinking your idea of just creating a slightly larger image is a good workable solution as long as the image is optimised/compressed to the max.

Even if the image is twice the size that doesn’t necessarily mean the file size will be twice the size too.

Are you saying, for an image that is intended to display at 500px wide you would upload a single image of, for example 700px wide and your happy with the result? If that works well I’d be mighty chuffed as that is sure a lot easier to implement than many other solutions I’ve read about.

Thanks
Steve

[Tom]

For our site re-design here, I used SVG images wherever possible. When I needed to use PNG images, I uploaded them at 2x the size, and optimized them as much as possible.

It really depends on how clear you want your images to show up on high resolution screens.

[Stephen]

Thanks Tom. Its jpegs I’m concerned about :-/

I’m surprised WP doesn’t have a solution for retina considering how long retina displays have been around.

Your new site looks cool, nice work!

Steve

[Tom]

Thanks! 🙂

[Janine]

Hi, Tom.

I have questions regarding the following statement you made earlier in this thread:

“For our site re-design here, I used SVG images wherever possible. When I needed to use PNG images, I uploaded them at 2x the size, and optimized them as much as possible.”

What is the benefit of SVG?
When would you not be able to use SVG?
When would you need to use PNG?
And why have you chosen not to use JPG files?

Thanks, Tom!

[David]

Hi there,

SVG (Scalable Vector Graphics) don’t have a fixed resolution, so can be scaled to any size without loss of quality. They are best for illustration (vector images). Transparency is supported. Used generally for logos and icons but in the case of GP dot com all of the graphics and icons are SVG. They also support animation routines. As you can see if you activate the animation toggle in the sites footer 😉

Although an SVG can contain a JPEG/TIFF or other photo image file – you would not convert a photo to an SVG.

PNG’s are best used when a transparency is required, so provide a good fallback for SVG or where you have an image with clipping masks that require transparency. Browsers natively support PNG transparency whereas JPEG isn’t.

[Author]

Posts