Мылится логотип в формате PNG при сжатии

227

29 июля 2017, 04:07

.logo img { 
  width: 240px; 
}

<div class="gcontainer2 wpm"> 
  <a href="/" class="logo"> 
    <img src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png" alt> 
  </a> 
  <ul class="topmenu search"> 
    <li class="allmenu menu1"><a href="">HOME</a></li> 
    <li class="allmenu menu2"><a href="">WHO WE ARE</a></li> 
    <li class="allmenu menu3"><a href="">OUR SERVICES</a></li> 
    <li class="allmenu menu4"><a href="">CAREERS</a></li> 
    <li class="allmenu menu5"><a href="">CONTACT US</a></li> 
    <img src="images/search.png" alt="search"> 
  </ul> 
</div>

На первом изображении можно заметить, что логотип немного размылен, хоть его изначальное разрешение в 2 раза больше.

На втором — смотрится идеально, но его первичное разрешение не изменилось. Что можете посоветовать, чтобы логотип смотрелся аккуратно как на больших, так и на маленьких разрешениях? Помимо векторного формата.

Answer 1

Вот, разные варианты уменьшения:

body{text-align:center} 
.img1 { 
  width: auto; 
} 
 
.img2 { 
  width: 240px; 
} 
 
.img3{ 
  width: 240px; 
  height:96px; 
  display: inline-block; 
  background:url(https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png)no-repeat 0 0 / cover 
}  
 
.img4{ 
  width: 240px; 
  -webkit-filter: contrast(1.25); 
  filter: contrast(1.25); 
} 
 
.img5{ 
  transform: scale(.413793); 
}

<img class="img1" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png"> 
<br> 
<img class="img2" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png"> 
<br> 
<span class="img3"></span> 
<br> 
<img class="img4" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png"> 
<br> 
<img class="img5" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png">