Image resolution / Parallax issues

[andreaseidhagen]

Hi, using Demo 1 as a template for Denali I would like to start the website with a full screen image of my logo (composited on a piece of paper).

The only element to seem to work with a parallax effect is the hero unit, however, when I use the hero unit for this (just like in the demo) the image scales up and regardless of resolution I use, the quality becomes very bad. I realise that the quality is very low in the examples as well but since this is a logo, I need to look full quality.

Any suggestions to fixing this problem?

http://www.the-motor.com/

/Andreas

Topic

[Jason Bobich]

Hi Andreas,

Are you trying to say that you want the image to display at 1200px, and you don’t want it to to actually stretch full-width? You want to see black bars on the sides of the image where it doesn’t fit the browser window? This would be possible through the some basic CSS customization, but not through the user features of the element. Also, note that there’s a “Hero Unit” element you can use instead of the “Hero Unit Slider” element, if you’re just trying to display a single image.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme‘s style.css or in the “Custom CSS” option on your theme options page.

.tb-parallax .parallax-figure img {
  min-width: 0;
  min-height: 0; 
}

---

Otherwise, you’re setting the image to display full-screen but you’re uploading an image that is only 1200px wide. Most desktops are going to be wider than 1200px, and so that image will obviously need to be stretched to fit, and that is going to result in a loss of quality from the original image. Also, because your image is more vertical in orientation, your result is a very tall display of the image, and this is going to give you a bit of a laggy result in the parallax effect.

So, if you are trying to display the image as a full-screen image, as the feature intends, I’d suggest using an image that is closer to 5:3 (shorter, less parallax effect) or 4:3 (taller, more parallax effect), opposed to now you’re at 1:1. And then from there, if quality is an issue, you just keep increasing the width of your image that you’re uploading, and maintaining that same aspect ratio. And you can determine how large of an image you’re willing to upload for the sake of quality.

For example, the image used in the live demo homepage is about 1500×1100, roughly 4:3. This will appear significantly nicer than the image you’re using, which is only 1200px wide, being stretch to fit the browser window. — So, if you’re following this formula, you could try making your image that 1500×1100, and if that’s not high enough quality, try increasing the resolution of the image you’re saving, or increasing to 1600×1200, then to 1700×1275, then to 1800×1350, and so on. But these are not all that realistic in the web world, as you’re getting to a point where you have to sacrifice some quality in order to allow your site to load at a reasonable rate.

[Jason Bobich]

Does this help it all? I’m worried I may have ranted in a few different directions, without fully understanding what you’re wanting to do. So, if I misunderstood something, just let me know! With this framework, there’s so many ways to accomplish various things.

[Author]

Replies