Image sizing

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Image sizing

Harvey
With the help of a forum member (sorry I forget who!)  I installed this CSS to control the size of images in my forum:

.nabble .message-text img {
max-width:700px;
height: auto;
margin-top: 5px;
margin-bottom: 5px;
}

My forum is about 760 pixels wide. By limiting the width of photos I can prevent the (annoying IMO) horizontal scroll bar.  By limiting the width to 700 wide,  the photo can be "quoted" ONCE without narrowing it enough to get the scroll bar.

Any way to use the full width (say 750) and have the photo auto-resize no matter how many times it is quoted?

Also another question - artificial means of limiting image sizes - either with the CSS above or the standard image sizes in the INSERT IMAGE menu ... it seems to make the images a little blurry.  HOWEVER if you originally SIZE the image to 750 px (or whatever) and post it with SIZE = NONE the images comes out clearer.  Why is that?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

GregChapman
The CSS you quote forces the browser to re-size an image. Getting the browser to do that is generally a bad idea, especially if the original shot was a massive file straight from a camera. The browser will still need to download the full file, and then has to do the work on rescaling before it is displayed, so not only may it take some time to appear on screen on a slow connection but to compensate browsers use the crudest, roughest, down-scaling algorithm possible. Result: blurry images.

I guess that Nabble's scale-on-upload facility uses similar less than ideal scaling technology.

Generally, dedicated image editing software will provide a much better result at scaling, allowing you to select various algorithms and options for the best result with your particular image. Uploading an image that you have prepared for output at a particular size will always be the best option.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
GregHelp - Building a set of answers to Nabble FAQs.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Harvey
GregChapman wrote
The CSS you quote forces the browser to re-size an image. Getting the browser to do that is generally a bad idea, especially if the original shot was a massive file straight from a camera. The browser will still need to download the full file, and then has to do the work on rescaling before it is displayed, so not only may it take some time to appear on screen on a slow connection but to compensate browsers use the crudest, roughest, down-scaling algorithm possible. Result: blurry images.

I guess that Nabble's scale-on-upload facility uses similar less than ideal scaling technology.

Generally, dedicated image editing software will provide a much better result at scaling, allowing you to select various algorithms and options for the best result with your particular image. Uploading an image that you have prepared for output at a particular size will always be the best option.
Greg thanks for this info it is very helpful.

Questions:

For my own use I have been sizing images to 1000 px and then choosing the 750 pixel size and that seems to work ok.

Is it BETTER to have a size that is close in size that one that is being "forced" alot  (ie I am only forcing from 1000 to 750).

Is it ideal just to export sizes the exact size they will be used?

Is there any difference between using the CSS above, choosing the sizes from the INSERT IMAGE size options or adding width="750" inline? Are those all basically the same in terms of image quality?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

GregChapman
Harvey44 wrote
For my own use I have been sizing images to 1000 px and then choosing the 750 pixel size and that seems to work ok.
On the basis of my understanding, I'd say that was good fortune rather than good practice.
Is it BETTER to have a size that is close in size that one that is being "forced" alot  (ie I am only forcing from 1000 to 750).
Well, that requires you to drop one pixel in four. I don't think there's any algorithm used that is quite so crude as to do just that. Any algorithm used must involve an element of averaging the value of adjacent pixels to calculate the three to replace the four. And it won't be just a matter of averaging. There'll be different rules if the adjacent pixels are dramatically different in colour as that is likely to represent an edge and you'll want to keep that sharp. I've never read up on this to know exactly how it's done.
Is it ideal just to export sizes the exact size they will be used?
Yes!
I can't see how you doing one, set of averaging only to allow a machine to start with a merely representative selection of pixels that approximates to the original image get it to do it again, can possibly be ideal. I'll accept that in many cases you may not be able to tell the difference - the human brain does a remarkable job in interpreting a jumble of colours on the retina. But it's got to be better to use the best tool for the job, which you retain control of than let another, and adjust it in one step to an image that is the best you can achieve with rather than rely on a machine which is probably optimised to do the conversion fast rather than well.
Is there any difference between using the CSS above, choosing the sizes from the INSERT IMAGE size options or adding width="750" inline? Are those all basically the same in terms of image quality?
Using a CSS resize relies 100% on the visitors browser.
Using the INSERT IMAGE resize relies 100% on the code Nabble uses. (Hopefully it is a better algorithm and it has the benefit that you know the results your visitors are getting. When you rely on visitor's browsers, anything is possible.)
Editing the NAML to force images to display at a given width, is only the CSS approach by another route.
Just a Volunteer Nabble Helper - because the nice folk at Nabble have helped me!
GregHelp - Building a set of answers to Nabble FAQs.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Harvey
Thank Greg.

The real issue is not how I use the forum but how others do. I can't expect forum member to stick to a prescribed method, they will just do what they will.

I really don't like the effect of images when they have been uploaded at 3000 px and you get a major scroll bar.

I'll have to figure out the ideal width and set it as a CSS max and use it.

Hugo - can you tell me what is the exact REDUCTION in width caused by ONE QUOTE?
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

DavidJCobb
In reply to this post by Harvey
Harvey44 wrote
Any way to use the full width (say 750) and have the photo auto-resize no matter how many times it is quoted?
I went to your forum and tried out the following CSS in Firefox 8. It seemed to work. Didn't test it for other browsers, though.

/* This is the CSS from your forum member, slightly 
   modified. */
.nabble .message-text img {
    display: inline-block;
    height: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    max-width: 100%;
}

/* Here, we override a default CSS rule. Without this, 
   max-width from earlier will completely break for 
   quoted images. */
.nabble div.quote {
    display: block!important;
}

Makes images use as much width as possible, without overflowing past the size of their container (post, quote, nested quote) or creating a scrollbar. Even if you change the width of posts/pages/the embedded forum, this should still work without you having to change values.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Peter <Nabble>
Greg, I agree with you, but we must remember not all users know how to do that sort of thing.
Nabble staff. We never ask for passwords.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Harvey
In reply to this post by DavidJCobb
DavidJCobb wrote
/* This is the CSS from your forum member, slightly 
   modified. */
.nabble .message-text img {
    display: inline-block;
    height: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    max-width: 100%;
}

/* Here, we override a default CSS rule. Without this, 
   max-width from earlier will completely break for 
   quoted images. */
.nabble div.quote {
    display: block!important;
}
Do I use this code to replace exactly what I posted?  
HTTPS Please!
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Hugo <Nabble>
Administrator
Harvey44 wrote
Do I use this code to replace exactly what I posted?
This post from DavidJCobb is a good solution to prevent scroll bars. You should test it in the most used browsers (FF, IE, Chrome, Safari and Opera) just to make sure it displays correctly. If this is the case, then it should solve your problem.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

DavidJCobb
In reply to this post by Harvey
Harvey44 wrote
Do I use this code to replace exactly what I posted?
Yeah. The code you posted at the top of this thread -- you'd find that in your forum CSS, and replace it with the code I've provided.

Make sure to keep a copy of your original code, and to test mine in all browsers that you have available. If my solution doesn't work in a given browser, you'll want to have the old code on hand so you can swap it back in.
Reply | Threaded
Open this post in threaded view
|

Re: Image sizing

Harvey
I did keep a copy.  It seems to work in Firefox, Safari and Chrome.

IE not sure.
HTTPS Please!