Good Morning,
I am having trouble inserting an image. I create the image in Photoshop, save it as jpg and when I insert it into dreamweaver the image appears resized and pixelated. The funny thing is that when I go to the properties, it indicates the width and height correctly. What's going on?
Thanks
9
Replies
At 100% magnification, Photoshop displays actual pixels. However browsers on Hi-res/Retinas or 4-5K displays, will upscale to make images and text more readable. Without that extra help, a 300 px wide image looks like a postage stamp. See screenshot.
For better answers, please post the URL to your online site.
"I can't add the url because it's a project for a client."
Sure you can. Remove sensitive information. Upload a TEST page to a server-space you control which demonstrates the problem. Remove TEST page from server when your question is answered.
"But regardless of screen type, shouldn't the image look as it is exported from photoshop (without resizing)?"
That all depends on your code and your browser's settings. We're not privy to either.
In most browsers, Ctrl/Cmd + 0 (zero) = normal 100% zoom.
Meanwhile, have a look at this code. Same size images but different CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Image Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
background: brown;
color: antiquewhite;
text-align: center
}
.flexbox-container {
display: flex;
flex-direction: column;
}
/* Rules for Tablets * Desktops*/
@media only screen and (min-width: 630px) {
.flexbox-container {
flex-direction: row;
justify-content: space-evenly;
}
}
.flexbox-container > div {
flex-grow: 1;
padding: 5%;
border: 1px dotted silver;
}
img {
max-width: 100%; /**won't exceed native file size**/
height: auto;
display: block;
vertical-align: baseline;
margin: 0 auto;
}
.img-fluid {width: 100% /**will exceed native file size**/ }
</style>
</head>
<body>
<header>
<h1>XYZ Website</h1>
<h2>Lorem ipsum dolor</h2>
</header>
<div class="flexbox-container">
<div>
<h3>Column 1</h3>
<img src="https://dummyimage.com/300x227" alt="placeholder">
<p>This image is not fluid but it's responsive on smaller screens.</p>
</div>
<div>
<h3>Column 2</h3>
<img class="img-fluid" src="https://dummyimage.com/300x227" alt="placeholder">
<p>This image is fluid which may result in distortion on large, x-large screens.</p>
</div>
</div>
<footer> <small>© 2020 XYZ Website all rights reserved.</small> </footer>
</body>
</html>
AdChoices