I have a development made.
I'm using 430px X 455px images
When I down-scaled image to 184px width: - Google Chrome: looks perfect - Firefox (37.0.1) looks very unfocused - Internet Explorer (11.0.9): "sawtooth" look (very pixelated)
Why is this? Not rescaled images I can use?
What solution could there be?
Development: http://s566904160.mialojamiento.es/desarrollo/
Use object-fit property of CSS.. Read this tutorial http://www.devtantra.com/273/object-fit-css3/
If you're not bound by latency concerns, consider serving ~25% more pixels than you're specifying in CSS, and let the browser do the downsizing. That will also handle cases such as browser zoom.
You get the best image quality when using images in the desired resolution.
that can be achieved either by creating them in a tool like Gimp or Photoshop, or using libraries like ImageMagic.
