CODEWITHSUNDEEP
compression
Thrice89
Thrice89

Reputation: 21

Compress images without losing quality for my website

I have a full width slider with a specific height of 500 px, the problem that i am having is that due to the images being so big they are really heavy and the slider takes a long time to load, how can I compress the images without losing quality? Is there a way? Like a plugin, code or something I can do?

Upvotes: 0

Views: 1682

Answers (4)

1JD
1JD

Reputation: 325

Well, image compression is a common problem faced by most of the websites. Its hard to assume any website without images.

If you just want to put the images once or if these are changed rarely, then just go for some online image compression tools like Tinypng or CompressImage

Otherwise, if compressing images is your day to day task, then go for your own solution i.e. building image compression algorithm based on your needs.

Mostly all platforms have some in-built image compression algorithms. Which technology is the best; is hard to say.

And if possible to play with design, just reduce the image to whatever size you want, and then give it a shadow.

Upvotes: 0

Rana Imtiaz
Rana Imtiaz

Reputation: 1413

Plugin wont work in this situation. You can use any online image optimization tool to reduce image size and then upload it to your server. TinyPNG is good online tool for PNGs, there are other tool for other formats as well like Image Optimizer where you can adjust image quality according to best fit requirements.

Upvotes: 0

Leo
Leo

Reputation: 6570

your website looks good and this type of image can probably keep a good appearance using lossy compression such as jpeg with some very nice results.

but if you still want to try some non-lossy techniques like described in details here

http://oreilly.com/server-administration/excerpts/9780596522315/optimizing-images.html

  1. try different image formats
  2. try different resolutions (lossy)
  3. try different sizes (lossy)
  4. try reducing the color pallette (lossy)
  5. try crushing PNGs with pngcrush (see link)
  6. try stripping JPG metadata (see link)
  7. try splitting the image (old solution, 10 years ago it was a way to load huge images, but still works with ajax with google maps - there's a free java code example on how to do this in this book - http://pragprog.com/titles/ajax/source_code - source code available for download)

good luck

Upvotes: 1

Daniel Huidobro
Daniel Huidobro

Reputation: 11

Check this links:

http://imageoptim.com/
https://developers.google.com/speed/docs/best-practices/payload?hl=es-419&csw=1#CompressImages

Use a small JQuery plugin like ResponsiveSlides.js if is the case.

Upvotes: 0

Related Questions