Slideshow images always too big and blurry

greenvalleyhydr
Tourist
6 0 4

Every image I try to put on my home page slideshow comes out too big and bad quality. I have resized the images numerous times, changed the DPI to 300, neither works. They always appear too big and of much worse quality than the original. Im not well versed in coding so all of the "insert this code in this place" solutions are hard to follow and seem specific to other people's slides/pictures. It seems this is a very common problem with no common solution. 

Replies 7 (7)

NomtechSolution
Astronaut
1245 113 149

I understand that you're experiencing difficulties with image quality and sizing in the slideshow on your home page. Here are a few general tips to help you improve the image quality and size for your slideshow:

  1. Image dimensions: Ensure that your images have the appropriate dimensions for the slideshow. Check the recommended image dimensions specified by your theme or consult the theme's documentation. Resizing the images to match the required dimensions can help prevent distortion and maintain image quality.

  2. File format: Save your images in a web-friendly format such as JPEG or PNG. These formats are widely supported and can provide good image quality while keeping the file size reasonable. Experiment with different formats to see which one works best for your images.

  3. Image compression: Compress your images without compromising too much on quality. There are online tools and image optimization apps available that can help you reduce the file size of your images while preserving visual clarity. Shopify's built-in image optimization feature can also help optimize your images automatically.

  4. Image editing tools: Consider using image editing software to enhance the quality of your images before uploading them to Shopify. Tools like Adobe Photoshop or free online editors like Pixlr or GIMP allow you to adjust settings such as brightness, contrast, sharpness, and color balance to improve image appearance.

  5. Retina display support: If your theme supports high-resolution or Retina displays, make sure you have high-quality images with double the pixel density. This can help maintain image clarity and sharpness on devices with higher pixel densities.

greenvalleyhydr
Tourist
6 0 4

My image is a high quality 300DPI PNG that has been resized with Photopea, Shopify's image resizer and other tools but nothing works. The image size and quality of my inputs seems to have nothing to do with how it is appearing in the slideshow. My first image actually fit perfectly and I have been trying to recreate that with the other two in my slideshow by sizing my other images to the exact size and quality of the one that fits, unfortunately none of that seems to work. It is strange how my first image looks great but the others made in the exact same applications with the exact same size and quality specifications always appear too large. Even when resizing down to a very small size it does nothing. I am at a loss but from a small amount of searching it seems this is a very common issue.

greenvalleyhydr
Tourist
6 0 4

I found somewhat of a solution. To make all of my images fit correctly (even though they are all the same size and quality) I needed to go to Slideshow, and change the layout to Gid and the slide height to Small. This is the only configuration where all of my pictures show up correctly. 

greenvalleyhydr
Tourist
6 0 4

Nevermind... this doesnt work. It cuts off the top of the entire slideshow doing this. Even when adding a large padding and space between the header and slideshow... I am at a loss still.

racingfan
Visitor
1 0 1

Hi, I know what you're going through the solution is apperantly really simple just save the image as (.SVG). I tried it and it worked. Hope it works for you.

EricApex
Visitor
2 0 1

Thank you!  Ran into this issue today and surprisingly this thread was the first I clicked on.  Saving as SVG worked perfectly.

pg6
New Member
8 0 0

Hello, I'm using the Dawn theme. Where do you find the right pixel length and width to use for any images in any section you want?