Mac SEO Blog

As the saying goes ‘a picture paints a thousand words’ and this is more true today than ever before. The impact of a good image can never be underestimated so finding the perfect images for your website is worth taking some time and effort over. Images project how you want your website to be perceived by your visitors and how your visitors will perceive your site, brand, company philosophy and so forth. Choosing the right images starts with your Home, or landing page where your visitors usually have their first point of contact with your website.

Making sure that images are presented properly is very important as first impressions last. The images you use should be sharp and properly optimised so that the page loads quickly in your visitor’s browser. This is especially important when using an image as a page or browser background, in an image gallery or in a slideshow. Even images that you just drag and drop on to your page need to be properly optimized for use on the Web.

Finding The Right Images

Finding the right images for your page can be a tedious, time consuming process, but EverWeb’s Free Stock Photo library should take all the hassle out of searching for great free to use stock photos to use in your website. Just click on the Media button or use the Window-> Stock Photos… menu option to access the Stock Photo Library. Type in your search criteria and press Enter. Once you find the image you want, drag and drop from your search results on to the page. If the file is large, EverWeb will prompt you to import an optimized version that is web page loading friendly.

Alternatively, drag and drop your own image files on to the Editor Window. Again if EverWeb finds that the image will affect page loading speed, you will again see the dialog box asking if you want to convert the image to web resolution.

Customizing Images

Once you have drag and dropped you image file on to the Editor Window, you can start customizing it in a number of different ways. Use the following options with the image selected…

1. The Metrics Inspector

The Metrics Inspector is possibly the first place you want to go when customising an image file as often you will want to keep your image’s proportions fixed as they are. When you scale the image larger or smaller you will usually want its height and width to remain proportionate to each other to stop image distortion. To fix the image file’s proportions check the ‘Constrain Proportions’ box.

There may also be times where you want to flip the image left to right or top to bottom. Use the Rotation section of the Metrics Inspector tab to set these options.

2. Image Masks

If you only want part of your image to be displayed, use masking to hide the part of the image you do not want to see on the page. Masking is similar to cropping, but the difference is that masking hides the part of the image you do not want to see, whilst cropping deletes the part of the image that you do not want to see. The advantage of masking is that it allows you to change your mind and remark the image whenever you want. To mask an image, first select it then click on the Mask button in the Toolbar.

3. Shape Options

The Shape Options tab is where most image customization can be achieved. There are lots of great options that can be applied to your image. Make sure that the image is selected before applying one or more of these options:

1. Shape is the first option in the Shape Options tab and it allows you change the shape style of the image. Your image file is  probably rectangular, but you can change it to something different, for example an oval, or star shape, just by selecting the shape style that you want from the drop down.
2. The Image Fill options let you display the image in its Original Size or Stretched, Scaled to Fill, Scaled to Fit or Tiled. When using the Tile option you may find that you have to expand the image size using the grab handles so that the tiling is displayed. Using these options allows you the flexibility to display the image in a number of different ways to accommodate your page design.
3. You can also use Image Fill to change the image displayed when you mouse over, or mouse down, on it. Start by changing the Fill from ‘Normal’ to ‘Mouse Over’. From the dropdown list, change the fill type from ‘None’ to ‘Image Fill’. Select a different image file from the one you used in the ‘Normal’ state using the ‘Choose…’ button. Preview the page and mouse over the original image to see the mouse over image displayed instead.
4. Remember as well that the ALT Text box should always be filled in as this is useful for your SEO. The text that you use should describe what the image is about.
5. Use the Stroke option to add a border around the image, either using dashed, dotted or solid line, or using one of the 15 built in Picture Frame types.
6. Shadow and reflection options also give you design flexibility but generally should be used sparingly e.g. you may use a light shadow around an image which has a very light edge to it. The Opacity option is useful when you have an image that you want to be more in the background e,g. if you have text placed on top of it you want the text, not the image, to stand out. Usually an opacity of about 50% gives a nice background type of effect.
7. The last option is Animation. Again, this should always be used sparingly for maximum impact. Just select the type of animation you want and test it using Preview before publishing.

Customizing images in EverWeb is quick and easy and saves you time and effort as you can do a lot with an image within EverWeb itself.

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Google+

Flipboard

YouTube

Twitter handle @ragesw