My website has a grid of images. Let's say there are 100 images in a 10x10 grid and each image is 50x50. I give the users the ability to scroll out so that this 500x500 grid becomes 20x20 grid at 25x25 resolution which is 400 photos or in which is 5x5 at 100x100 resolution for just 25 photos.
To be able to do this I must have all 400 images loaded from the get go. My issue comes down to how those images should be stored on the server. If I store all images at 100x100 then that could be say 4 megabytes of space. But if I store them at 50x50 that is only 1 megabytes of space but would be blurry at the higher resolution. Keep in mind that space is both the amount of data (and therefore time) to load a page and the amount of storage space required on the server.
My solution for this is to sacrifice server space by keeping multiple copies of the images stored at each resolution. When the page loads it takes 400 photos at the lowest resolution, 100 photos at the medium resolution and 25 photos at the highest resolution. Then when the user changes sizes it switches between which image it uses.
This is a simplistic example as ultimately I would like 5 (or more) levels of zoom and would be a lot more code. Just wondering if server storage is not an issue (if only) and I really wanted to push the efficiency of data usage (considering this site is aimed at mobile users), is this an acceptable solution? Or are there any other solutions which would be better or worth considering?
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'm building an application where I have a list view and a map view. The list view has image and info sections, but I am having difficulty with the image scaling.
The images are images that users upload of themselves, their listings, etc. I am using AWS Lambda + S3. So, I have flexibility to modify the image scaling for thumbnails, potentially creating multiple dimension thumbnails.
How should I scale these images so they can be accessible for mobile/tablet, desktop, and large (2k+) displays? Should I make 3 or more resolution scaled images from the image the user uploads, and then have some kind of img-sm, img-md, and img-lg differentiator?
Thanks
Use img tag with srcset attribute.
More info: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
I won't recommend resizing by CSS. Because the large file is anyway being downloaded on the user's device and will take more time to load in comparison to a small resized image.
In the case of serving perfectly sized images, you have two popular approaches.
One approach is to create resized images in all dimensions that are required, as soon as the user upload the image.
Another approach is to just upload one single large image and then get the desired dimension by specifying height & width in the URL parameter. It has more benefit. This will allow you to change the layout of your application in future without much effort from your side. Otherwise, you would have to again re-upload the old images in new required dimensions.
You can check out ImageKit.io. It has all these features + optimization.
Some Mobile website with Retina-ready using twice the size of image to get finer quality,
and using the original size of image in PC.
I don't understand why don't directly use twice the size of image in every device,
because Computers isn't so urgent need to save network traffic.
Prepare two different sizes of the picture is too spend time....
It is a Blind Spot ? or I am wrong ?..
=============================================================
Extra Content - 2013-07-10 :
The only questions is "they use original size image in PC, so why not just use twice size image in PC?"
it make same effect in Retina-ready, why PC need original size, PC didn't need ,right?
If I interpret your question correctly, the question is why don't websites use the same hi-res picture that they use for Retina displays on lower DPI monitors as well.
Then my reaction is, why should they?
A picture twice the size in pixels takes up four times the amount of bytes. That's not just bandwidth, but also memory in the client's computer
You don't gain anything in quality. If anything, the quality on screen decreases, if the browser's resize ability is not of the highest standard (read: if they optimise for speed rather than quality)
In addition, there are browsers that suffer a noticeable performance hit when you scroll up and down on a page with many resized images
Lastly, for the webdeveloper, creating smaller copies of the pictures before deploying them on the web server doesn't take up that much time. There are automated utilities that can do that, on the press of a button.
I.e in pixels, and in mb?
Wondering this for awhile thanks!
The maximum size of a JPEG image is 65535 x 65535 pixels.
The maximum size of a PNG image is 2^31-1 x 2^31-1 pixels. You would have great difficulty constructing an image this large due to memory constraints on typical computers.
Some older platforms cannot operate on files that are over two gigabytes in size. Of course, two gigabyte image files would be awkward to work with in most situations, so unless you're doing astronomy with amazing telescopes, I really wouldn't worry about it.
Since most displays are under 1920 x 1200 pixels, it would probably make sense to resize your images down to this size, unless your intention is to allow your clients to make photographic reproductions of your images -- in which case, give your clients as many pixels as you can.
The answer is, there is no such limit, but from a practical point of view, use of images larger than 2 MP (1600x1200) on your website wont make any sense,it wont be it useful/easier for a wide audience. and w.r.t size in MB, if you're seeking practical solution, an image with <2MB would likely serve you in any case.
Eventually the host computer will run out of memory and can't load the image - but I think it is safe to say that you'll never make that happen.
Images for webpages can be as big as you like. You need to think about the convenience (or lack thereof) of the users loading very big images on connections that are now mobile all the time and unstable to say the least.
What are the benefits to using an images real height and width when rendering HTML? That is if I have an image that 100x100 pixels but I want to display something that is 95x95 pixels, should I resize the image on the server or can I let the browser handle this? I'm really looking for a general rule along with the reason. Thanks.
<img src="image.jpg" style="width: 95px; height: 95px;" alt="an image" />
Browsers handle resampling/interpolation of bitmap images differently when they're the ones resizing the images, which may or may not be controllable with CSS. This is elaborated on in detail in this post on Flickr's dev blog. If you resize the image in an image editor or by using server technology, you'll get consistent results across browsers.
In your case, a difference of under 5 pixels around will probably not be too much (unless you're concerned about pixel perfection!), but if you're trying to squeeze dimensionally or binarily large images into small rectangles, it's best to resize them beforehand. The reduced image dimensions and file size will help with bandwidth savings.
If you're always going to use the same height, it would make sense to resize it once beforehand - in as nice a way as possible - rather than getting everyone's browser to do it. After all, you can verify the results, make any tweaks you need, use the best software you can find and not worry about how long it takes to perform the resize etc.
On the other hand, I wouldn't expect the results to be very different visually, and unless you're talking about really slow computers (or a lot of images) it's probably not going to take up that much client CPU time. You may want to check the render time on slow mobile phones though, particularly if you're targeting mobile users.
if the sizes are significantly different then you should have a large versin and a small version:
like in your example, 100px and 95px shouldnt be a big deal but lets say you have large images and you want to display thumbnails it will be better to create multiple versions of the images.
The advantage will be:
1 - faster download time when you just want to show thumbnails.
2 - More consistency on different browsers
3 - I am sure people can add at least another 100 advantages in here
Just re-size the image. Otherwise the full 100X100 image will be loaded (which weighs more than 95x95 - and difference in size gets bigger the more you're trying to scale it with html). So it'll take an unnecessary long time to load an image that will not be displayed in its full size. If you scale them down a lot using html and you have a lot of images on the page - that's a lot of wasted traffic and reduced speed.
The whole width/height thing was used when connection was very slow and everyone used phone lines with ancient modems - that way you could see the proper layout of the page before all images were loaded (and it took a while to see all images after seeing the page with all the text).
You should resize the images on the server when it makes sense. I doubt if resizing a 100x100px image to 95x95px will save you more than a couple of KBs so you're probably OK in this case.
If the difference (dimension-wise) is significant e.g. on master page you show a 100x100px thumbnails and on the detail page you have 640x480px image then you better create two versions of the image. This will make your thumbnails page load faster and you'll only serve the minimum amount of data.
On the other hand if the difference (dimension-wise) is not significant then serving two images will actually double the amount of data transferred.
Here is what Google's PageSpeed have to say about it: Serve scaled images