So, the portfolio images are coming out blurry — no matter if I make them ‘full’ or ‘medium’. Can you tell why this is happening and fix it? I keep readjusting the image size in the media library, but it actually makes no difference. It seems to resize it regardless and stretch it so it looks low res. Please advise.
Here is an example.
The images you are using on your portfolio items are small, thus, even if you select ‘full’ it will still be blurry since it will be stretched to fit the container.
For example, here are the full images you are using on Jeff’s Portfolio:
The 2 best options you have are:
1. reduce the width of the column for the images
2. reupload large versions of the images
Actually, I think you are incorrect. Originally, I had the large image files (all aprrox 2000×3000) and they were *still* blurry. Is there a best file size that I can aim for? Looks like I’m going to have to re-import them all, if you think the larger files are the way to go.
On the page referenced above, I added another image gallery with full size photos. I can see that they are not blurry, but even as a ‘medium’ image, they are still very large. Is there any way to create the CSS for a smaller image, or alter the CSS that controls the size of the medium, large and full images?
As mentioned, the image dimension is dependent on the “container” width, so whatever image size you will specify, it will try to fill the column width. If you want the image to be smaller, then all you need to do is reduce the column width for the image and increase the column where you have the student’s information.
This is because you can also use smaller image ‘containers’ or columns, that is why there is an option for the image dimensions. Some customers prefer it the gallery to appear on a smaller column, then they can use medium and so on. For your case, since you are using a wide image column, then you’d have to use a larger resolution of the image.
Image dimensions can be controlled via CSS, but sometimes it is not the best option.
To avoid any further confusion on this, can you please send us a mockup on how you want each item to look so we can check if the better option is via CSS or by adjusting the column width?>
To be honest – what we want is pretty simple. We want a non-blurry image which fits on most computer screens without having to scroll. I figure that creating CSS that gives values like 100% for full, 70% for medium, 40% for small would suffice. Do you really need a mock up just to see the image non-blurry and that fits in the screen without scrolling?
We can use CSS to control the image’s dimension, but then again, this is still dependent on the image. If you had an image that is 600px wide, stretching it to fit into a container that is 800px will blur it out. This is what is happening to your site currently.
The best you can do is have a uniform width on your images and have them around 1000px wide. This way, if you use full or large, you have a large enough image that does not need to stretch out.
Again, back to square one with you guys. I get that, but that’s why I want to have you create CSS that allows it to be smaller too. For the horizontal ones, at 1000px wide, would make it extremely long so that our users would have to scroll in order to see the whole image, and that is what we are trying to avoid.
The better option would be to use a grid gallery. This way, image previews are presented as thumbs and when a visitor clicks on an image, it opens the image on a lightbox showing the whole image without any scroll.
This way, the quality of the image is not compensated.
Please check if that will work better for you.
You must be logged in to reply to this topic.