I was wondering what the best way to have a large HD image load on my website.
When simply using it as a background image, there is a delay and there is nothing on the screen for a about 5 seconds before it slowly slides down the screen.
I had an idea that maybe stacking multiple images on top of each other with increasing quality, so that at first you get bad quality, then when the HD is available and loaded, it is made visible on top of the bad quality image.
I guess really my question is, is this my only solution? Are there any better ways to do this?
Thanks.
Look into image interlacing.
It can supposedly do what you want, though I don't have experience with it myself.
It does seem to be the way Facebook works to me.
Also see this question on SO, as provided by janith in the comments below: Load an image via Interlacing - From low to full resolution - HTML
Related
I currently have a page with about 20 or images with source data pulled from a database.
I display them at width of 100px and I have a hover function that appends an element with the full size image with a width of 250px.
I decided to use the full size version for the original image and just scale it down to 100px instead of using a thumbnail version. My thinking on this was that on this page it is very likely that the user will hover over most of the images so the page would end up having to load the full size version for most of the images anyway so why make them download the thumbnail AND full size version for each element. Also scaling from 250px to 100px didn't seem to display much if any distortion in the smaller element.
Now I am running my page through Google page speed analyzer and it really does not like me using larger than necessary images for the smaller elements. Of course it is ignoring the fact that those larger images are being used for the dynamically created popups.
In order to make my page play nice with Google's page speed tester I am giving in and using thumbnails for the smaller elements but I also want to prefetch the larger image to avoid an annoying delay when the user hovers over the element. This means I am essentially loading 2 versions of the same image just to make Google speed test not yell at me.
This seems ridiculous to me so I wanted to ask if this is really the best way to do this or is there another way to make my page play nice with Google speed test.
Thanks,
Adam
If you know what you're doing, there's no need to be a slave to the PageSpeed score.
Loading two copies of the images could make actual page speed slower. However, it depends on what you are trying to optimize for. Loading thumbnails first and then large versions could be better if you want time to full render to be fast (so the users can see the page) and then load the big images in the background to add interactivity later.
Or is it better to have fast time to interactivity, and time to full render doesn't matter that much. Then maybe having one copy of each image is better.
If I have an image containing sprites:
http://www.starka.se/wp-content/themes/starka/images/sprites.png
Using these sprites on the website, will they show as that part of the sprites.png is loaded or will they only show until after the entire sprites.png has been loaded?
Let's say I'm on a connection so slow that this would be noticable...
Another way to clarify:
Would the STARKA text (which is at the top of the .png) show on the website before the social icons (which are a bit further down) or would they both show at the same time AFTER sprites.png is entirely loaded?
According to Yahoo : It depends on where you put your Stylesheets. Depending on browser, the content will only show when all graphic elements related to this content are loaded. So you might think "It doesn't make any difference! ". So using or not using sprites doesn't make any difference, but only in HIGH SPEED connections.
But the thing is, using sprites reduces significantly the time a page needs to load. So "STARKA" might show before the social icons ON VERY VERY SLOW connections.
After visiting your website and seeing how many differents images you have, looking forward to use sprites won't be a loss of time ! It won't solve the problem for people using 56K, but it might still improve your website for many people :)
Currently for my webpage's banner, I'm using http://workshop.rs/projects/coin-slider/ to have 4 images sliding. On the office's slower computers the coin slider seems to be very laggy.
My question is, would animating the 4 images into a single GIF file be better/faster? Are there better options to create a 4-image-moving banner?
Try using a lightweight image gallery, I found some here. The coin slider is lightweight 8KB but there are ones even lighter 2KB or so.
You could technically use a GIF but I think there are some mobile compatibility issues, you can also have better functionality with javascript/jQuery galleries.
As far as slow computers go there isn't much you can do about that, I wouldn't worry too much about it. Just do some extra research on how to minimise files and deliver a faster site.
Gif is not a wise alternet for sliders..you could reduce the quality of your Images and compress them..or if you are using large images and resizing them in slider, you can re size them with any image alteration tool. This will reduce image size too.
And I hope you are not giving images path direct internet links, cause this will automatically increase the loading time.
i am making a website where i want one huge image to cover the complete background. I have seen many websites where the images in the background look to be of very high quality and still the pages load really quickly. How?
for example look at this link http://g2geogeske.com/menus
how can i achieve images with quality like these without compromising with the load time. Also if anyone knows of any tutorial or site which explains this please post the link to thanks.
even after being so big its just 170 kb(backgroung in link).my images are at about 700 kb and still look of lower quality then the one in the link. Am i missing something. some trick or anything??
You want to know how to compress images? Go download a decent image viewer (Irfanview) or editor (Paint.NET) and go to town! The background for the site you linked is a 171kb jpeg file; that's peanuts for a half-decent internet connection.
usually when you save an image as a jpg, you have the option to specify a 'quality' rate. If you look at the image in the site you linked, the background image, even though it's really big, it's only 170K. To me, the magic number to save a JPG is 90% quality.
ADD: Also, if you use Irfanview, you can add a plugin called 'RIOT' that compresses images even further (I think you can also get it as stand-alone or something) http://luci.criosweb.ro/riot/
I know of 3 main ways to shrink images:
Using the img tag WIDTH HEIGHT
Putting all the images in a DIV and then scaling the whole div.
User zooming with ctrl + mouse wheel.
I have some pages with huge amounts of images. What I have noticed is that there is massive speed difference between the methods. Method 1 kills firefox very quickly. Method 3 seems to be the fastest on all broswers I have tried.
Does anyone know of any other methods? And is there a way through javascript/css to specify what the browser zoom level should be so I can at least use the fastest way?
The easist on the client would be scaling the images on the server and sending them to the browser, however it would take some serious CPU power on the server end (unless you cache them, and serve them up afterwards). You can achieve this with PHP quite easily. Depending on your purposes, you could simply write a script that takes all the images in a directory, resizes them and saves them to "thumbs/".
If you don't want to use anything on the server, I would either go with option 1 or question why there are so many images on one page to bein with. Try adding some pagination or something. If the browser slows down while using such a basic method of resizing images, there might be some refactoring in order.
If you're going to be resizing images why not have the images themselves be smaller. That will load the fastest out of any method you try. You can use PHP to create thumbnail sized images, and a link to the full sized image if they need to see it. Remember, even if you resize an image with the height/width the browser still loads the full image.
See http://articles.sitepoint.com/article/image-resizing-php for a tutorial on image resizing in php.