Haha, I’ll try to clear things out for you 🙂
Responsive:
1. Yes, upload images as usual. They should be as big as they need to be.
2. Exactly. If the screen is less than 600px wide, that image will be used. If the screen is between 600 and 900px wide, the 900 image will be selected.
3. Nope, you should be good to go. But depending on the design of your site, a little configuration could always be good in order to get the best possible result.
Retina:
1. No, just upload a single image as usual.
2. Yes, retina images will be created this way. (add_image_size())
3. Yes.
4. Yes, otherwise, RWP won’t look for retina images.
I hope this can get you started 🙂
Thread Starter
yn2k
(@yn2k)
Thanks for the quick reply!!!
Responsive:
Follow up for #1. My theme has a slider that is 100% width. Documentation suggests 1100px is “sufficient for most”. What do you recommend? Should I upload larger and let WP scale it down?
Follow up for #3: What other configuration changes would you recommend?
Retina:
Follow up for #2: If I use the “add_image_sizes” does WP upscale the image? Would it be better to upload my own full version instead?
New question: When I insert media into my page / gallery / post, which size option should I choose?
Responsive:
#1. Is it the documentation for the slider or theme? If the site has a max-width set, you should be able to see how large the slider could become. The image should have that size. Personally I would create a custom image size for slider images.
#3 That depends on the design of the site, but I would basically customize the sizes attribute on <img>.
For example, imagine these image sizes:
- thumbnail: 480px
- medium: 768px
- large: 1024px
RWP would generate the following markup:
<img srcset="thumbnail.jpg 480w, medium.jpg 768w, large.jpg 1024w" sizes="(min-width: 768px) 1024px, (min-width: 480px) 768px, 480px">
medium.jpg will be selected if the screen width is at least 480px. large.jpg when the screen is bigger than 768px.
The problem with this is that the browser doesn’t know anything about the page layout. The main column of the page might be quite narrow on small screens.
For example, on a 1024 iPad screen, the main column becomes 750px wide. In that case, the browser would select large.jpg because the screen is wider than 768px. But medium.jpg would be the best choice, so I would override the sizes attribute so it looks like this instead:
<img srcset="thumbnail.jpg 480w, medium.jpg 768w, large.jpg 1024w" sizes="(min-width: 1440px) 1024px, (min-width: 480px) 768px, 480px">
(Let’s say that the main column becomes wider than 768px at 1440px)
This is hard to explain in just text, but this is a scenario where I would configure RWP a bit 🙂
I’ll get back to the other questions later, don’t have time now 😉
Okey, here we go again!
Retina
#2. No.
New question: Insert the one you want. You don’t have to think so much about it. If you insert medium, RWP will only include thumbnail and medium in the generated markup.
One side note is that my personal opinion is that retina images is more important when it comes to icons and such graphics. Photos looks quite good even if they isn’t in retina size. So I would not bother with uploading huge photos for retina screens.
