Текст и изображения становятся размытыми под 768px

Question

Я никогда раньше не сталкивался с этой проблемой. Изображения четкие в точках прерывания больше 768 пикселей, но становятся размытыми в точке останова мобильной связи, у кого есть идея, что может произойти?

Сайт находится здесь: http://staging.asla.org/newsustainablelandscapes/index.html

<div id="home-container"> 

<header class="clearfix"> 
<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;"> 
<span class="sr-only">Toggle Button</span> 
MENU 
</button> 
<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float: left;"> 
      <span class="sr-only">Toggle Navigation</span> 
      <i class="glyphicon glyphicon-remove"></i> 
      </button> 
      <a class="navbar-brand" id="logo" href="http://www.asla.org"><img src="images/Logo.png"></a> 
     </div> 
     <div id="nav-container"> 
     <ul class="nav navbar-nav" id="dropdown"> 
      <li class="dropdown cases studies"> 
      <a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="main-nav">Case Studies</a> 
       <ul class="dropdown-menu multi-column cases-body studies-drop cols" role="menu"> 
       <li class="dropdown-submenu"> 
       <a href="#">U.S. Mid-Atlantic</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="sidwell.html">Sidwell Friends School</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. Northeast</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="bryantpark.html">Bryant Park</a></p> 
        <p class="category-cases"><a href="brownfield.html">From Brownfield to Greenfield</a></p> 
        <p class="category-cases"><a href="gowanus.html">Gowanus Canal Sponge Park&trade;</a></p> 
        <p class="category-cases"><a href="highline.html">High Line Park</a></p> 
        <p class="category-cases"><a href="lilylake.html">Lily Lake Residence</a></p> 
        <p class="category-cases"><a href="trid.html">Transit Revitalization Investment District (TRID) Master Plan</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. Northwest</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="highpoint.html">High Point</a></p> 
        <p class="category-cases"><a href="raingarden.html">Mount Tabor Middle School Rain Garden</a></p> 
        <p class="category-cases"><a href="greenstreet.html">NE Siskiyou Green Street </a></p> 
        <p class="category-cases"><a href="greenroof.html">Washington Mutual Center Green Roof</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. Midwest</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="greensburg.html">Greensburg Sustainable Comprehensive Plan</a></p> 
        <p class="category-cases"><a href="discovery.html">James Clarkson Environmental Discovery Center</a></p> 
        <p class="category-cases"><a href="kresge.html">Kresge Foundation Headquarters</a></p> 
        <p class="category-cases"><a href="rooftophaven.html">Rooftop Haven for Urban Agriculture</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. West</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="cas.html">California Academy of Sciences</a></p> 
        <p class="category-cases"><a href="caltech.html">California Institute of Technology Master Plan</a></p> 
        <p class="category-cases"><a href="crackgarden.html">The Crack Garden</a></p> 
        <p class="category-cases"><a href="gardengarden.html">Garden/Garden &mdash; A Comparison in Santa Monica</a></p> 
        <p class="category-cases"><a href="geos.html">Geos Net Zero Energy Neighborhood</a></p> 
        <p class="category-cases"><a href="nuevaschool.html">Nueva School </a></p> 
        <p class="category-cases"><a href="cannerylofts.html">Pacific Cannery Lofts</a></p> 
        <p class="category-cases"><a href="transwater.html">Transformative Water</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. Southeast</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="vietvillage.html">Viet Village Urban Farm</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">U.S. Southwest</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="sonoran.html">Underwood Family Sonoran Landscape Laboratory</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">Canada</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="hto.html">HtO Park</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">Europe</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="cradletocradle.html">Park 20/20: A Cradle to Cradle Inspired Master Plan</a></p> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a href="#">Asia</a> 
       <ul class="dropdown-menu" role="menu"> 
        <p class="category-cases"><a href="chongae.html">ChonGae Canal Point Source Park</a></p> 
        <p class="category-cases"><a href="ecolodge.html">Crosswaters Ecolodge</a></p> 
        <p class="category-cases"><a href="redribbon.html">The Red Ribbon, Tanghe River Park</a></p> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li class="dropdown cases videos"> 
     <a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a> 
      <ul class="dropdown-menu cases-body videos-drop"> 
      <p style="padding-top:15px;" class="category-cases"><a href="Vid_Waste.html">Building a Park Out of Waste</a></p> 
      <p class="category-cases"><a href="Vid_ActiveLiving.html">Designing for Active Living</a></li> 
      <p class="category-cases"><a href="Vid_Wildlife.html">Designing Neighborhoods for People and Wildlife</a></p> 
      <p class="category-cases"><a href="Vid_UrbanAg.html">The Edible City</a></li> 
      <p class="category-cases"><a href="Vid_Energy.html">Energy Efficient Home Landscapes</a></p> 
      <p class="category-cases"><a href="Vid_Brownfields.html">From Industrial Wasteland to Community Park</a></p> 
      <p class="category-cases"><a href="Vid_Infrastructure.html">Infrastructure for All</a></p> 
      <p class="category-cases"><a href="Vid_WaterManagement.html">Leveraging the Landscape to Manage Water</a></p> 
      <p class="category-cases"><a href="Vid_Parks.html">Revitalizing Communities with Parks</a></p> 
      <p class="category-cases"><a href="Vid_UrbanForests.html">Urban Forests = Cleaner, Cooler Air</a></p> 
      </ul> 
     </li> 
     <li class="dropdown cases educations"> 
     <a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a> 
      <ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop"> 
      <p style="padding-top:15px; " class="category-cases"><a href="Ed_Brownfields.html">Brownfield Restoration/Ecosystem Rehabilitation</a></p> 
      <p class="category-cases"><a href="Ed_ActiveLiving.html">Design for Active Living</a></p> 
      <p class="category-cases"><a href="Ed_Wildlife.html">Designing for Biodiversity</a></p> 
      <p class="category-cases"><a href="Ed_Energy.html">Energy Efficiency</a></p> 
      <p class="category-cases"><a href="Ed_WaterManagement.html">Green Infrastructure</a></p> 
      <p class="category-cases"><a href="Ed_Waste.html">Incorporating Sustainable Materials</a></p> 
      <p class="category-cases"><a href="Ed_Infrastructure.html">Transforming Transportation Infrastructure</a></p> 
      <p class="category-cases"><a href="Ed_UrbanAg.html">Urban Agriculture</a></p> 
      <p class="category-cases"><a href="Ed_UrbanForests.html">Urban Forestry</a></p> 
      <p class="category-cases"><a href="Ed_Parks.html">Urban Parks</a></p> 
      </ul> 
     </li> 
    </ul> 
    </div> 
    </div> 
    </nav> 
    </header> 
    <div class="clear"></div> 
    <div id="header"> 
    <div class="title"><a href="index.html"> 
    <span class="design">DESIGNING OUR FUTURE:</span>&nbsp; 
     <span class="sustainable">SUSTAINABLE LANDSCAPES</span></a></div> 
    </div> 
    <div class="thumbnail-bar"> 
    <a class="textleft prev disabled">View Previous</a> 
    <a class="textright next">View More</a> 
    </div> 


<!-- THUMBNAILS --> 

     <div class="scrollable"> 
      <div class="thumbnails"> 
      <!--row 1 1st slide--> 
      <div class="thumb"><span>30 case studies illustrate the transformative effects of sustainable landscape design.</span></div> 
      <div class="thumb"><a href="cas.html"><span><p class="title">California Academy of Sciences</p><p class="index-title-city">San Francisco, California, U.S.A.</p></span><img src="images/home/CAS.jpg"></a></div> 
      <div class="thumb"><a href="chongae.html"><span><p class="title">ChonGae Canal Point Source Park</p><p class="index-title-city">Seoul, South Korea</p></span><img src="images/home/ChonGae.jpg"></a></div> 
      <div class="thumb"><a href="sidwell.html"><span><p class="title">Sidwell Friends School</p><p class="index-title-city">Washington, D.C., U.S.A</p></span><img src="images/home/Sidwell.jpg"></a></div> 
      <div class="thumb"><a href="gowanus.html"><span><p class="title">Gowanus Canal Sponge Park&trade;</p><p class="index-title-city">Brooklyn, New York, U.S.A.</p></span><img src="images/home/Gowanus.jpg"></a></div> 

      <div class="clear"></div> 
      <!--row 2 1st slide-->    
      <div class="thumb"><a href="geos.html"><span><p class="title">Geos Net Zero Energy Neighborhood</p><p class="index-title-city">Arvada, Colorado, U.S.A.</p></span><img src="images/home/Geos.jpg"></a></div> 
      <div class="thumb"><a href="ecolodge.html"><span><p class="title">Crosswaters Ecolodge</p><p class="index-title-city">Nankun Mountain Reserve, Guangdong Province, China</p></span><img src="images/home/Ecolodge.jpg"></a></div> 
      <!--double wide--> 
      <div class="movie"><img src="images/home/VideosHeader_Orange.png"><p style="padding:10px 25px 0px 25px;">Watch animations created with Google Sketchup to learn how sustainable design works. 
      <a class="non" href="videos.html"></a></p></div> 
      <div class="thumb"><a href="discovery.html"><span><p class="title">James Clarkson Environmental Discovery Center</p><p class="index-title-city">White Lake Township, Michigan, U.S.A.</p></span><img src="images/home/Discovery.jpg"></a></div> 

      <div class="clear"></div> 
      <!--row 3 1st slide--> 
      <div class="thumb"><a href="about.html"><span><img src="images/home/about.jpg"></span><img src="images/home/about.jpg"></a></div> 
      <div class="thumb"><a href="gardengarden.html"><span><p class="title">Garden/Garden &mdash; A Comparison in Santa Monica</p><p class="index-title-city">Santa Monica, California, U.S.A.</p></span><img src="images/home/GardenGarden.jpg"></a></div> 
      <div class="thumb"><a href="education.html"><span><img src="images/home/Education.jpg"></span><img src="images/home/Education.jpg"></a></div> 
      <div class="thumb"><a href="lilylake.html"><span><p class="title">Lily Lake Residence</p><p class="index-title-city">Dalton, Pennsylvania, U.S.A.</p></span><img src="images/home/LilyLake.jpg"></a></div> 
      <div class="thumb"><a href="caltech.html"><span><p class="title">California Institute of Technology Master Plan</p><p class="index-title-city">Pasadena, California, U.S.A.</p></span><img src="images/home/CalTech.jpg"></a></div> 
      </div> 

      <div class="thumbnails"> 
      <!--row 1 2nd slide--> 
      <div class="thumb"><a href="cradletocradle.html"><span><p class="title">Park 20/20: <br>A Cradle to Cradle Inspired Master Plan</p><p class="index-title-city">Haarlemmermeer, Netherlands</p></span><img src="images/home/2020Cradle.jpg"></a></div> 
      <div class="thumb"><a href="highpoint.html"><span><p class="title">High Point</p><p class="index-title-city">Seattle, Washington, U.S.A.</p></span><img src="images/home/Highpoint_Index.jpg"></a></div> 
      <div class="thumb"><a href="bryantpark.html"><span><p class="title">Bryant Park</p><p class="index-title-city">New York City, <br>New York, U.S.A.</p></span><img src="images/home/BryantPark.jpg"></a></div> 
      <div class="thumb"><a href="rooftophaven.html"><span><p class="title">Rooftop Haven for Urban Agriculture</p><p class="index-title-city">Chicago, Illinois, U.S.A.</p></span><img src="images/home/RooftopHaven.jpg"></a></div> 
      <div class="thumb"><a href="greenstreet.html"><span><p class="title">NE Siskiyou Green Street</p><p class="index-title-city">Portland, Oregon, U.S.A.</p></span><img src="images/home/SiskiyouSt_Index.jpg"></a></div> 

      <div class="clear"></div> 
      <!--row 2 2nd slide--> 
      <div class="thumb"><a href="cannerylofts.html"><span><p class="title">Pacific Cannery Lofts</p><p class="index-title-city">Oakland, California, U.S.A.</p></span><img src="images/home/CanneryLofts.jpg"></a></div> 
      <div class="thumb"><a href="brownfield.html"><span><p class="title">From Brownfield to Greenfield</p><p class="index-title-city">Wellesley, Massachusetts, U.S.A.</p></span><img src="images/home/WellesleyCollege_Index.jpg"></a></div> 
      <div class="thumb"><a href="greensburg.html"><span><p class="title">Greensburg Sustainable Comprehensive Plan</p><p class="index-title-city">Greensburg, Kansas, U.S.A.</p></span><img src="images/home/Greensburg_Index.jpg"></a></div> 
      <div class="thumb"><a href="trid.html"><span><p class="title">Transit Revitalization Investment District (TRID) Master Plan</p><p class="index-title-city">Philadelphia, Pennsylvania, U.S.A.</p></span><img src="images/home/TRID.jpg"></a></div> 
      <div class="thumb"><a href="raingarden.html"><span><p class="title">Mount Tabor Middle School Rain Garden</p><p class="index-title-city">Portland, Oregon, U.S.A.</p></span><img src="images/home/RainGarden_Index.jpg"></a></div> 

      <div class="clear"></div> 
      <!--row 3 2nd slide--> 
      <div class="thumb"><a href="transwater.html"><span><p class="title">Transformative Water</p><p class="index-title-city">Pitkin County, Colorado, U.S.A.</p></span><img src="images/home/TransWater.jpg"></a></div> 
      <div class="thumb"><a href="vietvillage.html"><span><p class="title">Viet Village Urban Farm</p><p class="index-title-city">New Orleans, Louisiana, U.S.A.</p></span><img src="images/home/VietVillage_Index.jpg"></a></div> 
      <div class="thumb"><a href="hto.html"><span><p class="title">HtO Park</p><p class="index-title-city">Toronto, Canada</p></span><img src="images/home/HtO.jpg"></a></div> 
      <div class="thumb"><a href="crackgarden.html"><span><p class="title">The Crack Garden</p><p class="index-title-city">San Francisco,<br>California, U.S.A.</p></span><img src="images/home/CrackGarden_Index.jpg"></a></div> 
      <div class="thumb"><a href="kresge.html"><span><p class="title">Kresge Foundation Headquarters</p><p class="index-title-city">Troy, Michigan, U.S.A.</p></span><img src="images/home/Kresge.jpg"></a></div> 
      </div> 

      <div class="thumbnails"> 
      <!--row 1 3rd slide--> 
       <div class="thumb"><a href="greenroof.html"><span><p class="title">Washington Mutual Center Green Roof</p><p class="index-title-city">Seattle, Washington, U.S.A.</p></span><img src="images/home/WaMuRoof_Index.jpg"></a></div> 
       <div class="thumb"><a href="highline.html"><span><p class="title">High Line Park</p><p class="index-title-city">New York City, <br>New York, U.S.A.</p></span><img src="images/home/Highline_Index.jpg"></a></div> 
       <div class="thumb"><a href="redribbon.html"><span><p class="title">The Red Ribbon, Tanghe River Park</p><p class="index-title-city">Qinhuangdao City, <br>Hebei Province, China</p></span><img src="images/home/RedRibbon_Index.jpg"></a></div> 
       <div class="thumb"><a href="nuevaschool.html"><span><p class="title">Nueva School</p><p class="index-title-city">Hillsborough, California, U.S.A</p></span><img src="images/home/NuevaSchool.jpg"></a></div> 
       <div class="thumb"><a href="sonoran.html"><span><p class="title">Underwood Family Sonoran Landscape Laboratory</p><p class="index-title-city">University of Arizona, Tucson, Arizona, U.S.A.</p></span><img src="images/home/Sonoran.jpg"></a></div> 
      </div> 
     </div> 


     <!--THUMBNAILS END--> 

     <!--FOOTER--> 


    <div class="clear"></div> 
    <div id="loadMore"><p>Load more</p></div> 
    <div id="showLess"><p>Show less</p></div> 
    <div id="footer"> 
    <div class="copy">&copy;2014 American Society of Landscape Architects<br> 
    <a href="mailto:info@asla.org">Contact Us</a> 
    </div> 

<div class="nea"><img style="float:left; margin-right:10px;" src="images/NEALogo.png">This Web site has been made possible through a grant by: <a target="_blank" href="http://www.nea.gov/">National Endowment for the Arts</a>  </div> 

<div class="clear"></div> 
</div> 
</div> 

Answer 1

Проблема связана с проецирование изображения, 162x162 на обычный размер, но масштабируется до 105x105 для мобильных устройств. Это часто приводит к размытому эффекту, поскольку браузеры не являются обработчиками изображений.

Решение состоит в том, чтобы создать меньшее изображение по своему вкусу и обслуживать, например, используя медиа-запросы.