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.
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.
Anyone knows why the image, shown below, is partially gray while loading? I assume it has something to do with progressive JPG, but I haven't seen the grayscale effect before. Is there some kind of a JPG export setting that enables that? How is it called? Can I disable it?
Direct image link
Edit:
The problem could either be the problem described in #KonradDzwinel answer OR my answer, both could look identical:
What is the problem
For some reason the file is saved or produced in way that make the file we call it Lossless JPEG.
I am not sure which software, tool or how this problem is was produced, but that won’t change the fact that your file had have some issues or even corrupted.
How to find the problem in the file
Your file was saved in way that it works identical but it had issues. To check whether your file is healthy or not, it requires a tool to scan/analysis the image file. I use a very nice and easy to use tool (software) called JPEGsnoop (link for download). This tool is free and I used it to scan and analysis your image files for problems.
Your file comes up with few places with following note, (the screen-shot btw shows only one note, but there were more):
NOTE: Scan parsing doesn’t support this SOF mode.
After I have re-saved the file correctly and analysis it again, it does not show any problems or notes:
What I did to create a problem FREE image file
For testing I have used Photoshop 5.5 to open the Lossless file and save it with new name with default jpeg (since I don't have the original file). But correctly I assume you have the original file, and I assume you have Photoshop any version does not matter OR any other image tool. Try to optimize your jpeg file best possible, analysis it and remember/note the saving setting for future wise image saving.
Here is an example of my Photoshop save settings, which result in problem FREE file:
How can I learn more about Lossless JPEG
I won’t go in details of this problem but I will leave some link that explain it in details, I hope also you find this is useful to solve your issue:
http://www.impulseadventure.com/photo/fix-corrupt-jpeg-photo.html
http://fileformats.archiveteam.org/wiki/JPEG
http://fileformats.archiveteam.org/wiki/Lossless_JPEG_%28original%29
http://www.howtogeek.com/142174/what-lossless-file-formats-are-why-you-shouldnt-convert-lossy-to-lossless/
Software JPEGsnoop
http://www.impulseadventure.com/photo/jpeg-snoop.html
Progressively encoded JPEGs contain ten scan layers by default. That means ten iterative layers of image information build on each other to deliver the final visual quality of the image. The first visible scan layer of a progressive JPEG is always highly pixelated and often black & white because it saves on color channel information.
Source (emphasis mine)
Another resource that explores this issue in lengh: http://cloudinary.com/blog/progressive_jpegs_and_green_martians
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).
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.