Website Images

Image Info

One of the most common mistakes made by rookie web designers is failing to optimise image files before importing them into EverWeb and making sure that their file names are correct.
Before an image is added to a web page its dimensions and file size need to be optimised.
Select the image in the Finder folder, right click it and selct "Get Info" from the contextual menu.
The image file name, file extension and file size can all be seen at the top of the menu.
To find the file width and height, turn down the arrow next to "More Info" The dimensions are highlighted in the screenshot and show that the image is 360px in width and 480px in height.

Resizing Image Files

All the images used in a website should be resized before importing into EverWeb. There is no point in using an image with a 2000px width and a huge file file size if it going to be displayed at 800px wide on the page.
Oversized images are the main reason why web pages don't download fast enough.
To reduce the size of an image file …

Double click it to launch in Preview
Click on the "Tools"dropdown and choose "Adjust Size …"
Make sure that the unit selector is set to "pixelsMake sure that the unit selector is set to "
Enter the new width or height and close the Preview window

Preparing Slideshow Images

Images to be displayed in a lightbox slideshow only need to be about 1200px wide and certainly no more than 1600px. For responsive pages that will be displayed on mobile phones, smaller is better.
Make sure the image file names have no spaces or special characters in them.

Select all the images (command + a)
Double click them to open them all together in Preview
Select all the images in the Preview window (command + a)
Select "Adjust Size …" from the Tools drop down menu
Make sure the unit dropdown selector is set to "pixels"
Enter the required grid row height into the "Height" box
Click "OK"
Save the resized image (command + s)
Now select all the images in the thumbnails folder and drag then onto the Assets List in the gallery widget settings panel to load then all at once.
Rearranged the images by holding down the mouse on an image file name and drag it up or down the list to its new position

Odd Size Images

Artists and photographers seem to want to display images with different aspect ratios. Tall skinny images perform badly in slideshows and galleries so take a tip from the professional product image guys and do the follow …

Open Keynote and create a custom slide 1200px x 800px
Drop the tall skinny image onto the slide
Center the image on the X-axis and drag it to fill the slide height
Export the image to the desktop
Process it with tinypngapp or similar
Duplicate the image and rename the duplicate
Open the duplicate in Preview. app and use the Tools menu to reduce its size for mobile devices

Compression App

Tall Image

The original image has an aspect ratio of 4:5.

Processed Image

The image after adding a background in Keynote to change its aspect ratio to 2:3