Website Images

Page download time is the main factor in potential visitors abandoning a website. As an example, if a page takes longer than 4 seconds to fully render in the browser, about 25% of the visitors will go elsewhere.
Images account for most of the bytes on an average web page that need to be downloaded by the browser. Optimising images before importing them into to the web design application will go a long way to reducing page download time

No Nay Never

First of all, the NEVER list …
Never use background images unless they are required for special projects
Never use images for shapes or to create shadows
Never convert text to images
Never use image masking. Always crop the image before importing into the app.

Preparing Image Files For The Web

Create a folder for each page of the site and drag the images and text file(s) into each one.
Create a Wireframe project in EverWeb. This is a test site which will never be published.
Drag the images onto the design canvas and adjust their size.
If the aspect ratio is not correct, or the viewable area needs adjusted, double click the image in the folder to launch it in Preview to crop it.
Once the images are at a suitable size, note the width in Metrics inspector.
Open the image in the folder in Preview by double clicking it, select "Adjust Size…" from the Tools menu, enter the required width and click the OK button.
Now the image is ready to be dragged into the Assets of the actual website project.

EverWeb Preferences

Open EverWeb preferences (command + ,), select the "Publishing" tab and make sure the JPEG Image Quality slider is set to 75%.

Formats & File Names

In general, use the JPEG (.jpg) format for all images. PNG images (.png) should only be used where transparency needs to be preserved.
Anmated GIFs and SVG images need to be inserted using a widget. Suitable widgets can be found on Image Widgets pack.
As with all files used in web design, image file names should be descriptive for the search engines. Use hyphens instead of spaces to separate the individual words and NEVER use any special characters such as an apostrophe.

Search Engine Optimisation (SEO)

The search engines cannot "see" the images so they need a text description of each one. Use keywords in the image file name, the alt text attribute, the caption and the text description.
Instead of simply dragging an image onto the design canvas, use a widget to insert the image in an HTML5 figure element which has options for a figcaption - if not a full text description. That way, the search engines know that the descriptive text is related to the image file.
The figure element looks like this …

… which shows how the image, alt text and the caption are all contained in the parent figure element to show the search engines that they are related.

Mobile Site Images

One of the main advantages of creating a separate version of the site for smart phone users is that the media files can be optimised specifically for these devices.
The largest iPhone screen in landscape mode is 736px wide so images should be 720px or less. In most cases, using @2x (retina) images is just a waste of the web designer's time and the visitors money!
Smart phones require images that are either square or portrait when viewed in portrait mode so it is essential to test all images using an actual device or the iOS Simulator to make sure that they are viewable within the screen area.