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.
Related
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?
I've an original image which is shown here. This is a HD image which is saved as jpg format. jpg is a lossy format which compresses the image when loaded on websites. So I saved the image as .png and tried to view it in my website, but the image was blurred. I even increased dpi of the image in paint.net, but the image was still blurred in my website.
Here is a screen shot of my website:
I want HD image to be shown in website without any blur. How can I do it?
Start with a higher resolution original image
I assume you are working from the similar looking template image, and the smartphone's screen has been added in after? The original image you linked to is only 600x212 pixels which is a very small size to work from (smaller than many mobiles, iphones and tablets). You need to start with a much larger and higher resolution image, and shrink it down as needed. Starting with a smaller image and increase the resolution or dpi cannot increase the quality since no extra details are added - often this just makes images worse.
This image is the same background but slightly larger at 850x300. Any editing like adding the app's image should be done at this larger resolution (it can easily be shrunk later but this will keep the quality as high as possible). Placeit.net sells the 1920x1440 version of the image for only $8 which should be large enough and scale down well.
JPG vs PNG
JPG is designed for photos and doesn't lose much, PNGs can be too large which affects load times, which are very important for mobile users. A high resolution JPG is the best approach examples and explanation. Every separate edit made to a JPG reduces the quality a little, so starting with the largest resolution image and doing a single edit is best. The resizing can be left to the web browser and responsive CSS.
Responsive CSS
This allows you to use the same HTML for both desktops and different sized mobile devices, with minimum changes which are controlled by a separate CSS file. Bootstrap and foundarion are the most population. Effectively you keep the key images at their largest size, then add media queries to the CSS to check size of the mobile device or desktop and adjust sizes accordingly. Images can also have their size specified in relative units, eg percentages. This css-only resizing is fast and efficient.
Google's image optimization guide covers lossy vs lossless, tools for fine tuning, scaling images and more. This points out that lossy/raster image formats are fine for very complex images like photos since human eyesight cannot perceive every detail anyway. What is 'lost' from the image is not normally noticable to the human eye - presuming of course you start with a high quality image.
Other options: progressive jpg and base64
Progressive JPGs appear to load faster than JPGs because they initially load in a way that looks like a lower quality image and then increases in quality, see example. Base64 is mostly used for small images like icons and 'above the fold' images that need to load quickly, although they can be demanding on memory. The image is stored using a very long alphanumeric string embedded in your CSS or webpage code rather than as a separate file. More details here
Frist you must ensure you original picture is clear enough and have high dpi
Second you must notes that nowadays the smartphone screen definition is much higher than common PC, so your picture must have enough definition.
Third, your cellphone browser mustn't have cloud speeding. Some cellphone like Opera may lead to image compression.
At last, I recommend you use high-quality jpg format image. You must keep a balance between size and definition.
I would come straight to the point:
PNG image or JPEG if forced to resize over its current form will produce lower quality output. Best way is to use 1600px wide and whatever length image you have and use image optimization softwares such as OptiPNG, PNGQuant or XnView and compress the output image to gain substantial ammount of compression.
Something about dpi
It won't affect too much for desktop browsers, and meanwhile if yu have an image with initial dpi of 72, there will be no gains to put image over 72 dpi after it.
The solution i use
Most of the time, we work on illustrator for graphics, so we build SVG from them. SVG is scalable till the end of screens, no loss of quality at all. As far as PNG and JPEG are concerned it is much better to use larger dimension image and compress it will tools. There is one great online tool for this stuff Kraken
One beautiful Trick
In photoshop, gimp: try sharpen your image. Sharpening will increase edge contrast and you can hack around from bad surce image too.
As far as base64 is concerned, it is bad idea to put an HD image of around 110 KB's in code, every time user open's your site will get your 110KB wasted, let them be stored in cache through either css: .class{background:url('image'); position:cover;}.
The only way to get better results is by minimizing http request but that is too much of headache. As only method right now is too make a image sprites.
If you want an HD image then you should download an HD image and edit it in Photoshop where you can solve all your requirements bcoz it's the way it goes in industries.
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 have come across this rule in YSlow for performance improvement that says that images should not be resized in HTML. They haven't mentioned any specific reason for this rule. Any ideas
Bigger images are bad because as well as wasting bandwidth, the limit of two simultaneous HTTP connections means that a browser will not be able to load other components whilst the image is being downloaded, so your JavaScript or whatever may take a lot longer to get processed.
Additionally, the processing time on the client end to rescale that image will use CPU cycles and slow down page rendering. Not so bad on a fast desktop you might think, but perceptions of page loading time can be influenced by even 1/10th of a second (see point 5 here - 100ms = 1% lost sales for Amazon). Mobile devices will be even more seriously impacted by having to resize like this as their processors are not so powerful.
The whole thing with YSlow is that 90% of the user's perception of speed is about the processing on the client end, not the load time from the server, which is why they get so persnickety about this.
Smaller images will also waste CPU when they are resized, and will additionally look pixellated, so bad for that reason too.
Apparently they haven't heard of retina screens... if you want a retina resolution image it needs to be 2x the size in pixels. So if you have an image that is displayed in 100x100px it needs to be 200x200px to look sharp on a retina screen. You should however not make it any bigger than this.
There are a number of techniques to detect if the user has a retina screen and only load the larger image when he/she has that.
So for me it also doesn't make sense to set a general rule that "Images shouldn't be scaled" without exception(s)..
A higher resolution image will not only look bad when scaled down by a browser, it also consumes unnecessary bandwidth.
Read the description under the title:
Don't use a bigger image than you need just because you can set the
width and height in HTML. If you need
<img width="100" height="100"
src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be
100x100px rather than a scaled down 500x500px image.
The rationale is that if you are going to scale down an image, why not just use a smaller image in the first place?
It doesn't mention scaling up, but I wouldn't recommend that either because although you would have a smaller image to load, it would not look very good once scaled up. It can be worth experimenting though, as if you're happy with the loss of quality you can achieve decent savings on the file size.
The main reason is that if you display an image in 60x40, you won't need a 600x400 image which is heavier.
In general:
If you set size smaller than real size than actual downloaded file will be bigger than it can be (so it's unnecessary network load)
If you set size higher than real size than image will look worth than it can be
It's small overhead for browser CPU usage
Really you should consider it but in some cases it's better to resize image by browser than have a lot of images or prepare it on the server side.
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.