The small diary-display size for the images has two purposes:
So we decided to have a single standard (150px wide/ 40kb file-size). But, please notice this: Everyone is encouraged to use display-images as a thumbnail link to a full size image if you feel the small size doesn’t do justice to your photograph.
We know that all the resizing and linking could be difficult for some participants. And that is why the committee has worked out the details of posting images for anyone, everyone who would like us to do it for them. |
61 Comments
Please post questions here.
If something isn’t clear, I’ll answer the question and fix the diary.
Thanks!
Thank you!
. Photos in diary 150px wide/40kb
. Photos can be links to larger display photos (not in diary)
Should we make clearer that we are encouraging people to use thumbnails and not that we are suggesting that people put up very small images?
I’m not sure that the second point is clear. I’m assuming it means that the thumbnail can be a link to a larger image that is stored on some online site but that it should not be a link to a larger image in some other Booman diary.
I think we need to include instructions on how to create html that displays a thumbnail but links to a larger picure.
I played with that very issue before settling on this wording
And I’m very willing to change it.
But everything I came up with seemed too wordy and less clear.
I was thinking that maybe I could make an Annotated Image of a Sample Diary and add it below this list of bullet points.
I haven’t done it yet because I’m hoping to get an array of questions first. I don’t want to keep redoing it as questions come in.
I’m eventually going to need that too. I have to play with the HTML Firefox extension that I have… the HTML tag for making a thumbnail may already be there. I agree with Katiebird… no rush to change until questions come in.
Also Annotated Images of a Diary Notice Message and Photo Submission Message.
Just checking to see what a 150px photo displays at:
We now return you to your regularly scheduled programming…
Thanks for putting this up!
I think that’s a great size for a thumbnail… big enough to see what the subject matter is, but not so large as to cause problems.
ANOTHER TEST:
Here’s a picture of Smudge in a basket
Thanks for posting these guidelines. I will become a diarist! And what better place for it?
Here are 3 test shots of Gooserock and totos in 150-pixel-wide shots slightly shorter than they are tall, for landscape. You can see increasing detail as the “quality” level is increased.
Saved in Photoshop at a low “quality” level of 2 out of 12 for a byte size of 10 kb:
Medium quality 5 for byte size of 12 kb:
Max quality 12 for a byte size of 29 kb:
Here’s a tall photo twice as tall as wide. Although it’s 150 pixels wide, its byte size at full quality level of 12 is 50% over the limit (59 kb):
I’ll be looking forward to some great shots of autumn leaves from you midwest and easterners to fill out the pallette of blue & grey I’ll be displaying from Puget Sound.
Gooserock,
Thanks for posting these images, I know this will be helpful to people.
Maybe a modification, but I’m having trouble figuring out how to word it…150px limit on largest dimension (height or width). I need breakfast soon…
Thanks for the demo on quality. Another thing that can be adjusted in Photoshop or other programs is resolution (pixels/inch). On my digital camera, the pictures automatically transfer to my computer with a resolution of 230 pixels/inch; that’s great for printing photos, but way too big for this kind of thing. When I’m saving photos for posting on the Web, I typically will save them at a resolution of 72 pixels/inch, which is what I learned back in my HTML classes; this also helps to reduce the image size for better page loading (I took HTML back in the days of dial-up; damn, I’m getting old…).
Great tip! I had no idea how to change that… same exact thing for Paint Shop Pro. I didn’t know what that setting was for. Thank you thank you.
But in this context, and in most online uses, that “resolution” number is totally meaningless. It’s only useful when working with an output device of variable resolution. Dpi/ppi is a unit of measure, not a size. IOW a picture that’s 150 pixels on the long side will be 150 pixels on the long side regardless. If you show it on a monitor running at its native resolution, it’ll be about two inches since screen res is typically 72 DPI. If you’re running the monitor at more or less than native res, of course, the overall size will change– but your image will still be 150 pixels.
Now when you print it, of course, the size of the print will be determined by the resolution settings and the final size of the image, but as long as you’re just working on screen, it’s just a number. Stick with final image size in pixels, and you’ll find it a lot easier to work with.
Cali,
The only reasons to limit the width is because of margin issues in the site software and the display settings at home.
The committee didn’t see any reason to limit the height of photographs.
Did we overlook an issue?
Most photos are horizontal format anyway, but I don’t think that vertical pics will mess with margins.
Even at 2:1 height, the bit count was only 59 kb, not very excessive, and there wouldn’t be very many verticals.
Of course, if it was done on the Other Forum, I suppose someone would sooner or later post a full length picture of rope.
I was thinking of Gooserock’s demo, where the file size was greater than the 40KB (did I remember that right) size — maybe I was confusing the margin issue and the dial-up folks issue. Having been a dial-up person myself up till we got our new place, I’m sensitive to the issue of slow page loading…
Thumbnail linking to full size pic
Eureka!!!! Done with Firefox extension.
1. BBC code: adds formatting (BBCode/HTML, etc. to the right click drop down menu) Works quite well!
2. Yes, that’s Bella, my newest horse. She’s only been here 2 weeks, this photo was from her first day, which is why she has that raggy old halter on. We’ve bonded already… she’s a sweetie pie.
BBCode, not BBC code
Nag,
Great photo!
And it looks like the 2 photographs come from different files.
The one in the comment has a smaller file size that the one it links to.
Right?
That’s exactly what we wanted!
Katiebird, yes, 2 different files. It worked! I’m going to experiment with file sizes for the larger link. I will continue to post my experiments here. We can upload photos to the host site as well… to play with, of course. 🙂
Heading over to Mozilla for that extension; I’ll be playing with it myself in the next week, most likely…
click image for larger version
Here’s the “auto format coding” for this image:
[” < img width=150 src=http://tinypic.com/e7p5y.jpg>http://tinypic.com/e7jp5y.jpg“ ]
Remove “s marks and close-up [‘s…clear as mud…sheesh, wonder if I can do it again?
Katie, et al…thanks for the great work!
Peace
Are we looking at the same image with different display dimensions in the comment here and on the link?
I ask because it’s the file-size that matters to the dial-up users, not the display dimension.
So, it takes 2 images:
1 small to display in the diary linking to
2nd larger image.
While changing the display dimensions takes care of the display issues, the browser is still grabbing the whole file & that will slog down the dial-up users.
Yes, for this purpose…I was trying ti figure out how to imbed the link into the image. This particular image is @ 16k +- ( I don’t know how to check it other than the size that I can choose in iPhoto…don’t have photoshop.)
I am presuming that I can download a larger file to Photobucket, then use PB or Tinypic for the 150px thumbnail w/ the link to the larger one imbedded…is that correct?
PS: you’re dealing w/ a real neophyte here…blindly moving forward…Ha!
Peace
“I am presuming that I can download a larger file to Photobucket, then use PB or Tinypic for the 150px thumbnail w/ the link to the larger one imbedded…is that correct?”
That sounds right to me.
Thanks…Got it, I think. It looks like I may be able to generate thumbnails thru PB, but it’s still an experiement/learning curve for me…any hints you could pass on?
Now, back to pix selection…decisions, decisions…
Peace
I just learned how to do it with my browser, Firefox and the BBCode extension. I just get by with HTML, am still learning. Perhaps we can get someone to write it up step by step and post it. Don’t forget, you can always submit your photos to the address above in Katiebird’s diary and have someone else do all the sizing for you. 🙂
I’ve been experimenting with the thumbnails that photobucket creates to see if those could be used instead of creating new ones. There are a little larger in terms of pixels but well with in the kb size. Will we allow people to use slightly larger pixels sizes if they stay under the maximum file size?
Photobucket thumbnail linked to larger image.
Another Photobucket thumbnail linked to larger image.
Andi,
I’m kind of wondering if we could raise the display limit to 300px, but keep the kb limit.
That would give an option for people who don’t want to do the linked thumbnails. I could test out a diary like that to see how long it takes to load on a dialup.
I’d appreciate that Andi. (and it might complicate things too much to change a submission standard at this point anyway)…
It took just a little under a minute for the images to load. Each one of the 300 pixel images was about 20kb
Thanks Andi,
I think I’ve been worrying about this way too much.
It sounds like the 300px images would work, but we’ve got standards set that will work fine this time around.
But, we should keep track of this diary when we’re ready for the “Next Fair”.
This is just my opinion, of course.
you are the goddess of the photo fair and whatever you decide is “gospel”.
I’m glad you’re not worrying so much anymore. That can take the fun out of it. You knew things would have to be tweaked for the next time, I think we’re good to go.
Two things,
1 – Andi, great photos! I love them!
2 – It looks like you are displaying and linking to totally different images. A small version in the comment here linking to a larger version.
Is that right?
‘Cause that’s exactly what we want!
Click the image to see the larger version.
Excellent!!!!
Are there prizes?
Cheesecake, perhaps?
Why wait? Let’s have cheesecake now.
“Cheesecake’s” allowed?
Lana Turner :{)
Peace
I don’t know how to do this. Help! Where is my 17 year old when I need him?
Wrap the link tag around the image tag:
<a href=”bigFile.jpg”><img src=”smallFile”></a>
Does that make sense?
click to enlarge
Here’s a 300px wide thumbnail linking to an 800px image. My only problem is how to make my thumbnail adhere to the 40 kb restriction? This one is 88.8kb. I don’t know how to size it.
Nag,
This example reminded me, isn’t this why we ended up settling on the smaller thumbnail size: While the larger thumbnails are ok as far as the margins go, I think we decided that it requires too many kbs for them to look good.
I don’t know about you, but I was shocked that our chat lasted 1 1/2 hours! And I think I lost some of the details of our discussion soon after.
Your photo looks great (beautiful) at that size, but the diary would bog down if we had very many like it in here.
Setting those standards got very complicated and guess I forgot part of the decision trail.
Yes, you are right, there was a reason that we didn’t go with the larger thumbnails. The kb stuff is still fuzzy for me, that’s probably why I didn’t remember it. The chat… oh, I know. That time just flew by, we kicked around a lot of things. I think that everything is going to go just fine, you’ve certainly put a lot into it. It was fun to brainstorm.
When I download your thumbnail, I show that it is only 20kb. But the way to downsize your image is to save it a higher compression level/lower quality level.
Thank you!! That makes sense. I was a little befuddled by that.
Speaking as one who is a Photoshop wizard but an HTML dummy, could someone maybe post the complete text of a sample diary in the comments, including all the relevant auto format coding? I’m thinking about something that one could simply cut and paste, then customize.
Also, could someone list some suggestions for image hosting?
Thanks! This should be fun!
Sorry I just noticed there was an new comment in the diary.
Here’s some sample code for a thumbnail that can be clicked to go to a larger image.
Title of photo
<a href=”http://photobucket.com/albums/b25/account/image.jpg”>
<img src=”http://photobucket.com/albums/b25/account/thumbnail_image.jpg”></a>
Click image to see larger version
I use photobucket.com, some people use imagehost.com. A few people use flickr. I think they are all pretty similar.
There may be a template diary posted in the next few days.
Thanks Andi, I missed this too.
Here’s a link to a new discussion page, for anyone interested:
Froggy Bottom Photo Fair – Got Questions?