Shop Products
Houzz Logo Print
jel48

example of word wrapping with large image

jel48
17 years ago

Remember (from the post of an example of word wrapping with a small image) that the image I'm using in THIS post has been stretched to the point where it is displayed at several times it's actual size. That means you probably aren't even going to be able to recognize it as a hosta photo because the quality is so terrible. Anyway, going on.... Here's what happens when you post some text and include a large image. I'm typing several lines of text in first and am not hitting the enter key at any time until I get to the last word of text that I plan to type in. At that point, I will press the enter key twice. The first time acts as a 'carriage return' which forces my cursor to go to the next line of text. The second time that I press the enter key it will act as a 'line feed' and will put a blank line between the last text that I type in and the image. Like I mentioned in the small image example, most of you probably already know how that works but I still needed to have a lot of text to type in and this still works as good as anything :-) As I mentioned on the small image post, I'm using the same image in both this post that shows a large image and in the other one that shows a small image. The way that I do this is to copy in the url from photobucket, then right after the part that says border="0" I add width="400" for the small image or width=2000 for the larger image. This is going to make the larger image really REALLY poor quality, because it was saved in a smaller size to start with. That means that when I put in width=2000 in this post, I am streeeeeetching it waaaaaaaaaaay out! The size that each of you see the image will depend on the screen resolution that your computer is set to use. I hope the examples come out right and this shows up the way I wanted it to. And in case you were thinking that I am just rambling here, you are 100% correct. Did you ever try to think up words to type just to take up space???? It's NOT as easy as you would think! Ok, here goes... I'm pressing the enter key twice then displaying that same picture with a width of 2000 rather then 400 like it was in the other post.


Comments (8)

  • Janice
    17 years ago

    Thank you "jel" for helping us figure out how this happens!! I'm glad someone
    understands this stuff and can help those of us who don't always!! :o)

    janice

  • lavendargrrl
    17 years ago

    "The size that each of you see the image will depend on the screen resolution that your computer is set to use."

    Actually, the width="2000" that you are adding to your code is forcing the width of the image to be 2000 pixels exactly when it displays within your post, irregardless of what the actual width of the image you have uploaded to PhotoBucket is.

    The actual dimensions of the image in this example are 400 pixels wide by 300 pixels tall. Since 2000 pixels is exactly 5 times the actual width of 400 pixels, the height of your image here also multiplies by 5, making the new height 1500 pixels. Because the original image was only 400x300, the example image looks very pixelated.

    It doesn't really matter what screen resolution setting people looking at your post have on their computers - the image is going to be 2000 pixels wide by 1500 pixels tall no matter what. Now, if my screen resolution is set to 1024x768 (which is probably the most common screen resolution setting), I will only see 1024 pixels of the full 2000 pixel width of your image visible within my browser window, and I will be forced to scroll horizontally in order to see the rest of the picture. Additionally, inserting a really wide image into a post will cause people to have to scroll horizontally just to read the text in all of the posts within that thread.

  • Janice
    17 years ago

    Okay, I'm confused! Your post, Angie, has caused me to have to scroll
    all the way across my screen in order to read each sentence, otherwise
    it seems to disappear, if I don't and I miss a large chunk of your sentences!
    Why did that happen with no large pic. included?

    janice

  • lavendargrrl
    17 years ago

    My post requires horizontal scrolling because of the large (2000 pixels wide) image in the original post from this thread. Anyone who isn't inserting hard breaks within their sentences like you are will have posts scrolling off the page in the very same way (within this thread).

  • jel48
    Original Author
    17 years ago

    Angie, the point that you brought up in your response is exactly what I was trying to demonstrate. Rather then use two images (one saved with a width of 400 pixels and one saved with a width of 2000 pixels) to demonstrate what I was explaining, I chose to use a single image and just force it to display at a width large enough that it would cause most people to have to scroll to the side to see all of it.

    In my post, I also said that "The size that each of you see the image will depend on the screen resolution that your computer is set to use", meaning that the actual physical space (to simplify things maybe we should say the actual inches) taken up by a photo will depend on the screen resolution that your monitor is set up to use. I didn't want to go any deeper into screen resolution because I didn't want to get too technical.

    My post is only meant to show that a big picture in a post will cause the majority, if not all, viewers to have to use the horizontal scroll in order to read all of the text in the messages in that same thread.

    I would never normally post a picture of this size or force my small picture to display in a huge size like this, but some people don't know that large pictures cause problems. That's why I made this post.

    When I create pictures (image files) to post in GardenWeb, I normally size them so that the largest edge (whether the picture is to display horizontally or vertically (portrait mode)) is no more then 600 to 700 pixels. This size will display well on most monitors even if set to a very low resolution like 800 x 600.

  • goldedger
    17 years ago

    That explains why I have to scroll across to read some threads.

    Not everyone hits that "ENTER" key.

    I was taught typing on a "typewriter" in school......got used to doing my own editing, instead of having a "word processing program" do it for me.

    Always learning something here.

    June

  • lavendargrrl
    17 years ago

    June,

    People shouldn't have to hit the "ENTER" key when typing a post. Instead, people posting pictures should be aware of the image sizes that they are posting within the threads and not post images that are so large that they will require everyone reading the entire thread to scroll.

    As Jel was saying above, people have different screen resolution settings on their computers. I just looked up some statistics, and as of July 2006 (according to w3schools.com), 58% of Internet users have their screen resolution set to 1024x768, 17% have their screen resolution set to 800x600 and 19% are set higher than 1024x768.

    Changing your screen resolution is not too difficult, and you can play with it to see how it affects what your looking at on your computer. Here are some quick directions:

    • While your desktop is visible, right click and select Properties from the options that appear.
    • The Display Properties dialog box will appear. Select the Settings tab from across the top.
    • In the area for Screen Resolution you will notice a slider bar that you can drag left or right to change your screen resolution.
    • Once you change the screen resolution, select the Apply button in the bottom-right corner.
    • You may see a prompt that says something like "Your desktop has been reconfigured. Do you want to keep these settings? Reverting in X seconds". Select "Yes" (you can always change it again).
    • Now, open up a browser window to see the affect.

    However, knowing what screen resolution most people are using doesn't take into account that not everyone has their browser window maximized. If the window is not maximized, horizontal scrolling may be necessary even if the images are not too large.

    It is probably a safe assumption that if your images are sized to be no wider than about 750 pixels, most people viewing the thread with your picture will not have to scroll horizontally to see the picture or all of the text within the posts. Simply adding the "width="XXX" as Jel mentioned will cause the image viewers see in your post to resize, but the image that is being called from PhotoBucket (or wherever your images are hosted) is still the original size, and the file size can still be quite large. The file size is different from the actual image dimenions being viewed. Large file sizes for images can cause the posts to take a long time for people who do not have a high-speed Internet connection to download.

    The best bet is to resize your images appropriately before uploading them to PhotoBucket. You will not need to include the width code, and the actual file size of your image will be much smaller.

    ~Angie

  • bvimage
    10 years ago

    many thank to you for figuring out how to get a high quality image when we are loading image from url c#. actually i tend to draw text on image, so it is taking me so much time and i feel the image is very beautifl after doing that.

Sponsored
Winks Remodeling & Handyman Services
Average rating: 5 out of 5 stars1 Review
Custom Craftsmanship & Construction Solutions in Franklin County