I have img background in my angular app, in slow connections the image loads slow and shows partially during the loading.
Is there a way to wait until the image fully loads and then to show it? and not to show it in loading progress?
Most likely it is caused by the size and resolution of the image.
To make it load faster reduce image sizes using either GIF, PNG-8. or JPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. Also play around with different image compressions.
Related
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'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.
I am putting some photos on my website and I do not know which syntax will load them quicker. My photos are usually 4300x3000 or 3000x4300 (which is from 7-10 MB per photo). I am using
#image {
max-height:500px;
max-width:750px;
}
When I viewed my website on a low-end PC, it took a lot of time to load. I do not want to use fixed height and width because I could have photos as big as 2500x2500 and that would cause a mess. What should I do to reduce the load time? Is there something like an “autoresize” that will keep the height to width ratio?
Compression
You should compress the images using some external software (if you are not using any other language apart from HTML and CSS). I would recommend Photoshop or GIMP.
That's the only way to improve the load: reducing the image weight. The forced resize is just loading the same amount of data from the server.
Improving quality of resized images:
If you are interested on improve the quality of the resized images, you can take a look at this article:
http://articles.tutorboy.com/2010/09/13/resize-images-in-same-quality/
Auto-resizable background
Loading image of 4.000 pixels is not a very common practice even in the websites with a full background. What it is usually done is loading a picture of about 1800-2000 pixels width and then adapt the image to bigger or smaller monitors using CSS preferable.
Here an article about that:
http://css-tricks.com/perfect-full-page-background-image/
Responsive images:
You can also load a different image depending on the predefined resolutions of your chose.
You will need to have multiple versions of each image though.
More information about it use.
My photos are usually 4300x3000 or 3000x4300 ( which is from 7-10
mb/photo ).
It has little or nothing to do with max-height versus height. The performance hit is coming from the original size of the image which causes the browser to:
download a large file
exercise a scaling algorithm against an enormous number of pixels
What should I do to reduce the load time? Is there something like an
autoresize that will keep the height to width ratio?
Create a smaller version(s) of the file when you upload it, and serve the small version. You can optionally open the original version when the user clicks on the small image.
You can create one or more copies of the file manually and upload them with different filenames.
A more elegant solution is to create one or more copies of the file programmatically (you didn't indicate server technology, but there are many options available). For example, Facebook creates six copies of each image you upload so that they can rapidly serve them in different places with the correct size.
Whether or not you do it automatically or manually, you may choose to adjust/crop the image to achieve the desired aspect ratio.
You should be resizing your images and loading those resized images instead if you want quicker loading. You could keep both large and small on disk and only load the large images when user clicks the link.
To resolve loading time
You have to compress your photos before uploading them to the server. Use export to web in photoshop, make sure the image size is reasonable (I would say never more than 1mb); You can also use image optimisation software (In Mac I would recommend JPEGmini).
You can, if you wish keep your large images in a folder in your site and link to them (so that one can download them if you allow this).
To resolve the ratio issue (square vs rectangle)
You can just use one of the properties and css will calculate the other. For example, if you put only
#image{
width:750px;
}
This will resolve the matter of things "getting messed up" if you mix rectangle images with square images.. Good luck!
See this:
http://real-sense.com/index.php?option=com_content&view=article&id=106
The set of vertical images on the right are being resized using CSS
.thumbnail-product-resize
{
width:144px;
height : auto;
}
Does anyone know how to do this in a cleaner way so I don't lose quality on the image?
I mean that if I had resized the image using photoshop, the text won't appear as blurry as it does here.
Tested in FF
Thanks
The quality of your images will depend on the original size of the image you use. If have a large image with good quality, say of size 400x500, and it is then resized in the HTML to 80x100, it will still be a 400x500 image. However you can only fit a certain number of pixels on a smaller image of 80x100, so this bigger image has to be sampled. This means that an average is taken of pixels and then made to represent a 80x100 size image.
If you want a more definite result you can change to original size of the image to 80x100. This will probably give you better results.
Once upon a time browser image resizing gave truly heinous results due to the unsophisticated nearest neighbor technique they used to scale images. Now they usually perform filtering when scaling and there isn't that much difference between in-browser resizing and resizing in Photoshop.
The real advantage to scaling an image before serving it to the client is that you aren't forcing the download of large images when they aren't necessary. Depending on the size of your images, this can significantly reduce your page load times.
One final thing to consider is that more and more people have devices with "retina" displays. For those users scaling the image before serving it will result in much less crisp images.
Here's an in-depth comparison of the image scaling methods used by various browsers: http://entropymine.com/resamplescope/notes/browsers/
Even if you had done this in photoshop those images you have would still appear pretty much the way do just now.
FYI you don't need to include height:auto in your CSS above.
Best bet would be to create a seperate set of thumbnails (using photoshop) which maybe just show a portion of the image.
Loading the thumbnails and resizing them with css the way you are doing is bad practice as you are still having the user download the large images first.
It is impossible to shrink an image without loosing quality unless it is an vector-image. That would mean that you'd have to use SVG. And considering the images displayed I don't think you wan't to do that.
Also you mentioned the cleaner way to do it, use photoshop or something similar.
Say an Image of 1px width and 20px height of size 1kb is repeated in an unordered list item of with 10px.
Then will the page size in terms of kb is increased by 10kb (width of listitem* Size of Image) or it will be 1kb only.?
You are only making one request to the server for that one background image once, so no, it won't increase the page size.
Images such as the one you suggest are an ideal way to reduce page size.
If you want to go further you could consider using CSS sprites to further cut down on page size and loading time.
The downloaded page size will not change (that is, of the HTML and images).
Since it is the same image, it will be reused from the single download.
In memory, however, there will be an increase as the background needs to be rendered. It is not possible to determine what kind of memory increase this will cause.
The image gets loaded into the browser's cache only once. So the loaded amount will only be 1kb. This is why spritesheets are such a good idea.
No not at all it's not increase the loading page time. Image is loaded only onces.
absolutely not
when browser download the background,it repeat the background with the downloaded background image and never download multiple times,you can check it with firebug
No it will not increase the size. It will remain 1kb in size.
"Basically, Image slicing is useful for breaking up huge images so that the individual pieces will load more quickly than the whole large one."