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/
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
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 have designed This site .The page load speed is very low.I found online site load time which tells the load time of the site.As well as it gives the other statistics .
The page load time statistics snapshot is as folows:
my question is how can i decrease the page load time?Since it becomes very irritating if the page load time is more then 2 sec..
Not sure that this is really a programming question but one problem I see is that your images are too large in terms of file size.
These images are rather large for example:
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/img/bgbody.gif (145kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/he12.bmp (450kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/uploads/2012/07/slid11.bmp (1mb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/Istpanelfinal.jpg (303kb)
http://softwareservicesindia.com/Pradnnya_blog/wordpress_site/wp-content/themes/deep-red/uploads/TA_UnionSTN4.jpg (311kb)
You can start by using a program like Adobe Photoshop to save your images "for web." You might also want to look into converting those bitmaps and GIFs into PNGs. You may also want to make your JPEG images progressive.
If you don't have access to Photoshop, a free alternative that can "save for web" is GIMP.
edit: You might want to look into using some CSS to make a 1 pixel tall image repeat on the x-axis. You'd lose your gradient though.
Something like the following should work:
background-image:url(../images/gradient.gif);background-repeat:repeat-x;
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
I have a site which uses a large image as a background. It's a jpeg that's 134KB in size - I can't really get it below that so far. I have saved it for web in photoshop on low quality jpeg setting. It's dimensions are: 1920 x 1028.
How can I reduce the size further?
Could I resize it extremely small and resize it with width and height attributes in the image tag - as long as the aspect ratio is the same?
Its killing my page speed. Please help - any advice welcome.
Without knowing the picture I can provide different ways:
1)
If you dont want your picture to be too prominent in the background, try to blur it (could be a lot - depending on the picture!) -> then you can us a higher compression rate without seeing the artifacts too much.
2)
depending on your picture, try to reduce it to certain color-ranges (that you use a max. amount of colors) -> with this method you might end up using a .png or gif file, photoshop will show you what is best.
One last thought:
As this is you BACKGROUND image, try to keep it in 'the back' - this way you can try and alter (destroy) the image in a way to reduce colors! On the other hand, try using smaller pictures (800x600) and let css scale them, again - depending on your intention.
I use 1280x1024px bg-images at about 55Kb.
hope this helps.
Try smushing it http://www.smushit.com/ysmush.it/
Yes, you can use a smaller image. Your main options are
resize it on display (using something like <img
src="xxx" height="200%" width="200%">)
tile it
If it is a uniform background (pattern or similar), tiling probably looks nicer, as scaling up the image will degrade its visual quality. If it is a picture, you'll have to scale it.
I would definitely recommend resizing the image but keeping the aspect ratio. The smaller the better. Keep in mind however, that the smaller you go (less than 1:1), will reduce image quality. Having said that, generally image quality isn't mandatory to be super high for most backgrounds.
use Photoshop for resizing and make it according to your need such as 1024*800 or whatever u want,and then save it for web and device and there reduce the Optimized value of jpg hope it will work.
Unless you're willing to reduce the image's pixel resolution (like suggested by #sleske), there is probably no way to get image size much beyond what you have now. Photoshop's JPG export filter is top of the line in terms of quality vs. file size.
The only possible method could be splitting the image into sub-images, and compressing them with different settings ("slicing"). Large homogeneous areas can be saved at massively reduced quality without much visible loss, while detailed areas can retain higher quality. I think Photoshop has ImageReady for that.
If possible, save it as a GIF. GIFs are generally smaller than Jpegs.
you can use this online tool to reduce the size of image from MBs to KBs http://www.jpegmini.com/
I found a simple solution. It is to use office photo editor 2010 . just launch the application navigate to the directory with the images and simply click edit pictures on the right and then compress pictures . select what type you want i chose website. Successfully reduced size of jpg from 5mb to 50kb .
I tried many online image compressors but I liked this one most: http://compressimage.toolur.com/. You can play with various things like quality, compression methods etc.
You could have your server gzip images before sending in an htaccess file. (Assuming you run Apache)
If you have a lot of images, it could be intensive on your server's processor though.