Magnifying JPEGs viewed in Safari?

Discussion in 'Graphics' started by AES, May 2, 2008.

  1. AES

    AES Guest

    Just downloaded a gorgeous 2592 X 1944 pixel JPEG of an equally gorgeous
    Alpine scene, which opened initially at browser window size

    However, the pointer, when moved over the picture, turned into a little
    magnifying glass which, when clicked, re-centered and magnified the
    image within that window. blowing it up to what I guess was "a one
    screen pixel per image pixel" magnification.

    Haven't found any mention of this neat capability in Safari Help. Is
    this a Safari-specific feature? Does it happen automatically, or is it
    something that needs be coded into the image source, or into the HTML
    code that puts the image on a web site? Are there ways to accomplish
    the same thing in non-web viewing of images, e.g., using Preview or
    other image-viewing applications?
     
    AES, May 2, 2008
    #1
    1. Advertisements

  2. It's specific to the individual browser (it's not a system-wide
    behavior) but it's not Safari-only. I believe it came to Safari with
    version 3.
    It's entirely up to the (authors of the) individual app. Preview has a
    pref that specifies whether images should be scaled or not by default.
    So does GraphicConverter. Other apps may or may not.
     
    Gregory Weston, May 2, 2008
    #2
    1. Advertisements

  3. AES

    dorayme Guest

    It would be a very unwise thing, generally speaking, to make a webpage
    with such a large picture, (who has such a massive screen? what would
    dialup users or slow broadband think?). But given that a website author
    wants to be able to cater for large screens, he could prepare different
    sized images, from say 400px across to 1600px and simply create links
    for the user to go bigger and bigger (perhaps three or four sizes would
    suffice!).

    The advantage is bandwidth and clarity, especially bandwidth. No one
    wants to download a 2592 px wide pic if they are only interested in
    seeing it at 400px.

    But let us suppose the user knows what he is in for and wants big as
    well as small and it be *continuous* rather than in set sizes. One way
    to do this is to simply code for the big picture but put a relative
    width specification in (and hope the user does not have a screen much
    bigger than the native pic size - otherwise quality seriously starts to
    suffer). The width would be relative in percentage terms to some html
    element. The element itself might be set to be the width of the browser
    window. This works well on most Mac browsers:

    <http://dorayme.890m.com/alt/rel_sizing.html>

    Note that here, the width of the img is set to 100% width of the
    containing zero margined and padded div; the div fills the zero margined
    and padded body; and so the image which is sole content, fills the
    viewport horizontally.

    It will not necessarily fill the viewport height because the height
    specification is left to the browser to calculate, and it quite properly
    uses the natural px height of the picture file. You should never get
    horizontal scroll bars with the above, but if you play about with the
    browser window size, you will get vertical ones.

    You *can* specify for height too, but I will stop here...
     
    dorayme, May 3, 2008
    #3
  4. AES

    dorayme Guest

    Why did you ever worry about dialup? Do you make websites only for your
    family?
    This is not true for many people (not you or your family who maybe have
    superfast), even on what is broadly known as broadband. And it is
    demonstrably false when you take into account a set of pictures.
     
    dorayme, May 6, 2008
    #4
  5. AES

    The NewGuy Guest

    I never saw the beginning of this post but hopefully you're aware that
    the Opera browser rules when it comes to zooming graphics. Its the only
    browser I know of that zooms the entire page uniformly so you don't have
    that nasty "spilling over the edges" thing happening when text gets too
    big for its table. You see the page as the web designer laid it out.
    Its the only way that makes sense. http://opera.com And if you have a
    multi-button mouse that is programmable, use the features in Opera to
    make it much better. And the keyboard shortcuts! Press one key to go
    the next tab, another to go the previous tab. So many ways of making it
    just right for you.
     
    The NewGuy, May 6, 2008
    #5
  6. AES

    dorayme Guest

    Well said, I refrained from making this point so as not to sound too
    moral and goody goody... my enemies would take it as me going soft and
    gather to launch an attack. But you are quite right!
     
    dorayme, May 6, 2008
    #6
  7. AES

    dorayme Guest

    OK, a user's best chance with a badly designed webpage is that they have
    Opera! Because Opera, by this zooming, will hide the poor practice of
    text spilling out of its elements (btw, a rare thing with a table cell
    because cells are "shrink and grow to fit"... but you could have picked
    a better element where what you say is truer).

    You seem unaware of the fundamental problem, but your prescription to
    alleviate the symptoms is undoubtedly good. <g>
     
    dorayme, May 6, 2008
    #7
  8. AES

    The NewGuy Guest

    I never saw the beginning of this post but hopefully you're aware that
    Well I find that most websites are badly designed I guess. But if you
    use Opera there is no text spilling anywhere. The problem just never
    exists. For some of us with poorer vision who like large fonts, the
    ability to zoom uniformly with Opera is just like a gift from the
    Heavens. What I can't understand is why other browsers can't master
    this wonderful feature? Most websites I open in Firefox are all
    scrunched to the left side of my 1680 x 1050 monitor. Once I upgrade to
    a 1920 x 1200 that problem will be even worse, and when I get a 30" even
    worse still! I buy a larger monitor to have more space - not to have
    everything scrunched in a corner. And often in microscopic font I might
    add.
     
    The NewGuy, May 7, 2008
    #8
  9. AES

    dorayme Guest

    At the cost of text getting out of focus. From the point of view of the
    author, it is better to ensure that things do not break when the text is
    not what the author himself is comfortable with. I am not criticizing
    zoom features.
     
    dorayme, May 7, 2008
    #9
  10.  
    Gregory Weston, May 7, 2008
    #10
  11. AES

    The NewGuy Guest

    if you use Opera there is no text spilling anywhere.
    How in the world does text get "out of focus"? In Opera my text is
    always razor sharp at 1680x1050. Please explain.
    Almost every website has the same problem. Once you enlarge the text to
    150-200% it spills all over the place. Opera is the only solution to
    that if you work with large fonts. Maybe Lazik is another solution
    though.......:)
     
    The NewGuy, May 7, 2008
    #11
  12. AES

    dorayme Guest

     
    dorayme, May 8, 2008
    #12
  13. AES

    dorayme Guest

    How in the world does text get "out of focus"? In Opera my text is
    always razor sharp at 1680x1050. Please explain.
    [/QUOTE]

    If you zoom a picture up from its native px size, it will soon be
    noticeably fuzzier. We were at some point in the thread talking pictures
    of text not html text. So what I am saying certainly applies to this. If
    you are not following this part, let me know and I will explain more.

    OK, now lets look at proper html text, (not specified in pixel
    font-sizes - to avoid a side issue to do with Windows Internet
    Explorer). Not gifs, not jpgs or pngs but simply text typed into html
    elements.

    Most good browsers allow one to make the text bigger or smaller to suit
    oneself. Either on a tactical basis, page to page and using menu and/or
    keyboard commands or on a more global basis via preference settings or
    user stylesheets. These latter allow a user to avoid suffering
    impossibly small fonts as well as slightly uncomfortable ones. The
    browser simply overrides any font style settings of the author of the
    site and substitutes the user's preferred. A pretty wholesome thing, I
    hope you will agree.

    Take a look at http://store.apple.com/us (to take a Mac example) in
    Safari 2 or any browser that does not zoom the page but just zooms the
    text. The text stays crisp no matter how big it gets. Never mind that
    some of the text disappears or the design breaks (*that* is another
    matter entirely). It stays crips because the browser draws up real text
    from your fonts on your machine and uses the vector type maths to do so.
    That is the magic of real fonts, they can be scaled and remain crispier
    than chips.

    Now look at it in Opera and zoom it up and it gets blurry. There is
    nothing to explain, it gets blurry and it does so in pretty well the
    same way as pics do when blown up beyond their native pxs. There is no
    special font maths involved here. The font is treated as just a set of
    pxs and is enlarged by a crude(r) browser algorithm to be bigger. The
    blur is then the general blur that results from machines not knowing
    what is important and what not when blowing up pics. Even a classy image
    program like Photoshop does poorly when blowing up a pic, browsers are
    not any better.

    Roughly this.
     
    dorayme, May 8, 2008
    #13
  14. AES

    dorayme Guest

    [/QUOTE]
    I am so sorry, NewGuy, when I examined the situation more closely in
    Opera 9.24 I see that in fact the fonts are not zoomed like the
    pictures. It was only fonts that were pictures to start with that have
    the trouble. Sorry about this, NewGuy, really!

    What Opera is doing is a mixed blessing...


    (It is not about the screen resolution you quote, but your point about
    "staying sharp" is good - even at 1000% enlargement, real html fonts
    remain sharp as in other good browsers.)
     
    dorayme, May 8, 2008
    #14
  15. AES

    The NewGuy Guest

    if you use Opera there is no text spilling anywhere.
    If you start with low resolution of course. Start with high quality and
    it will just keep giving you more and more detail. But I wasn't talking
    about photo quality - I was talking about uniformly zooming a website so
    everything stays in perspective.
    Same with Opera.
    In Opera you can specify "Fit to width" and everything stays on one
    page.
    I can't imagine how text ever gets fuzzy. Never happens in Opera.
    Unless you start with fuzzy text of course. If you have an example of
    that, please let us know.
    Must be something wrong with your monitor. Looks fine here. What size
    and screen resolution are you using? I'm 22" at 1680 x 1050. But then
    again Apple.com has always had unsharp fonts.
    Here are pages that are tack sharp no matter what the zoom.
    http://ca.news.yahoo.com/s/capress/080506/national/auditor_main_1
    http://www.cnn.com/2008/WORLD/asiapcf/05/07/amanpour.north.korea/index.ht
    ml
    Well obviously if you start with a pic that is 300 x 200 and zoom to
    800% its going to be a blur. Start with 3000 x 2200 and blow up 200%
    and it will be tack sharp. Garbage in, garbage out. This isn't even an
    issue. Its just common sense.
    Maybe you need a better monitor. :)
     
    The NewGuy, May 8, 2008
    #15
  16. AES

    dorayme Guest

    If you start with low resolution of course. Start with high quality and
    it will just keep giving you more and more detail.[/QUOTE]

    I don't really know what you mean I am afraid. I can guess though. But I
    will wait. If you are preparing a pic for a web page, best practice is
    usually to prepare it to the px size you want. Quality has nothing to do
    with the issue of blurring in the sense that a fixed px size pic will
    blur on enlargement (whether because the res goes down as the pxs are
    spread out or because they are added to by the browser - there are no
    very very good algorithms for this, for good reasons)
    It is not good to even begin talking about a pic this size for a web
    page for normal public consumption.

    But, to be fair to you, you are touching on a technique that I have
    [played with myself. Now and then I want a pic to be able to grow and
    shrink with the text size. Under modest text size changes, this can work
    very well at least on Mac machines (I have experienced poor results on
    Windows which have tempered my enthusiasm and am still investigating
    this.).

    To make this work, and for all browsers, not just special zooming ones
    like Opera, it is best to prepare the pics to be good for folk with
    eyesight that needs a few 'notches up' of the text size. So you prepare
    a pic, to give rough figures, that will normally be seen at 300px wide
    at wider. In other words, you get your master pic, a huge one from a
    modern camera and you size it to perhaps 500px. You then specify the
    dimensions of the pics in the html in em units and not px. This involves
    a bit of trial and error if you want to give both horiz and vert
    dimensions.

    This works reasonable well because algorithms for reducing pics work
    nicely cf to the opposite (and for good reason).
    No. I have the best. A misunderstanding corrected in my last post. I
    apologise yet again. Modern Opera is quite sophisticated.
     
    dorayme, May 8, 2008
    #16
  17. AES

    dorayme Guest

    You need to be careful basing any world wide or even all America wide
    trends on your own server logs.
    What these sites do and what is good practice are not the same thing.
    Why would you jump to a demonstrably false interpretation? There is a
    simpler one staring us all in the face. That the dial up user is just as
    worthy a person as a broadband user and only the ignorant or the
    obsessively money minded website author would ignore the dial up user. I
    say ignorant because there is a way to design so that it is win win for
    all, you provide for bigger pics by linking to them. It is not an
    either/or situation.

    Designing for a win win for all is not designing for the lowest common
    denominator. This is simply distorting the picture.
    You should not be designing for any screen size. It is as simple as that.
     
    dorayme, May 8, 2008
    #17
  18. AES

    dorayme Guest

     
    dorayme, May 8, 2008
    #18
  19. Based on my webserver logs (across a varied collection of sites, most
    not written by me but hosted by me) it is well under 5%.

    The 16-17% that have dialup are not cruising around the web. They are
    getting their email and going to a small handful of sites that they
    know, and that is all they are doing. Even the very large sites like Amazon
    and Ebay are obviously not catering to the dialup user as those site have
    more and more images.
    That does that have to do with anything? Are you saying a dialup user is
    just as likely to make a purchase online as a broadband user? Because
    if so, that is demonstrably false.[/QUOTE]

    I wasn't actually talking about purchasing. I was talking about
    "visitors" about which you claimed "nearly none" are using dial-up
    connections. If you're designing a site that's hostile to dial-up users,
    you're obviously going to skew the numbers for *that* site lower. That's
    self-fulfilling.

    But, since you bring up commerce, do you have evidence to share
    supporting the idea that dial-up users are substantially less likely to
    buy online? Evidence that doesn't involve a web site that's hostile to
    slower connections?

    Absolutely true. It's a bug. Does that really matter? The practical
    result is that those pages are not getting my eyeballs (or at least not
    as frequently) until and unless that bug is fixed or obviated by my DSL
    provider ramping up the speed in my area. So as I said, it's not *just*
    an issue of dial-up users. Page size can be an issue for broadband
    users, too.

    G
     
    Gregory Weston, May 8, 2008
    #19
  20. AES

    The NewGuy Guest

    Well obviously if you start with a pic that is 300 x 200 and zoom to
    Well if you want good detail, you're going to have to opt for high
    resolution from the start. I realize this is rare - and I don't expect
    it of course. But that's just the way it works.
    If you want a graphic to maintain perspective to the text, you need to
    view it in Opera. The OS doesn't make any difference as Opera does it
    with both OS's. If there is another browser that does this, please let
    us know. Opera has many glitches and hiccups - I'd love to ditch it but
    so far haven't found anything that can work web pages with such logic.
    You mean 500 x 300? If so that's a pretty awful quality of detail. A
    minimum is 1024 x 768 I would think. Then at least its going to
    reasonably sharp at full screen size for most people.

    What monitor do you use? You say you use the best. I would then presume
    its running at 3840 x 2400 since that is the best resolution available.
    I realize that is quite specialized......so maybe you're using a typical
    30" LCD at 2560 x 1600. The Dell Supersharp is supposed to be the
    finest. Apparently both the Dell and HP models run circles around the
    Apple 30". And for way less money especially in the used arena. I've
    seen several nice Dells go for less than $750. You'd be hard pressed to
    find an Apple 30" for anything near that price.
     
    The NewGuy, May 9, 2008
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.