[Resolved] Image sizes in Generatepress

[Matthias]

hi there,

i am quite new with wordpress – currently wanting to create a page with generatepress (mimicing an older installation).
Regarding adding images i found out that wordpress creates 3 images in different sizes if you upload one – but the ideal size to upload depends on the theme.

So my question is what procedure you would recommend if you create a new page with generatepress that should work on desktop and mobile devices with minimum data needed for each. Is the normal way to have different image (sizes) for each device? Or how is this done best?

Whats the ideal image size for generatepress – and how best to add an image to be useable for different devices=

[David]

Hi there,

do you have an example site / design in mind as it would be easier to frame the answer around you design intentions ?

[Matthias]

not really 😉 – it is meant in general: in which size do i best upload images for hero, blog posts – everything. As far as i know from these then several smaller images are created (according to what image sizes you pick in settings->media
As the articles i read about talked about the ideal upload size beeing theme dependent i was wondering what is best.

My “blank” images go from small 50×50 icons to images i will use in header/slide or similar that are around 3000×5000.

As i haven’t worked much with wordpress i thought that pictures were automatically transformed in some way for different devices and you simply upload an image with good quality – but… no. So this is a beginners question 😉
And as most sources i found talk about theme dependency: here i ask

[David]

It really depends on the design but heres some basics.
WP creates 3 additional images ( Thumbs, Medium, Large ) which can be changed in Dashboard > Settings > Media. These three images plus the original are saved as the src-set.
The browser after calculating the required size will request the most ‘suitable’ sized image from the src-set.

Example site:
Container width set to 1200px, Blog columns set to 3 x Columns on Desktop, No full width sections or heros.

Original Image: 1200px
This size covers the Featured Image displayed above a page with no sidebars on desktop.

Large Image: 800px
This size covers the Featured Image displayed above a page on tablet. Or a desktop page with a 25% wide sidebar.

Medium Image: 400px
This will cover the Blog columns – 1200px / 3 = 400px. It also fits nicely as the Single column image required in Plus Size Mobile phones.

If my site requires Full Width images then my original image may be much larger.

But as you can see it really requires designing first to calculate the image size requirements.

[Author]

Posts