Question

Posted · Report post

New to Pagelines and signed up for the DMS Developer package. 

 

Loving it so far but wondering if anyone knows the correct size that should be used for images for the Rev Slider?

 

I resize so they fit under the 0.5 mb size restriction but most images look distorted a bit or not as "crisp" as the sample images used in the demo.

 

I have tried playing with all type of sizes and have used high definition images but the images still look a little "off" (if that makes sense).

 

Thanks for any help!

 

James

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

James, when any rescaling of images occurs, there's the risk of pixels stretching in the wrong direction. I'd recommend that you determine the max-width of your site, and set a height for them when creating or editing your images in your photo editor/graphics program.

 

So, if you want the slider to be 300px high, then make your images that height, and as wide if not wider than the layout. It's usually when the images are narrower than the width that the images are stretched.  If they're wider, the browser will simply crop the extra space off, keeping them from pixelating (stretched pixels).

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for the reply!  Will try this when I go back in to work on!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The image size doesn't actually matter, as it uses background-size: cover; this means that if your image is for example 500x300, it will cover the whole RevSlider area. Of course it will look pixelated so the large the image the crisper it will look, but there isn't a need for an insane size image such as 1200000x50000000. Something with a width of 1200px should suffice. Just remember to watch the file size of your images. I recommend using an App called jPegMini.
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ninja, I thought of that too when I first started using the slider and I made images EXACTLY 2000 x 800 (the recommended size for the slider) but it was rejected each time for file size.  I then decided to just shrink the image size down until I hit the 500k limit and that put me around 1000x500 or so but, as you mentioned, it's coded (slider) to fill the area and that led to a distorted image...even when using a really high def image.  

 

Then realized I needed to change the image type AND quality level percentage so instead of saving as .png's, I saved as a jpg AND moved the image quality down from 100% to 70%.  That took the file size of a 2000 x 800 image from over 3 mb in size to around 300k in size BUT you truly cannot tell the difference in image quality.  I then uploaded and it looks perfect. No distortion and it's the exact recommended size for the slider.

 

Problem solved :)  Was definitely frustrating at first but working great now. 

 

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am struggling with this one. I created an image as suggested @ 2000W x 800H. I am able to upload it, but it crops the image so I cannot see the whole thing? So I guess what is the true size I need to make the canvas so the WHOLE image shows??

 

Going to make this a new post, dont know how to delete from this thread

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I noticed mine were cropping a tiny bit from the top so you may want to do 1900 x 700.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I guess no-one read what I wrote above. 

 

Your images will crop on browsers set to less than 2000px wide.  That size is to accommodate large screens with high resolution.  However, most computers have a lower resolution, and smaller screen size. 

 

Anyone expecting a 2000px image to fit into a 1370px wide screen is not thinking clearly.  If that were the case, the image would be crunched and look like a jumbled mess. 

 

Please, read what I wrote. ^^^

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I guess no-one read what I wrote above. 

 

Your images will crop on browsers set to less than 2000px wide.  That size is to accommodate large screens with high resolution.  However, most computers have a lower resolution, and smaller screen size. 

 

Anyone expecting a 2000px image to fit into a 1370px wide screen is not thinking clearly.  If that were the case, the image would be crunched and look like a jumbled mess. 

 

Please, read what I wrote. ^^^

I read what you wrote, but there is no way you can predict or design for every individual's browser/resolution setting. If that was the way this thing is coded its a step back from what CSS accomplished. I am no coder, but from where I sit if I placed an image in the feature box within Platform/Pagelines, that images integrity, regardless of size, was a constant. Make the window smaller and it cuts off but does not morph and crop out the image. Maintaining the images full integrity is crucial in some cases where its not just simply a background repeating color. I have tried all variations of sizes and resolutions at this point and so far as I can see, the only way they (*the user) will see the image properly is if they make their browser just the right size....

 

So, if you are saying this is just the way its designed, what other options do I have, I am open to suggestions at this point to get my page working.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I admit that the REV slider has a lot of potential but suffers from a few ugly settings.

 

Typing the slider text into that tiny box produces one long line of copy that runs right off the page when viewed in a browser...fortunately I found  if you add the <br> (line break) tag you can chop your sentence into readable chunks, albeit with a bit of a gap between each one. Each slide definitely needs  both 'title' and 'copy' boxes to be included to enable content to be easily added. 

 

Re: the resolution - I guess everyone is a bit stuffed over this and you have to aim somewhere in the middle. Pagelines used to lop the odd section off here and there. I think the images have to be just that - background images that scale without it being too important. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now