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.
Related
I work for a company that's going through a website redesign, and the designers have sent me a PSD file with mockups of the static pages. This is a typical parallax scrolling type deal that seems to be all the rage right now, and there are some large images in the mockup that will end up on the site.
I've chopped out the relevant graphics from the PSD and saved them with JPG where I don't need transparency, however I'm forced to use PNG when I do and some of these images are pushing 500kb in size resulting in the page size totaling about 3 megabytes, and I'm not even done! This is also being saved with Photoshop's "Save for Web" feature.
Considering over half our traffic comes from mobile devices, this is a big problem. What are some good techniques to cut down on the size of these images?
Your first step should be to go back to the designers, tell them the design is too heavyweight and work with them to find a way to load fewer, lighter images.
Tools like PNGGauntlet and ImageOptim can help reduce the size of PNGs (and JPGs). They tend to get a better (smaller) result than just Save for Web alone.
Lazy loading images so they only get downloaded when they scroll into view is another technique to look into. Where possible, use built-in CSS tools such as gradients, shadows, and the like. Maybe a vector format like SVG can be used for some of the images?
And, as Kobus Myburgh hinted, you can use CSS media queries to load smaller background images on smaller screens. If they're all background images, you might be able to get away with stretching smaller ones (using CSS background-size) on larger screens. Foreground images are trickier, but something like picturefill or a srcset polyfill might do the trick.
I believe what you're looking for is "responsive images". Read more here for techniques to solve:
https://github.com/scottjehl/picturefill
This is but one example of responsive images. There are many out there. Try Googling the term.
Try some lossless compression techniques .
Reference :
Lossless compression of images
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
I am trying to load heavy ong images in website. I have tried to use photoshop -> posterize method to reduce the file size of heavy pngs followed by some online tools to reduce the png file size without major compromizing the filesize of an image.
I have als tried pre-loading images, but still they are taking a considerable amount of time to load.
Can anyone please suggest me some way to reduce the loading time of png images on website, so they that they load quick?
Many thanks in advance!
Even if you follow all/some of the the previous advice, a nice addon to your workflow is passing all your PNGs through PNGoptimizer.
It's a simple drag and drop program which strips unnecessary information out of your PNGs. Depending of the type of image, the size saving varies between 5-10% and more than 70%.
Try preloading using XHR and some server tricks.
Or use the webp format.
Your problem must be elsewhere.
At most, 79kb x 5 is less than 1/2 a MB. This would only be a slow load on a slow connection.
I suggest you install YSlow ( http://developer.yahoo.com/yslow/ ). It analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
There is a nice JS script to ease the preloading of images: https://github.com/jussi-kalliokoski/html5Preloader.js
Be also aware, that proper caching is a MUST for heavy sites. Google has a nice introduction for this purpose: https://developers.google.com/speed/docs/best-practices/caching
To avoid flashing images on your site, load low-res images with fast loading time, stretch them to the full size and replace them when the high-res images were loaded. To improve optics you could also place a grid over the low-res image.
This has a pretty neat appearance for the visitor and reduces wait time.
Depending on what server you have, I use image gen for all my .net sites.
http://our.umbraco.org/projects/website-utilities/imagegen
<img src="/ImageGen.ashx?image=/images/an-image.png&width=50&height=50" width="50" height="56" alt="">
Photoshop's Posterize will not help you; PNG's don't use a palette (Unless you choose PNG-8). You can use File->Export for Web to export a smaller PNG (or a gif). If your image contains alpha information, it will be lost if you export for web though. PNG-8 and PNG-24 both have index-transparency.
#ShrutiJakhete you can use lazy load Jquery with your HTML5. The images outside the view port will not be visible until you scroll down the page. Thus it'll reduce the loading time. Check this out http://www.appelsiini.net/projects/lazyload
Example: mail.yahoo.com has a pretty nice background image beneath their main login form.
If I had an equally nice picture...How do I set it as background without making the page load too slow?
How big of a file size do I have to be to start worrying about this?
Thanks!
Use a lot of compression in your jpeg
settings when you create the image.
(JPG will probably be the best
format)
Keep overall contrast low in the the
image.
Avoid complex textures (blur out if
necessary), chose more gradient-like
forms.
Shoot for something around or less than 100kB, if you can swing it. Even that might pop in with some delay, depending on other factors.
To keep the image size to a minimum, you could use a program like Yahoo's Smush It (http://www.smushit.com/ysmush.it/).
It'll remove any unnecessary bytes in your image, without losing any quality making the image as small as possible.
Check:
http://httparchive.org/interesting.php
Average image size is 450KB for a web page (total for all images). Just make sure you don't go over the average too much and you should be fine.
I don't have much experience with the sprite approach to images (http://www.alistapart.com/articles/sprites). Anyone care to share some pros/cons of sprites vs. old-school slices?
The main advantage of sprites is that the browser has to request less pictures from the webserver. That reduces the number of HTTP requests and makes it possible to compress the parts of the design more effectively. These two points also represent the disadvantages of sliced images.
Here you can see some good examples how sprites improve the loading speed of web pages:
http://css-tricks.com/css-sprites/
Pros:
It's far easier on the server to serve a single large image than many small ones.
It's (slightly) faster for a web browser to load such an image.
Browsers only load images as they needs them - if you are using multiple images in a rollover, the browser would "pause" the first time you roll over the element. This can be solved using sprites, because there is only one image to load.
Cons:
It's kind of a pain to code (more so than using multiple images at least)
One often overlooked downside of using CSS sprites is memory footprint:
https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/
Unless the sprite image is carefully constructed, you end up with
incredible amounts of wasted space. My favourite example is from WHIT
TV’s web site, where this image is used as a sprite. Note that
this is a 1299×15,000 PNG. It compresses quite well — the actual
download size is around 26K — but browsers don’t render compressed
image data. When this image is downloaded and decompressed, it will
use almost 75MB in memory (1299 * 15000 * 4).
When sprites get loaded into the browser, they are stored uncompressed. A 26 KB file can uncompress to take up a whopping 75 MB of RAM. You should be mindful of using sprites with very large dimensions.
There's also the issue of what happens in browsers with poor CSS support (legacy browsers). The sprites may end up totally broken.
Sprites
Pros:
Less HTTP connections to the server
Faster loading on broadband
Cons:
No encapsulation: If you want to change one image, you have to change the sprite
It is difficult to setup individual images in CSS without a tool
Don't degrade: If the browser don't support CSS, you are in trouble
CSS Sprites:
Pros:
Graceful degrade in unsupported browsers (text can be shown when background images for links are not allowed)
Fewer HTTP requests
Each image has a separate overhead like color table so image slicing will be having more overhead than CSS sprites
Cons:
Poses a problem if images are turned off in the browsers (rare case though)
Image slicing:
Pros:
User perceives a faster load since loaded piece by piece.
Load on demand like when the user places his mouse on the image
Cons:
The webpages might have a large size on the client side even thought it might not be the case on the server side.
The main drawback of sprites is it makes it hard to read/maintain/modify your CSS. It can be difficult to remember the exact pixel offsets within the sprite.
pros using sprites :
since it is using 1 images for all, it require less load on http server.
cons:
- hard to code. you must know the coordinate each images inside sprites so you can display it correctly. once you change the size of the image, you need to adjust all ...
- big images could creates long waited page to display. while using images, user with slow internet connection can see one by one.
best practices.
use it for example roll over images.
Look into using a CSS sprite generator (we use SmartSprites). That way you can do slices locally, and have your build process generate a spritemap. It's the best of both worlds.
Also is SmartSprites isn't for you, there's definitely others, however I like it because it reduces the amount of work up front AND during changes.
Cons
- slower on older browsers/ maybe not working on them with hover effect (opera6)
- if not used correctly can get very/too huge (group them adequately!)
- tedious work to set them up
Pros
- less bytes transfered, because one big image is smaller then all individual images combined (one header/ color table)
- less http requests
I prefer going the middle ground of grouping similar images (normal, hover, selected page, the parent page of selected page) than having all the images in one file. To make these, you image slice like normal in Photoshop or Illustrator, open the files up and combine them with a shortcut key. I wrote the Photoshop script that combines images into CSS sprites. You will have multiple HTTP connections, but won't have the load delay on hover.