responsive image size for pull page image background

Hello!

I'm trying to set full width background images with a parallax effect like on this website here:

http://www.myoficio.com/#oficiointro

I made this page as a test:

http://simplychiq.com/testpage/?preview_id=15519&preview_nonce=ee8abb0bb7&preview=true

The problem is that even though the qode slider (above the fold) is full width, but I can't get the images in the parallax rows the slider to fit the size of the browser they're viewed in.

I have the BRIDGE theme, and contacted their support. However, they recommended that i adjust the image size to have a width of 1920 px. If i set the pics to a width of 1920 it's actually still a little big when viewing on my laptop, but too small when viewing on my iMac monitor (see white margins in pic).

However, If i set the size to be 2560 they span the width of the browser on my iMac monitor but are way too big on my laptop, for example. (see picture).

Is there a way I can optimize the images using smush? I have print quality images (sometimes 8k px wide) so I can make them as big or small as I need. I'm just not sure what the otimal size is so that they will span the width of any browser. Perhaps i need some custom code for the backgrounds to fully be responsive?

Here is a link the the Bridge support ticket.
https://qode.ticksy.com/ticket/689959

Thanks so much!!!
-Valerie

  • Milan

    Hello Valerie,

    I hope you are having a good day and thanks for asking us. :slight_smile:

    Dear member you can use our WP Smush Pro plugin to smush images without losing its quality. There are two way we are supporting in our plugin to smush images on your site,
    #1) Lossy Image Compression
    #2) lossless compression

    You asked that is it possible to make images big or small with WP Smush Pro ? No it is not possible with our plugin but it will surely give image context performance peak on your site.

    Now for image related issue either you can crop your image but it will compromise image quality for larger devices, so I suggest you contact your theme developer again and ask solution for this issue as its purely theme related. :slight_smile:

    Thanks for contacting us.

    Have a wonderful day.

    Cheers,
    Milan

  • Adam Czajczyk

    Hello Valerie,

    I hope you're well today!

    As my colleague Milan mention, you could make use of our WP Smush Pro in order to optimize image sizes (as in "file size") without loosing its quality. That'd be surely quite beneficial in terms of improving site performance and decreasing server resource usage in this case.

    The issue however is a bit more complex. The slider is a base but what would I go with would be as follows:

    1. Determine the biggest resolution you need for full screen. Let's say it's a 2560 px wide. You'd then need two images: 5120 px (for Retina displays that use double-density) and 2560 px. This images should be prepared (cropped/resized) with some sort of image manipulation software in order to be cropped precisely and maintain quality. Use them as "base" images.

    2. Decide on what "breakpoints" you'd like to go. The "breakpoint" would be a horizontal width of the screen of popular device (e.g. iPad, iPhone etc). This discussion on our forum may be of great help with it:

    https://premium.wpmudev.org/forums/topic/which-break-points-do-you-use-most

    3. Having break points selected, I'd then again used image editing software to create additional images

    4. The final step would be to use CSS media queries to replace images depending on screen resolution and also to provide a minimum responsiveness to fully support resolutions that are "in between" break points.

    Having said that all, I must also add that it would be quite a bit of custom job that's may needs CSS (and I wouldn't rule out JavaScript as well yet) code crafted specifically to work with the slider that you're using and that particular WP theme. I'm pretty sure that's why Milan suggested getting in touch with theme developer.

    I think the general idea that I described in this post should do the trick. In case you'd need some more help with custom coding you may want to post a question on our "Jobs & Pros" job board (please note though: no WPMU DEV staff members involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    I hope that helps!

    Have a nice day,
    Adam

  • Valerie

    Hi Adam!

    Thanks so much that does help. I did get in touch with the theme developers again and they instructed me to seek a custom code solution as well.

    I do have one last question however,

    The slider (above the fold) on my home page and on my testpage actually is in fact created by the theme developers to be fully responsive to all screen sizes. It's the background images of the rows below the fold that I'm struggling with.

    The theme developers suggested 1920 because this is a "large amount of users actually use resolutions up to 1920px". However, when i make the images this width it looks odd on all my devices.

    My last question is just if, in your opinion, the breakpoint analysis and css may be much simpler when taking into account that it's simply a background image rather than a slider with animation.

    Perhaps even something I could do myself?

    Thanks so much!
    -Valerie

  • Adam Czajczyk

    Hello Valerie!

    My last question is just if, in your opinion, the breakpoint analysis and css may be much simpler when taking into account that it's simply a background image rather than a slider with animation.
    Perhaps even something I could do myself?

    I referred to the slider but this actually is pretty much the same. The only difference here would be that for a slider that contains e.g. 5 images there'd be 5-times that much of manual resizing/cropping images :slight_smile:

    That said, images could be resized/cropped with CSS but this will not affect their size (as in "file size") in any way so they'll be still using much resources (meaning that on some less powerful, especially mobile, devices site can become quite slow). The same goes for JavaScript solution.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.