I have too many png images in my website. How can I load my website fast? I have minified html css and js files, but it still doesn't work. :(
Convert to jpeg, if it is feasible. Jpeg is not lossless, so the quality will worsen, but on pictures having many transitions and only a few sharp edges (i.e. photos) it is practically invisible.
Optimize the pngs. There are many png optimizing software on the market.
Finetune the cache headers on the server side. It is possible that your web server doesn't sends valid caching headers and thus forces the browser to reload the images again and again.
Finetune your html and css. It helps a lot, if the browser knows the size of the png (from the css) before it would be even loaded.
Analyze your traffic. Where is the weak point? Does it need to load too many traffic (so your page is too big), or the browsers need to many cpu cycles to render them? Check with some tools (there are also a lot of on the market), what is your browser doing while loading your page. You could even see this in a windows task manager. Does it use 99% cpu, or much fewer?
You could convert them over to WebP images (which can be up to 3x smaller than PNGs).
Related
I found many websites that switch from a content to another without letting the user watches the loading of many images and everything appears so light. Usually, I saw a sort of loading animation of 5, 10 or 15 seconds (without progress bar) that makes me think that it's the moment when the website renders all the initial content. I just came across a good use of progressive jpeg or they use a special framework? If not, what's the right development approach for fast loading images?
In these days of high-speed internet the advantage of progressive JPEG is that, with the right settings, you can get often get better compression than with sequential. In the days of dialup modems, progressive JPEG and interlaced GIF and PNG could allow to get a preview of what the image you were downloading looked like (and you could stop the download if it were bad).
Progressive JPEG does allow what you are describing. It takes more processing because the decoder has to decompress the image for each screen update. In order to see this effect on the screen, the decoder has to support re-decoding after scans and the application needs to interact with the decoder to update the display.
In summary, the fastest way to decode images is to process the entire JPEG stream. A progressive display take more processing but allows the user to see what is coming down.
I want to reduce the size of jpg's I use on my website. Is there a way to reduce the size of jpg files so that I can reduce the data transfer charges without reducing much of clarity? I am hoping to do this without uploading my files somewhere.
[Nearly] Any application of JPEG is going to distort the image from the original. You can adjust the compression settings to balance compression to image distortion. The amount of compression you can get without visible distortion depends upon the type of image. If you have a cartoon with sharp color transitions, you are going to quickly see distortions with JPEG.
Things you can do to change compression:
Change the quantization tables ("Quality Settings" in many encoders)
Subsample the Cb and Cr components.
Use optimal Huffman tables (has no visible effect the image)
The best way to shrink JPG files on web is to use shrinkjpeg.com. The reason I recommend shrinkjpeg.com is because the site compresses JPG Images without actually uploading the files to their server (Who knew HTML5 magic can do this locally?)
I have some large images on my web site, and so I saved them as progressive jpegs. That way the user should see that something is happening while they download. But nothing shows up for several seconds until the entire jpeg is downloaded. What am I doing wrong?
The site (the large image should be obvious)
http://www.heylookthatsme.com
A typical image on its own, displaying properly:
http://www.heylookthatsme.com/art/stories/Wonderland.jpg
EDIT: it look like it may be due to my using tables for layout. A bit of Googling suggests that tables won't show anything until the last byte is downloaded. I'll try using pure DIVs and see if that fixes the problem.
You can be perfectly correct in your progressive jpegs but the web browser does not have to display them frame-by-frame.
The display of the image is entirely up to the decoder. It's more complicated to implement, say, a web browser that continuously updates a progressive JPEG than to buffer it and display it all at once.
Remember, each browser can do it differently.
I am having a little issue here. I am a web development major and I am currently building this site for a project I am required to do. I wanted to make it look pretty with a background image. I created the image in Photoshop and saved it to web as a .jpg and it ended up being 58.8k in size.
I am all for websites that load quick for the user, but I am wondering if less than 60k is okay? I checked it on the yslow firefox extension and it loads for me in 96 ms (slightly poor test subject - http://www.speedtest.net/result/1146275377.png)
Is 60k too much, is it a best practice to have images only 10-20k? I HATE it when I see an image loading... it just.. isn't even worth the graphic at that point. Is there quicker ways to load a image of that size? CSS or tag? Or should I not even be worrying about it?
Most browsers load the background image last by default, so you shouldn't have a problem.
How large is too large depends on your hosting set up, the amount of traffic your site gets, and the typical transfer rate of your visitors.
60k seems reasonable to me for an average site with not too many simultaneous visitors. However, bandwidth costs money and this is the reason that you rarely see background images of that size on big sites. On the other hand, youtube regularly streams videos that are thousands of times larger than the background image that you propose. It's impossible to give you precise advice without knowing much more about your site, its hosting solution and it's usage statistics.
Chances are, if you're asking this question, 60k is perfectly fine.
If you want to guarantee that your background image loads first or last you can do:
<script type="text/javascript">
bgimage = new Image();
bgimage.src = "http://www.olhovsky.com/img/cdf97/256fwt1_eg.png";
</script>
Place that code above the body tag to preload the background image. Place it lower in your html document to load it later (e.g. after the </body> tag to load the background last).
And then in the body tag:
<body onload="document.body.background=bgimage.src;">
I don't think 60k is too large although you probably want to look at your likely users and think about what their connection speeds will be like. If you wanted to try and squeeze the file size down as much as possible, try smushing it as well and you might see it drop a little further.
I'm starting to venture out from using jpeg and gif files to png, I was wondering if there were any standards for using png beside IE's lack of support for it. I also want to know if there was any current articles about setting I should be using when optimizing for web? Right now I'm using photoshop to do this, should I be using firework instead?
Which optimizations you use depends on the type of image. If your image contains only few colors, you might use png-8, otherwise you may need png-24. Same goes for the use of transparency/alpha blending.
The Photoshop save for web-feature does a fine job, but when your website has a lot of visitors, you may benefit from using PNGCrush for further compressing your images. You can use the YSlow plugin for FireFox to test how much bandwidth you can save by crushing your images.
Also, you can make use of CSS-sprites if your design allows it. This can result in less (but larger) images and therefore less requests and sometimes less bandwidth. But this doen't depend on the type of images you use.
Png is supported by IE, by the way. Only the alpha-transparency is not supported by IE 6, but there are CSS/Javascript trics to work around that, although they do not work for background images.
I wouldn't quit using jpg. Jpg is very useful when it comes to pictures. Png files are convenient for small images like buttons, graphical elements, and for images with large plain areas, like screenshots.