I am looking for a way to resize images with JavaScript or jQuery without losing the quality of the image. I have found solutions using PHP but I am not a server-side programmer.
I am trying to develop a portfolio website for me and a friend and I created a lightbox effect. The problem arives when the website examples get clicked; their original size shrinks to 55% width and 90% height so that they have a decent view in all resolutions.
On monitors of 1366×768 the photos start looking very pixelated but on bigger resolutions they are ok.
Here is my website:
So can anyone tell of a solution for this problem?
The best way to do this is to render different versions of the image server-side using proper image manipulation tools. Serve-up the appropriate size depending on the user’s screen size.
Depending on the browser to size the image will never have consistent and high-quality results.