Photoshop Question posted in
The official user guide can be found here.

Images losing quality in browser preview – Photoshop

As you can see, my problem is with the browser preview of images.

preview

Attached is an original image and the screenshot of the browser preview from my website.

My code used to display the image is:

HTML 

<div class="pricebox col-lg-6 col-md-6 col-sm-6 col-xs-12 col-ss-12">
    <img src="assets/img/preturi/aerobic-nelimitat.png" class="img-pricebox img-responsive" alt=""/>
</div>`

CSS

.pricebox {margin-bottom:35px;}
.img-pricebox {width:100%; height:auto;}

The dimensions of images are 550px x 200px arranged in col-6 grid, enough to any display I think.

What can I do to improove the quality? Any CSS solution, maybe a specific Photoshop rendering configuration?

PS: Also, the local preview from my attachement lose a little bit of quality.

Tags:

2

Answers


  1. 0

    Setting the max-width of an image to100% could actually solve the problem.

    Login or Signup to reply.
  2. 0

    550px x 200px arranged in col-6 grid, enough to any display I think

    For screen resolution 1366 as width, I don’t think 550px for col-6 is enough, so better to use a little higher resolution like 700px width and check it again

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search