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?
Related
I'm wondering what the best practice is for loading high-resolution images on a webpage. Currently I'm loading a bunch of images locally and the website is running super slowly. Here's an example:
https://shmoss.github.io/Gibbs-Lab/research.html
And here's how I'm actually loading the image:
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="img/Forest-Conservation-and-Biodiversity.png" alt="Card image cap">
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
I read that images should be loaded locally, rather than hosted somewhere like on Box, Google, etc. What can I try next?
This is a bit of a "highly opinionated question", since many people will have different answers based on when they last looked at "standards", but here's some fairly recent guidance to work from. It's guidance, not rules, so feel free to make some judgement calls with it.
What is the best image size for websites?
The size of your images varies depending on where you want them on your website. The optimal file size for images on a website is no more than 200 KB, and for full-screen background images, between 1500 pixels to 2500 pixels wide, and for most other images a max-width of 800 pixels. Keeping images between these perimeters will ensure they load properly on computers and mobile screens.
https://northwestmediacollective.com/blog/best-image-size-for-websites/
There's other guidelines out there, this is just the first one I found that seems reasonable.
To display larger images, you should make the small "thumbnail" images clickable, which would then open either another tab to view the image, navigate to the image, or display a modal/div/something to display the image over top of your page. This allows people to select which images to see and download. This frees up bandwidth for just the one pic they are looking at, instead of "all of everything at once".
In your case, you aren't displaying a gallery, just header images to some text, so your images don't need to be anywhere near as big. The resolution you are displaying at is far lower than the image, so most of that detail is completely lost. There's really no point in having 3.5 mb, 3600 x 2400 px images when you are displaying them at 243 x 162 px. Resizing the page, it grows to 351 x 234 px, which is still wasting resolution, meaning you can greatly reduce your resolution and still get the same look on the client's machine.
A JPG file loses data, anyway, so if you want to keep detail at a lower resolution, you can try using a PNG. This is also a bit of a "highly opinionated" subject, so I'll just leave the link below and let you decide.
What is the difference between JPEG and PNG files?
Despite their similarities and widespread use, there are many differences between JPEG and PNG files. Because of their different compression processes, JPEGs contain less data than PNGs — and therefore, are usually smaller in size. Unlike JPEGs, PNGs support transparent backgrounds, making them preferred for graphic design.
https://www.adobe.com/creativecloud/file-types/image/comparison/jpeg-vs-png.html
To add some context to resolution and file size changes, if you reduce the resolution by 2, you are reducing the file size to approximately 1/4 of the original size. A 3.5 mb file becomes ~875 kb. Do it again and it's ~220 kb. Your 3600 x 2400 px image becomes 900 x 600 px, which is still plenty oversized for what's displayed. And at today's internet speeds, 220 kb will load really quickly even on mobile devices on "slow" cell networks.
For more context, 1080p resolution is often 1920 x 1080 px (depending on width), so even at 900 x 600 px, your image is a quarter the area of the screen. A 4k screen is 3840 x 2160 px (depending on width), so it's still about 1/15 the total screen size, which is still larger than what most people are doing to display it. (I should know, I'm using a 4k 49" TV as a monitor.)
Your current image has more pixels than a 4k screen can display, even though it's a different aspect ratio. All of that extra data is wasted.
And, speaking as a software developer who has done a lot of web dev, your images being on the same server as your website is very standard. About the only time you need to bother with a 2nd server is when you have massive amounts of images, which you don't have. I'm talking thousands, tens of thousands, or more images and you need a way to manage their organization or to offload/load balance the traffic. Using a 2nd server, Google Drive, OneDrive, Dropbox, or whatever just adds another layer of complexity that you don't need.
I am new to web development and I have a question regarding the natural size of profile pictures vs their actual size.
I noticed that when I inspect element on the profile pictures on popular websites, the natural size of the avatar image is usually twice as large as the displayed size.
Some examples:
And when trying this out on my own, I noticed that images do really look better when you make sure the actual (natural) size of the image is twice as large as the displayed size.
As you can see the 64x64 picture looks a lot more crisp than the 32x32 picture. My question is if there is anything special about the two-factor. Can I make it a 128x128 picture and display it as a 32x32 to make it look even better?
Most images on the web are bitmap1 images, which are made of hundreds of thousands of pixels. For example, a 32x32 image would have 32*32 = 1024 pixels. To display the image, the browser would have to go through every single pixel in the image. So the more pixels in the image, the longer it takes to load it.
As for why the image looks better or clearer is because the number of pixels in the original image (natural size) is the same no matter how much you zoom in or out of the image.
So when you zoom in on an image, you get the following result:
(Image from http://scientificcuriosity.blogspot.com/2006/09/how-is-digital-photo-stored.html)
The "squares" you see are individual pixels.
But if you zoom out, you get the opposite effect:
(Image from https://www.researchgate.net/post/How_can_we_quantify_postural_stability_when_a_human_is_standing_without_perturbation_and_with_it)
As you can see, the image is much more clear when scaled down.
But, there is a major disadvantage to large images (in terms of width and height, or number of pixels), they take longer to load.
The more you scale down an image, the more crisp it will look, but also smaller.
Your best option is to use a medium-sized image and display it scaled at 50% to 100%.
[1] https://en.wikipedia.org/wiki/Bitmap
Image clarity works on the pixel, if you using the high-resolution image for a small display it's not a good idea because High-Resolution image size is big always. your website will be slow.
you can go with this For Example - Natural Size (64x64)px and you can show in (50x50)px not the big difference of Image Pixel.
it will also show your image clear.
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 trying to build a deals page which are pulled from amazon.in.I basically go to a deal and copy the image and upload to my server.
But due to different size of the images on amazon.in when I shrink it by 200*200 size for the deal thumbnail, some of the images are getting distorted.
In the below image you can see that the Amazon Basics cable is properly scaled, where as the iphone 7 image is distorted due to the nature of images at amazon.in.
What is the general recommendation for these problems? How do we solve this issue so that I get uniform images for my deals?
If the image does not have an aspect ratio of 1:1 (which is the ratio for your thumbnails) it will get distorted because there's more length in one dimension than the other and if try to match them, one of them will have to be squeezed. That's where the distortion comes from.
The only thing that will work is to give the images a new aspect ratio that matches your template
This can be done with CSS like #SaidbakR mentioned in the comments
Fix the width and place the image in a div with oveflow:none and fixed height to hide the extra height.
This will work beautifully but some images will just not work. They will just be cutoff in the wrong places.
The only other thing you can do is to manually edit the photos in Photoshop or something similar. This can work on all images, but manually editing each and every photo that doesn't fit is a pain in the neck.
nevertheless, here's what you end up with.
Before: Original Image in full dimensions
After: Image edited in a program like Photoshop to the desired size of 200x200 with no distortion
So? My Suggested fix is to adjust your approach/template or find another source for your images.
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.