CODEWITHSUNDEEP
iphonehtmliosimage
Kisuk Park
Kisuk Park

Reputation: 100

images in html img tag become blurred on my iPhone application

My iOS Application contains some .html files, .jpg files in project itself. And show them via webView. My image files are high-resolution but when it added to html files with tag and check them with iOS simulator zoom in... images became blurred so that I can't read text on them.

<!DOCTYPE html> 
<html> 
<head>
<title></title>
<meta name="viewport" charset="utf-8" content="initial-scale=1.0; maximum-scale=20.0; user-scalable=yes">
<link rel="stylesheet"  href="style.css" />
<link rel="stylesheet" type="text/css" href="m.ritz.css"/>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="scrollview.js"></script>
</head> 

<body>          
 <img src="tong.png" width="500"/>
</body>                         
</html>

My code has nothing special... But I can't find the reason... help me~

Upvotes: 2

Views: 1765

Answers (1)

Roja Buck
Roja Buck

Reputation: 2354

You appear to be setting a specific width (resolution) for the image within the HTML. If the stored image has a greater resolution than that requested, the browser will down-sample the image to the requested resolution. This process can introduce image artefacts, blurring etc.

Try creating an image file which is equal in resolution to that which you wish to display. This should remove the need for the browser to reps ample the image leaving you with a nice sharp image.

Upvotes: 1

Related Questions