Skip to main content
beterlaatdannoglater
Known Participant
May 10, 2017
Answered

Pictures are bigger on my website than in Dreamweaver : loss of sharpness

  • May 10, 2017
  • 4 replies
  • 2438 views

When I see my pictures in Dreamweaver, Photoshop and Bridge they are very sharp (made with Fujifilm X-T2). But when I make them smaller because I have to publish them on the net, and give them a width of 1250 pixels and publish them with Dreamweaver, their sharpness is bad. They look much bigger on my website than in Dreamweaver. How can I fix that?

    This topic has been closed for replies.
    Correct answer Nancy OShea

    looking now for some kind of manual


    Did you read the Documentation on their website?

    At it's most basic, copy & paste the following code into a new, blank document to test.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Fancybox 3 Demo</title>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--fancybox latest minified CSS-->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css"/>

    <style>

    .center-block {float:none; margin:0 auto; width: 80%;}

    </style>

    </head>

    <body>

    <!--fancybox gallery-->

    <div class="center-block">

    <a data-fancybox="gallery" href="https://dummyimage.com/500x325/000/fff.jpg&text=Image+1" alt="fullsize image"><img src="http://dummyimage.com/175x114" alt="smallsize"></a>

    <a data-fancybox="gallery" href="https://dummyimage.com/500x325/fff/000.jpg&text=Image+2" alt="fullsize image"><img src="http://dummyimage.com/175x114" alt="smallsize"></a>

    <a data-fancybox="gallery" href="https://dummyimage.com/500x325/000/fff.jpg&text=Image+3" alt="fullsize image"><img src="http://dummyimage.com/175x114" alt="smallsize"></a>

    <a data-fancybox="gallery" href="https://dummyimage.com/500x325/fff/000.jpg&text=Image+4" alt="fullsize image"><img src="http://dummyimage.com/175x114" alt="smallsize"></a>

    </div>

    <!--jquery latest minified js-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!--fancybox latest minifed JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

    </body>

    </html>

    4 replies

    Nancy OShea
    Community Expert
    Community Expert
    May 10, 2017

    I should also mention that when I zoom out in my browser, your background image does not fill the screen.  See screenshot.

    Nancy O'Shea— Product User & Community Expert
    beterlaatdannoglater
    Known Participant
    May 10, 2017

    my URL: Stellingloop: doorlopend het laatste nieuws

    look at the link foto’s

    Jon Fritz
    Community Expert
    Community Expert
    May 10, 2017

    The image looks fine to me, 1000 x 667 pixels @ 72 dpi.

    Since the images aren't in a responsive lightbox, and shouldn't be visually any larger than what you're seeing in DW, I would check your browser zoom level under View > Zoom and reset it if it's above 100%.

    Nancy OShea
    Community Expert
    Community Expert
    May 10, 2017

    What's the URL to your site? 

    The answers are in your code.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    pziecina
    Legend
    May 10, 2017

    The size of your image will depend on the size of its containing element if no size is set in the css, or on the size set in your img elements pixel dimensions, which are optional in html5, as it is recommended to use css to set the size.

    If your image expands beyond the intrinsic size given in the images meta data, then the image quality will deteriorate, it could also be that you have mistakenly used a 'save for web' feature in your image editing software, and it has saved your image at 72ppi, (the default web ppi is 96) but you are viewing the image on a hi-dpi screen.