I have a wordpress theme for photographers but I notice all my images are been displayed bigger than the actual size I upload. They are stretching to the screen resolution I guess, but the problem is that if users have such a big resolution the images seem to be very poor quality, I would like to change this to show pictures at their original size, or only stretch until their max original size. But I can't quite find the code responsible for this changes,
This is the gallery link
http://prophotosjapan.com/gallery/harbour-wedding/
But even when you open them individually like this
http://prophotosjapan.com/wp-content/uploads/2017/09/Engagement31-2-684x1024.jpg
Engagement31-2-684x1024.jpg (JPEG Image, 684 × 1024 pixels) - Scaled (78%)
Is this the code that I should change?
So I've created an index page which displays all images in my database, however, the width of the images is reduced to 500px. I've added the ability to click on the image and be sent to a page that displays the image in it's real dimensions, however, I would like to limit the high of the image to the resolution of the user's screen so the image is as big as possible without actually going off the screen. Any good way to do that?
To make the div's height not larger than user's screen, just use max-height: 100vh rule.
I have a website where people can upload images. I have seen that a lot of sites scale down images to thumbnail size and show that on a search page for example, until the user actually clicks on one to view it in full size.
Why is it good practice to generate a thumbnail version of an uploaded image? Why not just use img tag with set height and width?
[EDIT]: After reading a few answers, I realised that I have probably phrased my question poorly. So, what I mean is, are the images downloaded in full size, even if they have a size specified in CSS? Are they scaled down at rendering after the page has finsihed loading?
Thanks!
Larger images have larger file sizes. If you have 1MB images but only need to show thumbnails that might be 10KB in size, you'll be saving 99% of your bandwidth by only showing the full images when required.
In addition to bandwidth, clients often have limited memory... think of mobile devices. Plus, the CPU required to handle them during scrolling and what not.
If you use the img tag with width and height, that picture is still the original, the data size does not change (it only looks smaller in your browser).
If you have thumbnails, those thumbnails are smaller in data size but usually somewhere on your page you link them to the original with bigger data size.
If the user downloads the thumbnail, he'll get the small sized picture, if he downloads the original, he gets the big sized.
Note: A thumbnail is a different picture than the original.
Are the images downloaded in full size, even if they have a size specified in CSS?
Yes images will be downloaded in origin size (full size). CSS only changes view of image not main image file.
Are they scaled down at rendering after the page has finsihed loading?
No, except when there is a script to do such job.
Smaller image has smaller size = faster loading.
When user actually want to see image, you open actual image and it may wait for load.
If you have several posts on search and each has image, thumbnails will be much faster to load than original images.
If you scale down original image with css (set width and height) it will still need to load original image first.
I am designing horizontal website with 1024*768 resolution ,but when i changed the my computer resolution to 1600*900 that time website layout shows the some part of second page on a screen . what to do solve this ?
You have a few main options.
Completely disable the website using Javascript to detect screen resolution and redirecting if they have the incorrect resolution (something I would not recommend).
Dynamically size everything so that everything scales based on the resolution.
Pad out the extra space with a plain background colour and center the 1024 x 768 area. (Note this will not work for people with smaller screen res than your fixed layout size)
There are of course other options but I would consider these three. It depends though what it is you are trying to achieve.
I have site where in I do client side image thumbnail preview with HTML 5 file reader interface.Everything works perfectly.However I see when I upload large size images lets say 600 by 600 , Image quality gets bad.I can understand that I shrink the size of the image and then display it.My image thumbnail placeholder is 300 by 300 and users can upload any size of the images.I need to maintain the quality of the images as given by the users.Is their anything I can do to maintain this on the client side ?Please read all dimension on pixels.
When I compare work with say facebook thumbnails, facebook thumbnails looks good even if they are shrunk in size.Appreciate if someone can point me to right direction.
There are several techniques to reduce image dimensions that differ in the way the image is re-sampled. See if you can control the re-sampling method to change it to "Bilinear". "Nearest Neighbor" re-sampling tends to give out ragged looking images when reducing.