-
Posts
-
I’d like to use a custom background image that will look great on every device. This image should be small enough in file size to not hinder load times while large enough to fit on the highest resolution screen available. Hopefully you guys have already figured this out and can give a simple answer similar to this:
1. Optimum Dimensions – 2880×1800
2. Optimum File Size – No more than 100KBSo far, here’s all the info I’ve gathered:
QUESTION: Why doesn’t the background I created look good on my desktop? It looks fine on my laptop?
ANSWER: The background that you created in the IndexPureRide.psd is 1494×1192. I edited that background image to 1920×1192 which works on most displays but if you check the site on an iPhone 5, the height isn’t enough to fit the screen. Along with that, the image has been optimized and is still 607KB. For optimum site loading, we need this number to stay around 100KB. After all, Slower load time = unhappy users = fewer sales…
If we’re ok with having slower load times and still want our site to have a large fixed background, we need to recreate this in order for it to fit nicely on all screen sizes and resolutions. Below is a list of the many resolutions being used today for your reference.
COMPUTER RESOLUTIONS:
13″ MBP 1280×800
13″ MBP (Retna) 2560×1600
15″ MBP (Retna) 2880×1800
21″ iMac 1920×1080
27″ iMac 2560×1440TABLET RESOLUTIONS:
iPad Mini 768×1024
iPad 2 768×1024
iPad Mini (Retna) 1536×2048
iPad Air 1536×2048
Google Nexus 5 1080×1920
Google Nexus 7 1200×1920
Google Nexus 10 1600×2560PHONE RESOLUTIONS:
iPhone 4S 640×960
iPhone 5-5S 640×1136
Galaxy S3 720×1280
Galaxy S4 1080×1920
Galaxy Note 3 1080×1920*1920×1080 is 1.78 to 1 ratio (16×9), as is the currently most common resolution of 1366 x 768.
ALONG WITH THAT, I HAVE THE SECOND EMAIL THAT MAY HELP US FIND THE RIGHT ANSWER:
QUESTION: So, I’m not sure how it works when moving from a full site to mobile but I think the optimized bg works well on a computer. However, it does look strange on mobile devices and I’m not sure how to fix this. Is it possible to create one bg that works for every device while not hurting us regarding load times?
ANSWER: If you check the site on a computer it looks good bc the image is 1920×1192. This is larger than 1920×1080 so our current bg covers most computer and TV resolutions. Here’s where it gets a little complicated.
Lets say you check the site on an iPad mini without a Retna display (768×1024). Everything looks fine bc our image of 1920×1192 will cover the screen both horizontally and vertically with no problem. The issue comes when the resolution gets larger than 1920×1192 in either direction and that’s what we need to address. Based on the resolution chart I created in the previous email, if we create an image that’s 2560 (to cover the width of the 27″ iMac and Google Nexus 10) x 1920 (to cover the height of the Galaxy Note 3), our bg will look good no matter what device you’re using.
*I believe Apple Retna displays such as the 15″ MBP (2880×1800) work a little different but I’m not sure. They use a technology to cram more pixels into the same space making the pixels invisible to the eye. If you open a website with a 1920×1080 bg, it’s not going to open as a small image in the center of the screen. Instead, the image will be displayed as a full image covering the whole screen, it just won’t be as sharp. If this is correct, 2560×1920 will work. If this is incorrect, I believe we need to make it the same as a 15″ MBP (Retna) which is 2880×1800. God I hate this… :)
Also, most websites with full screen bg’s use an image that fades into black or white on all four edges/corners so that once the resolution gets larger than 1920×1080, it doesn’t matter what resolution you’re using, the image stays centered and doesn’t take up hundreds of KB’s slowing down the loading time of the site. In summary, If you could create an image that’s 2560×1920 image where all four edges/corners are black with your splash in the center, this should be optimum. If this is incorrect, I’m going to look for a tall bridge and …
Cheers!
Hi glen!
Our theme uses the background-size:cover css3 attribute ( http://www.css3.info/preview/background-size/ ) to stretch the image to fullwidth. In theory you can use any image size (i.e. 100x100px or 1000x1000px or 10000x10000px) and the browser will always stretch the image to 100% of the container width. The resolution will just determine how the images will look like on retina displays or displays with high resolutions in general. If you use a low resolution with i.e. 1280x720px the retina displays will show the bg image blurry but a standard screen will display it perfectly fine. That said there’s no general answer for your question because it depends on the image and it depends on the “message” you want to send with the image. If it’s just a bg image which should underline your text you don’t need to use a high res image and even if it displays a bit blurry no user will notice it. However if the bg image is your message (i.e. with hardcoded text, etc.) then use a high resolution image with 2560px width.
Cheers!
PeterGreat answer. I’ve always wondered this and was providing the answers in the copy above to a graphic designer I’m working with. There’s not much info out there, and I felt like I was close, but you can see how this topic can be very confusing. Two things:
1. As far as file size, is there any “sweet spot” or “stay below” rule of thumb that we should follow regarding performance? The image we’re currently using is 607KB. Is that ok or is it too large?
2. The background-size:cover css3 attribute does stretch the image to full width but it doesn’t stretch to full height. If you check our site on an iPhone 5 or newer (I’d imagine its the same on any mobile device where the vertical dimensions are larger than 1192), you’ll see that the image stops at 1192px and the rest of the screen is filled with black. Is this a situation where we need to check the chart I created and make sure the vertical dimensions of our bg are large enough pixel-wise to to fill the screen since the css doesn’t do this?
Thanks,
Hi!
1.) This is a sample of a custom background use on the demo. The file size is 181kb. http://kriesi.at/themes/enfold/files/2013/04/floor.jpg
2.) Where is this happening? Can you please give us a link to the actual page with the fullwidth image?
Regards,
IsmaelI did…? Look at the black and blue water splashed bg:
Hey!
I’m not getting that and really neither should you since the css rule explicitly is set to cover the background fully. See:
http://www.w3.org/TR/css3-background/#the-background-size‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.However, you have it set to no repeat in the styling options. So the image will not be stretched to fit and instead is just a static background image.
Regards,
DevinIf you check the site http://purerideusa.com/contact/ on your iPhone, you have to go to one of the shorter pages such as “Authorized Dealers” or “Contact” to see what I’m talking about. In both of these pages, the content is short enough to where the footer/socket ends and you can see the bg image below it. On both of these pages, the image isn’t long enough to cover the screen at 1192px. Even with the background-size:cover css3 attribute applied by default, this attribute doesn’t stretch the image to full height so we all need to be aware of this when considering the correct size/dimensions of a custom bg image in a boxed layout.
Devin, you’re correct that I have it set to no repeat and I changed it just to see what it looks like. Being that my image isn’t one to match up with any sort of repeat, I could clearly see where one image stops and the other starts. Setting it to repeat does cover the black at the bottom of the screen, but it doesn’t look good so I don’t want to go that route. I’ll leave it set to “no repeat” for now so that you guys can see what I mean with the black space at the bottom.
I’m under the impression that if my image was 1920×1300 or 1400 instead of 1920×1192, my image would cover the bottom portion and I’d be good to go. However, I just went back and realized that the iPhone 5S’s resolution is only 640×1136?? My 1920×1192 bg should cover the screen regardless bc my image is larger both horizontally and vertically?! Now I’m really stumped.
The background-size:cover css3 attribute is applied and my image is larger vertically than 1136px and I’m still having a bg issue? I really don’t think this is an issue with the theme, I think there’s a general rule of thumb everyone should be using when designing a full screen custom bg image that works on every device.
If we can figure this out, you guys could maybe write a blog post about it using all the info in this thread and be the site to provide this answer for the world once and for all. I’m just sayin’ :)
Thank you all for your help!
Cheers!
I’ll tag the topic for Kriesi to take a look at and post it on our internal blog. It could just be apple doing something goofy with iOS and the css3 value since w3 seems to think it should be covering the background no matter what.
If you have any other questions or issues just let us know :)
Going to close this topic of for now since we’ll be getting a big spike of support topics coming in with 3.8 in a few days.
- The topic ‘"Custom Background Image" Optimum Dimensions / File Size’ is closed to new replies.