Website Images - JPEG, PNG & Animated GIF
Website images use three common formats...
JPEG (.jpg) is a compressed format which gives a good balance between quality and file size. It is the most commonly used image format in web design.
PNG (.png) should only be used where background transparency needs to be preserved and its use is usually restricted to to logos, buttons etc.
Note that the shapes created by EverWeb are PNG images and should be avoided if possible by using those created with HTML and CSS .
Animated GIF (.gif) creates animation by combining several images into a GIF file. These cannot be inserted by dragging onto the page. Use any of the image insert widgets in this section to add an Animated GIF to a web page.
Image File Size & File Name
Website images are a compromise between file size and quality. The larger the file size, the better the quality but the slower the download time in the browser.
For best results, images should be reduced to the actual size required on the web page before importing them into EverWeb.
Images can be cropped in iPhoto or Preview. An excellent app for this job is EasyCrop.
There's no point in importing a 2000px wide image into a website whose page width is 980px. Resize the images to the maximum size of the slider. ImageWell is cheap and will batch resize as well as preform numerous other useful functions such as file conversion and adding captions and © notice.
Like any other file that is used on a web page, images need to have file names with no spaces and definitely no special characters. That includes the apostrophe!
Create descriptive file names for images using keywords and separate these words using hyphens.
Why Use a Widget?
EverWeb inserts widgets as the background of a div rather than using the HTML <img> tag. This has the advantage of making it impossible for visitors to rip off the images by right clicking them. The downside is that there is no way to add alt text for SEO or a descriptive tooltip via the title attribute.
These descriptions are essential since the search engine spiders cannot look at your photos. A page with lots of images and no descriptive text might as well be blank as far as the search engines are concerned.
Using the widgets in this, and the Image Effects section, allows the insertion of images with alt text, title text and hyperlinks. Some of them allow the addition of styling features such as box shadow, border and captions without creating even more download speed sucking PNG images.
For straight forward image insert with alt text for SEO, the Photo widget is the best bet.
The Photo Link widget adds the ability to create the image as a hyperlink with the option to open it in a new window and add title text which will appear in the tooltip on mouseover.
The Insert Image widget has some styling effects to add a background, border and rounded corners.
The Caption Link widget has a border created with a box shadow and a styled caption. The image can be created as a hyperlink if required.
Text wrap widgets that can zoom an image on click or expand on hover, light box widgets with or without a caption on the thumb, animated links and a hover caption widget with hyperlink are also included in this pack.