CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Image use and attaching images for CSS

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

CSS in Web Studio 5 - add images for CSS in web studio - by Web Studio Next

ADDING & ATTACHING IMAGES
In Web Studio there are a couple of options for adding or attaching images to a page.
The diiferent methods depend on the type of image it is, it's size and how it is going to be used.

When you use Insert "Picture from File" Web Studio optmizes the image for the internet and changes the name.
We can't use these for CSS if something on the page changes, the name of the image can be changed
More information on inserting images in web studio can be found here:

Basics about images on a webpage. Using web studio for image optimization.
When to "insert a picture" or use "protected graphic". When to use a jpg gif or a png.
How to attach images for use with css. Make an "HTML Object" look like an Image.

One process not mentioned on the wiki is there are options for optimizing images for the internet inside web studio.
Once the image is on your page web studio optimizes it for you. The default setting is "Q2: Perfect quality with smaller size"
for the most part that is fine but with large images like those from a camera at 2800px x 2100px at 2.30MB it may not be.

This image I optimized in my photo program and attached it to the page with an HTML object, it's 6.86KB

KB vs MB
A KB is approx. a thousand bytes and MB is approx. a million bytes so you can see how image size affect downloads.
The entire simple slideshow code I made for web studio is a half a KB for example so images can add up quick.
WEBPAGE SIZE
Make your webpages the smallest download size you can, around 8 sec. seems to be the top most tolerated time.
Webpage sizes has doubled over the past couple of years (1200KB Nov/13) but I suggest around 6-800KB per page

Let's look at some examples of a small 300px x 200px picture

That same image is re-optimized by web studio at the default "Q2" setting, it's now been changed to 8.74KB

The same image is optimized by web studio at the selected "Q3" setting, it's now been changed to 5.84KB

For basic small images that you only use once or twice web studio is fine but all images still need to be optimized.
When they get above 20KB then you may want to try the web studio compression options or use
your photo program then insert them using protected graphics

Work flow on a website is hard enough

"Double Click" on your image press the "graphic button" and select a compression option from the drop down

When you "preview" you'll see them change.
You can go back and do them over until you get the balance of size to quality you prefer
What is happening is Web Studio takes what ever image you place on the page turns it into a bitmap then when it
builds the HTML it converts those into a jpg or gif and optimizes it, so for these let Web Studio do the optimizing.

For an image you have optimized or multiple duplicate images use "protected graphic from file"
We can use these for CSS
they are put in a folder called _RefFiles, which I'll go over below in attaching images for CSS.
More information on working with protected graphics in web studio can be found here:

When you place an image on a web studio page it is converted to a bitmap for manipulation
then when building the HTML the image is converted back into a jpg or a gif, renamed and optimized by web studio.
If you have optimized your image this "protects" it from being changed.

The image I optimized in my photo program and attached it to the page with an HTML object, it's 6.86KB

Let's look at that same example again of the small 300px x 200px picture

That same image inserted on
the page using protected graphic,
it's still 6.86KB

On the "Insert tab" in "Illustrations"
select the drop down arrow then
"Protected Graphic from File" button

PROTECTED GRAPHICS
There are benefits to using protected graphics. When you optimize an image in a dedicated photo program the 
control is more refined so typically you get better compression and the results you want.
Web Studio places the images in a folder so when a browser loads that image into it's cache it only needs to load it
once no matter how many times you use it on your website
, which can be a huge download saving.
The image will keep it's original name if your site has content that benefits from image search.

JPG GIF OR PNG?

IMAGE FORMATS
You can search for information on image formats and use on websites so I'm not going to get into it too heavy.
There is no magic formula it's just a compromise between the quality of the image and the download size.
These are a few basic rules of thumb.

JPG

GIF

PNG(24)

PNG(8)

Use JPG if your image uses a high number
of colors, uses gradients or are photos.
They optimize better for websites
but watch the pixilation (artifacts)
16.7 million colors

Use GIF or PNG-8 (indexed) for graphic diagrams, cartoons, text and logos with
relatively few colors.
They only support 256 colors, but
both are capable of transparency.

PNG-24 (true color) are best for gradients and shadows but they get too large for photos so just watch if you use them.
They support transparency too though.

Setting up web studio to use PNG instead of the default GIF

I prefer PNG it has better compression and I think looks better, you may want to try it?

In "Website Properties" press the "Miscellaneous button" then select the
"Use Portable Network Graphics (PNG) files" radio button

You can also force web studio to convert to a GIF or PNG

Say if you have some text with a background color so it is
a block color image that requires sharp edges.
When web studio converts it, it may use a jpg but you want a non-pixalized GIF or PNG

"Double Click" on your image press the "graphic button" and select the
"GIF" radio button

Picture from File

Protected Graphic from File

Attaching Images for CSS to the "_RefFiles directory"

You can use Web Studio's built in "protected grapics" which puts the image in a file called _RefFiles
Just remember any image put on a website
needs to be optimized.

<img src="_RefFiles/your_images_name.jpg" alt="your image" width="100" height="100">

Like the above code for example in an HTML Object but the problem with that is you have to have that image on
one of your pages. Then preview that page to see it in Web Studio. So you could put the images on a page called "images" then preview the entire site (and upload that page to the net) but let's look at some other better options.

Attaching an Image for CSS to the "root directory"

The image is put in the "root" or main folder that holds your entire site.
That way you only need to preview the page your working on to see it.

Click on "website propeties" in the "caption Bar"
If you don't see the caption bar you can
show/hide it from the
"view tab"

Select the "Attached Files"
button from the menu

Click on "Add Files To List"
and select your image,
which will get added to the list

ROOT DIRECTORY IMAGES
Attach images to "website properties" when you want to use them on different pages across your site.
They get loaded into the browsers cache and only need to be downloaded once.
Also some effects you find on the net require a root image link
("image_name.jpg") as opposed to a ("folder_name/image_name.jpg") link.

Press "OK"
to save

Attaching an Image for CSS to the "page directory"

The image is put in the page folder that web studio makes.
That way you only need to preview the page your working on to see it.

PAGE DIRECTORY IMAGES
Attach images to an "HTML Object" when you want to use them on a single page.
Web Studio makes a folder for each page and uses the "page list" name for those folders
This puts images inside that page folder which keeps the root directory less cluttered and faster

On the "Html tab"
in "Add HTML"
select
"HTML Object"

That puts the HTML
container on the page
right click for
"Properties"

Select the "Attached Files"
button from the menu

Click on "Add Files To List"
and select your image,
which will get added to the list

Press "OK"
to save

The "page directory" name when there is a space

The folder the image is put in uses the name of your page. If there is a space in the name web studio replaces
the space with an underscore
"page_name/yourimage.jpg"

Make an "HTML Object" look like an image

There is an option to make the "HTML Object" use a "place holder graphic"
so it looks like an image just while you are working in web studio
This is a handy tool for positioning the HTML Object division when working with images

Right click on the HTML Object
for
"Properties"

Select the "Place Holder"
button from the menu

Click on "Load New..."
and select your image

Press "OK"
to save

Thank-you

One more confusing thing about an image path
If you attach a CSS stylesheet to the "page directory" using an HTML object
and it has a link in the stylesheet to an image that is also attached to that "page directory"

The folder the image is put in uses the name of your page. But the link in the stylesheet needs to be
told to look in what's called it's parent directory and we do that with a dot dot slash
"../page_name/yourimage.jpg"

#IDname {background: url(../your_page_name/your_images_name.jpg) no-repeat;}

Ok, so in your stylesheet there is a background image
that you attached to the page with an HTML object, then that image link
needs the dot dot slash to point to the same directory like this:

aaaaaaaaaaaaiii