Reduce image size, not resolution

  • bbgproperties · Member ·

    Hi there,

    The images I uploaded shows up huge on the website. For example, if you click into a product details page, the user literally has to scroll down the page to see the entire image. The image is taking up half the page and some images are cut-off. I tried going into the WordPress Media Settings and decreased the image scale size for each image then saved it but it still shows up the same size with a very blurry image. How would I set it so that the site will only show a smaller version of the image but still maintain the same resolution? Thank you so much!!

    The blog I need help with is: (visible only to logged in users)

  • jeffmilone · Theme Author ·

    Hello,

    The images on product pages will always go to 100% of the available width in order to fit the page in a uniform fashion. If you have product images which are longer than they are wide, it can require the user to scroll down depending on the resolution of their device. This happens simply by virtue of your image dimensions.

    One solution would be to make the images less tall. This would involve cropping them. If that is not desirable, you can reduce the percentage of width the images will use on product pages.

    This can be accomplished by adding the following CSS:

    .single-product .woocommerce-product-gallery__image img {
    max-width: 70% !important;
}

    The effect will be that the images will appear less wide and less tall. You can change the 70% number to suit your needs.

    Hope that helps!

  • bbgproperties · Member ·

    Yes, that works perfectly! Thank you so much for your help!!

  • The topic ‘Reduce image size, not resolution’ is closed to new replies.