Images and the Web - Dendroboard

Go Back   Dendroboard > Miscellaneous > Feedback, Help Desk & Questions
Register Blogs FAQ Calendar Mark Forums Read Advertise

Support Our Sponsors
No Threads to Display.


Like Tree1Likes
  • 1 Post By Ravage

LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 04-29-2018, 06:17 PM
Ravage's Avatar
Join Date: Feb 2016
Location: Bailey, CO
Posts: 476
Thanks: 31
Thanked 65 Times in 54 Posts
Default Images and the Web

There are a lot of questions from time to time about posting images. I thought I'd give a brief briefing on images, how they work on the internet in general, and on Dendroboards in particular. I'm going to start at the beginning and get more specific as I go.

First off: What is an electronic image?
Images on the network are basically stacks of digital data. The image is broken into a grid and each piece, a pixel, is a discreet bundle of: Color information, lightness and darkness. How much information allowed for each pixel is its Bit depth. So a 16bit image has 16 bits of information for each pixel, 24 bit has 24 bits. The greater number of bits equates to more colors. 16bit had millions of colors. 24 bit is over a billion colors. 32bit is literally Billions of colors. The greater the pixel depth, the bigger the image in terms of data size.
Aspect Ratio: the aspect ratio is the width to height ratio. 1.33:1 is the old television format, also the format of older cameras. Mostly square, but a little wider than it is tall. 1.77:1 is the HD widescreen aspect ratio (16X9) and the aspect of most modern cellphone cameras.
Format: Format should be familiar from printing. Portrait is taller than it is wide. Landscape is wider than it is tall.
Image size: Image size is represent by the number of pixels, width and height. So a 5000px X 3333px image (that's a 1.3:1 aspect ration) is 5000 pixels wide and 3333 High: that's 16 million pixels! This is why pictures are such large files, that's 16 million times 16 or 24 bits. You're looking at around 5 Mb (Megabyte- 1024 bytes).
Resolution: Resolution is kind of a throw back to print days. A resolution of 300 dpi (dots per inch) is a standard for printing good quality photos. that would turn into 300 ppi (pixels per inch) on the web. Standard internet resolution is 72 ppi. Retinal displays are about 225 ppi. This is the most confusing bit, because Resolution has no impact on image size. Our 5000 X 3333 px image will not change depending on resolution, it will just become either larger or smaller on the screen- as it's resolution changes. But here's where many of our image problems come into play on upload: a 5000 px wide image will display natively on a computer screen at 69 inches wide- because of the 72 ppi standard. Ouch!

Most websites, which are actually sophisticated web applications, will downsize images on upload automatically. The main way this is done is through a server plugin called: "Imagick". It is capable of making multiple re-sized images on the fly. Thumbnails, Default size, and original. A website might have a plugin that does this work as well and is tailored to suit the needs of the particular site. Now days, there is even a greater need to create multiple sized images because: phones, tablets, laptops, Mac cinema 30" displays etc. Beacause of this sophisticated technical wizardry we take it for granted that we can upload anything and something will make it look good on presentation.
We have seen on Dendroboards that it's not always that simple. "Tis many a slip twixt the cup and the lip" as Shakespeare would say. So a little help on the uploaders end can significantly impact the image for others who want to see it in a post.

Second: How to upload a picture.
On Dendrobaoards, and really any site, there are multiple ways to get a picture to show in a post. You can upload it when composing a post, scroll down from the text screen and find the "manage attachments" button. Click on it and it will open another window that will let you browse and select the image on your device. You then need to click the "Upload" button. The attachment window is not needed anymore once you have uploaded the image. It now shows up on the composition page below where you type and above the "Manage Attachments" button. You have an image.

You can also link to an image that is already somewhere else on the web. This is what the Imajur and Photobucket folks do. Go to the image you want, on the site of choice and right click it, select the copy image location option and you have copied its URL (User Requested Link) to your clipboard. Go back to your post and click the icon above the composition window that looks like a mountain with a postage stamp to the upper right. This is the Embed image icon. It will open a box asking for the link. Put you cursor inside the box and hit Ctrl + V (Or select paste from the right click dropdown). and your link is pasted into it. A word of Caution: this box prepopulate with "http://" you need to delete that before you paste it in or you will have something that looks like: "http://". This prepopulation is basically a short cut for people who want to type the address in, it saves them some keystrokes. But not many people type in long URL's anymore. I know I rarely do, and I've been called a geek often.

But you still have that issue where large images load on the post, then they re-size and the page jumps all over the place for two minutes until all images are loaded and they re-size to fit your screen. Or maybe your linked image is tiny. How can we help this?

We can resize out images before we upload them. You don't need to have Photoshop to do this (although it helps). Both Mac and Windows have built in photo editors. Mac has photobooth, I'm not a Mac person (don't get me started) But like most Mac applications it's simple and self evident; if not really powerful.
Windows photo editing is a bit more complicated but it's there.
I am going to walk you through doing it in Windows 10. Windows 7 is similar, but since I don't have a machine that runs it on right now, follow along and Google any mysteries that appear because they are a bit different.

Go to your to the chosen image in it folder and right click it again. This time select: "Edit", near the top the list. This opens the free Windows image editor. Your image will show up inside a window with a toolbar above it. Here's your first clue as to how it's going to appear online. Do you only see a small bit of the image, or the whole thing. It will open it in it's native size. (there is a "View" Tab that will allow you to change magnification, but that road leads to madness because you might think the way it appears is the way it is: when you zoom it is NOT how it seems)
Select the tool: "Resize", for some strange reason it defaults to size by percentage. Select the choice box that says size: there's your size.
I normally make images for upload to Dendroboards around 1000- 1300 px. Wide (or high if it's in Portrait format) If you choose the width, the height will automatically adjust. Choose your size and hit: Okay.
I don't see a good way to change resolution but you know how it's going to show up: 72 ppi A 1200 px wide image is 16 virtual inches and will automatically compress on the board easily. It's those 5K and 7K wide images taken right off the phone that really play Hobb with the system, it seems.
Want to just change it into a close up of that R. benedicta? There is a cropping tool. You have to choose the "Select" button first, and then you'll get a crosshair cursor that lets you select the part of the image you want. Just set the cursor, then click and drag. After you draw a frame around it, select crop. MAKE SURE YOU CROP BEFORE RESIZING. The cropping may do the resize for you.
The thing about electronic images is you can make them smaller- but not larger. I mean, you can choose to increase the size, but your picutre will probably look crappy. You can take information away, but you can't create it out of nowhere. These images become pixelated: multiple pixels just recreate a single pixel from the original. No Bueno.
You can also type text on your picture- draw on it. Do whatever you want and then make sure you Save it.
This is not as easy to do on a phone or tablet. You'll need to download an image editing app, but lucky for you- there's a ton of them, there's even a free photoshop lite. I don't have the step by step for that, but all editors are basically the same. (Except Photoshop- it's the Bomb, but it takes time to learn it.)
Upload the resized photo as I outlined above and you should achieve photographic peace.
carola1155 likes this.
There's Bears in these here Woods. Wouldn't have it any other way.

Last edited by Ravage; 04-29-2018 at 06:20 PM.
Reply With Quote
The Following 2 Users Say Thank You to Ravage For This Useful Post:
carola1155 (04-30-2018), siteadmin (05-01-2018)

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Powered by vBadvanced CMPS v3.2.3

All times are GMT. The time now is 06:31 AM.

Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2020, vBulletin Solutions, Inc.
Search Engine Optimization by vBSEO 3.6.0
vBulletin Security provided by vBSecurity v2.2.2 (Pro) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.