Choosing correct image sizes/dimensions

These are my thoughts entirley and there are varying schools of thought:

1) What image ratios and dimensions should I be using for a design on a desktop then for mobile. Do I need to use different images or does wp change them itself?
— This will happen itself but for aesthetics and good practice best to optimise images and use a conistent ratio throughout the site. Your theme documentation will guide you to best size / ratio.

2) Would I need to use an image that is say 1920×1080 so it looks good for desktops as I’ve seen some settings have ratios of only upto around 900 ish which is very confusing as to why
— In addition to above response to Q1. There is no one size fits all as the theme layout can differ so it is not uncommon to use a particular size but render them using % for width rather than pixels, that keeps things responsive

3) Do I need to upload images at a certain ratio such as 16:9
— See response in Q1

This may help:
https://codex.www.ads-software.com/Using_Images
https://codex.www.ads-software.com/Image_Size_and_Quality
https://www.w3schools.com/css/css3_images.asp

Hi slimmyweight

WordPress 4.4 will add native responsive image support by including srcset and sizes attributes to the image markup it generates.
Please read https://make.www.ads-software.com/core/2015/11/10/responsive-images-in-wordpress-4-4/

Ques 1.
It depends on your theme/plugins. Usually, your theme should be registered with different image sizes. When you’re uploading images to your media library, WordPress automatically creates copies of resized images. And if your theme is well designed it will use a suitable image for each device.

Otherwise, you can try to adjust it yourself. There are no strict recommendations on image sizes, the main thing that they shouldn’t be very large so they won’t be scaled in your content, as this will cause issues with site performance. Example, if the image on your site is displaying with dimensions 200x200px, then its real size should be no bigger than 200x200px

I think it would be useful to read the following article:
https://premium.wpmudev.org/blog/compress-resize-images-wordpress/

Ques 2.
In such cases, you probably have to use an original full-size image

Ques3.
That depends only on your needs. If you need images in this proportion, then yes. If you don’t care about proportions you can upload any images

Thanks
Yashita

Thanks for the responses

I was going to respond to you both individually but then realised my question and response is pretty much the same for both of you:

This is where I’m getting confused, when you say the theme has a layout and can differ is this for thumbnail images only or does this also include images that are just going to be used on a webpage for say a background as I’ve seen lots of articles and videos around thumbnails and it still isn’t clear to me if thumbnails are used only for posts and certain plugins or are they also used in responsive web pages to display smaller background images on a mobile for example.

Hi slimmyweight

Thanks for pointing out any ambiguity.

Although your question is quite straightforward this is a long winded answer, that’s to avoid any misunderstanding.

Layout and Thumbnails:
Different themes have different layouts; for example a full-width layout would go right across a screen whilst a boxed layout may go part way down the middle and have padding / space either side. This means choosing your image and size (length / width) is likely to be influenced by the structure of your theme’s chosen layout. as too personal design preferences.

I’ll use the WordPress Twenty Seventeen theme as an example:

https://www.ads-software.com/themes/twentyseventeen/

the top part has a large image spanning the entire screen across

on scrolling down the layout changes and the use of image is then appropriate for that area. The image used is (as far as I am aware) a featured image (also referred to as a thumbnail).

https://developer.www.ads-software.com/themes/functionality/featured-images-post-thumbnails/

As the site is responsive, the image will resize according to media usage.

The important thing to be aware of is that when we use the term thumbnail, we refer to a Featured Image

as pointed out by yashitamittal11 the images are automatically created at different sizes

to see this, if you have FTP, you could go to your site’s folder and you’ll see lots of images, all the same image at different sizes (these are the ones automatically created), you will have added one and the others were automatically created (of course, only if you have uploaded some)

you can also go to your Dashboard >> Settings >> Media to get an idea of what WordPress is doing with your image uploads

Not so long winded answer:
Thumbnails are used in posts / pages as Featured images (they tend to be automatically resized by your WordPress theme so can be reused as and when required, for example a search result may use an even smaller version, a mobile screen may use a different size)
https://codex.www.ads-software.com/Post_Thumbnails

Most themes are responsive so resize with media queries which is in the CSS

Hopefully, this has helped, if you need an area to be expanded, let me know and I’ll try.

judgerookie thanks for the information what Im mainly trying to find the answer to as I am mostly aware of what you’ve said and keep getting similar responses it must be how Im asking the question.

What I’m wanting to know is with using a page builder such as thrive architect and I place images on a normal page or even full width as a background image etc. And then the page is viewed on a different device such as a mobile. Are smaller versions such as a smaller thumbnail used then or is it only in featured images that are used in blog posts etc if that makes sense?

Thanks

Okay, I think I’ve understood.

This is my understanding of what you’re trying to find out.

The default for WordPress is to automatically create different sizes (behind the scenes) for use as and when required, regardless of them being needed or not. That’s why you don’t see the additional images created in your media library but you will see the ones you uploaded.

It should then use the most appropriate size according to the media (desktop, tablet, phone).
The responsiveness is usually determined by the media queries in the CSS telling it to change layout according to view-port / screen size and so influence which is the best image size to use.

I think the below can explain with much better clarity:
https://www.mywpexpert.com/wordpress-responsive-images/

there’s also a part in here which may help understanding:
https://www.wpbeginner.com/wp-tutorials/how-to-prevent-wordpress-from-generating-image-sizes/