Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 14, 2014 at 4:14 am #237364
    addwebtoday

    Hello,

    Thanks again for making an awesome theme!

    I’ve noticed that when I load in background images at 1920 px by 1080 px width (typical monitor size and dimension) the image is disproportionately zoomed in. I’ve purchased some high definition images to use on the sweet background parallax effect and they look bad due to the zoom effect.

    An example of the effect is the image space directly below the slider on this page: http://sc.preview.addwebtoday.com/

    The image itself is a great looking image and I really want the theme and the image to play nice on all devices. This theme deserves high def images and I can get more. Just need to understand how to get my images to look the best!

    March 15, 2014 at 4:33 pm #238072
    Dude

    Hey addwebtoday!

    When I checked the source code of your website I noticed you sometimes use the thumbnail version of an image as background image. I.e. a section uses this image: http://sc.preview.addwebtoday.com/wp-content/uploads/2013/04/Ft-Meyers-Beach-Plastic-Surgery-300×195.png as background. However the 300×195 prefix in the image url tells me it’s a thumbnail version of this image: http://sc.preview.addwebtoday.com/wp-content/uploads/2013/04/Ft-Meyers-Beach-Plastic-Surgery.png (with a resolution of 1000x650px instead of 300x195px). Make sure all background image urls point to the original, high resolution image and not to a thumbnail version of the image. In addition I recommend to use images with high resolutions – i.e. an image with a resolution of 1000×650 will appear blurry if you want to view it with a full hd screen. I recommend to upload the images with a resolution of 1920px or more.

    Best regards,
    Peter

    March 15, 2014 at 6:06 pm #238108
    addwebtoday

    Hey Dude,

    Thank you for your response. When adding a background image to the “Color” field, it asked to select a specific dimension. Which preset do you recommend for background images?

    Thanks again!
    -AddWebToday

    March 16, 2014 at 7:56 am #238240
    Ismael

    Hi!

    Use the largest image or the full size image. Recommended image size is at least 1500px in width.

    Regards,
    Ismael

    March 23, 2014 at 6:59 pm #241842
    addwebtoday

    Ismael,

    Thank you for your response.

    I have loaded images that exceed 2k pixels, and still have pixelation issues even at the setting you recommended. For some reason, the theme seems to be auto zooming or compressing the background image regardless of the setting.

    Example: http://sc.preview.addwebtoday.com/breast-augmentation-surgery/breast-implants/

    Please let me know what I am missing.

    Thanks again!
    -AddWebToday

    March 25, 2014 at 9:49 am #242596
    Dude

    Hi!

    I noticed two blurry images on your website. One section uses this image: http://sc.preview.addwebtoday.com/wp-content/uploads/2014/03/Schneider-Centre-Office-Ft-Myers.jpg as background. The image size is 598px x 438px and thus the background appears blurry on screens with a higher resolution. The second blurry background (section at the very top) still links to a thumbnail ( http://sc.preview.addwebtoday.com/wp-content/uploads/2013/04/Ft-Meyers-Beach-Plastic-Surgery-300×195.png ). Please make sure that the original image ( http://sc.preview.addwebtoday.com/wp-content/uploads/2013/04/Ft-Meyers-Beach-Plastic-Surgery.png ) is used. Note that this image has a resolution of 1000 x 650px and screens with a high resolution will also display a blurry baxkground. If you want perfect backgrounds you also must use high resolution images with a resolution of 1920px or more.

    Best regards,
    Peter

    August 3, 2014 at 1:02 am #299237
    addwebtoday

    I found the source of the image size error sorry for the confusion. When loading an image as a background image, the automatically selected size is not the size of the image. Working on optimizing that now.

    In regards to loading images to fit the right size, on mobile, is there a way to load a different background that is better for the screen? The big image backgrounds kill mobile page load speed.

    August 4, 2014 at 4:13 am #299489
    Ismael

    Hi!

    Thanks for the update.

    Yes, that is possible. For example, change the background image of the portfolio section with this:

    @media only screen and (max-width: 767px) {
div#portfolio {
background-image: url('IMG URI HERE');
}
}

    Cheers!
    Ismael

    August 9, 2014 at 6:16 pm #302036
    addwebtoday

    Thank you for this this should work!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Background image pixelation & quality issues’ is closed to new replies.