[Resolved] Blog post image container (Scribe Theme)

[Christiano]

Hi there!

In my staging process I decided to provide to my site images crafted with the right dimensions.

I inspected a few of my articles and, unexpectedly, I found that the images are scaled in different sizes… 670×335, 641×427, 639×269 and so on.

Which is the default size?

THANKS! 🤗

[David]

Hi there,

there isn’t a defacto default size, and the original images used in the Scribe demo content are not really relevant.
Looking at your site, the maximum width your images is ever displayed at is 768px wide. This is for a full width image viewed on a portrait ipad.

I would suggest you use that width as the max width of all your images, and choose an aspect ratio you like.
For example:

a 4:3 ratio: 768px x 576px

a 3:2 ratio: 768px x 512px

a 16:9 ratio: 768px x 432px

Choose a size you like and resize all your images to match that ( if possible )

[Christiano]

Thanks David, you are very precise as always! 👍🏼

My concern is the speed.

Anyway, to match retina screen users I am thinking about doubling the image size (eg. 768×432 would be 1.536×864). I think that WP will automatically generate all the littler scaled versions. Isn’t it?

If this is true the retina user will see the bigger image (1.536×864) while the standard user will see the resized image (768×432) and not the bigger one.

I hope to have been clear… 😅

[Fernando]

Hi Christiano,

Yes, WordPress automatically creates a source set for images, however for images added through CSS, it doesn’t.

If you still haven’t, it would be advisable to use next gen-images for performance. An example would be webp. Such images are optimized for websites.

[Christiano]

And what about forcing WP to create those images?

I mean, if you go in customize->media you could insert three different image sizes: thumbnail, medium and large. And if I would insert:
350×350 thumbnail (doubling Google’s 175×175)
768×432 medium (does WP could provide this image to non retina user???)
1536×864 large (WP shoud use this image size for retina user)

Does this possibly work like this?

THANKS! 🤗

[David]

To cover.
By default WordPress generates several attachment sizes.

Thumbnail (150w), Medium (300w), Medium_large (768w)*, Large (1024w)

All of them except for the Medium_large can be set in the Settings > Media. The number in the brackets is the default image width it creates.

If you modify any of the Settings > Media Attachment sizes or register new attachment sizes then any new images you upload WP will create those new sizes for you. For existing imges you will need to run the Regenerate Thumbnails plugin for WP to create the new sizes.

What happens when you upload an image

When you upload an image, WP saves that original as the Full size image.
WP will generate ANY additional attachment sizes that are smaller then your full size image.
eg. upload a 768px wide image and WP will only generate the Thumbnail and Medium sizes. WP will never create image attachments that are larger then your full size image.

Retina vs DPR

Ignore Retina devices, as most devices have a HD or higher res screen now, and they measure their resolution using DPR ( device pixel ratio ). Retina devices have a DPR of 2.0 or 3.0. But some devices have 4.0 and above.

How is the image attachment size chosen

When it comes to selecting which image is displayed on which device, you personally DO NOT.
WP uses the <img> HTML for outputting its images. Which has some real basic responsive sizing attributes including:

1. the width and height attributes of the image. This will be either the dimensions of the full size image you uploaded or the attachment size you selected.
2. the src-set attribute which lists the URLs of all the available attachment sizes.
3. the size attribute which provides some very basic guidance on which image to display

When the browser loads the HTML and comes across the <img> element it takes all of the above info and the device DRP to calculate several things including the space it occupies on your webpage and the optimum size image for display.

In real basic terms here are is an example of how the browser calculate the optimum size for an image that fills the width of a device viewport:

Example 1: a new iPhone 14 has a CSS Viewport width of 390px and a DPR of 3.0.
On that screen size the browser would want to load a 390 x 3 = 1170px wide image.

Example 2: iPhone 7+ it has a viewport width of 414 and DPR of 2.6
On that screen it would want to load a 414 x 2.60 = 1080px wide image.

And this goes on for every device size….

Now in our src-set we may not have those image sizes, and in that instance the browser will choose the next closest image size that is either:

a. larger than required.
b. if there is no larger image it will choose the nearest smaller size image.

And it is because of this mechanic that ( unless we intervene with other code ) the browser will generally load the Full Size image on all modern devices.

So what is the best size image to upload

This comes down to how important the quality of those images are.
If you’re a photographer or art director you may want to upload very large images that come with the expense of slower loading times. And that penalty may be acceptable.

But if you’re super focused on Mobile viewers then the average viewport width ranges between 360 and 414px, and DPR ranges between 2 and 3. So a 768px will provide you good quality and best pefromance. If you want to sacrifice some performance then go for 1080px or 1200px max width.

[Christiano]

David, what can I say??? Defining your reply only as “clear” is reductive… 😃

Standing ovation!!! 👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼

[David]

Awesome – glad to be of help 🙂

[Author]

Posts