8 tips for working with website images in WordPress

Editor’s note: The following article is curated from the GoDaddy community. We’ve made some light edits for formatting and clarity. 

An important element of creating great content is understanding the basic techniques of working with website images in WordPress. The quality of the images you use on your WordPress website can either enhance or detract from not only how your site displays but whether you are perceived as a credible site to be taken seriously.

Let’s explore some quick tips that you can use when applying images to your WordPress website.

1. Stay away from clipart.

Clipart just looks tacky and it makes the website look dated. It’s best to avoid clipart if at all possible.

2. Choose images that fit your brand.

Choose graphics that relay a message or visual impression that matches your content and your brand. You need to take your choice of graphics and photos very seriously. Choose them wisely and format them properly. (If you use cheap graphics or photos that are not sized properly, what perception do you think that provides?)

3. Choose the right image format.

There are three formats you will use for website graphics. Animations and drawn images such as logos can be .gif. Photographic images are always .jpg and/or .png. If you stick to these formats you’ll have the best results.

• JPG is best for photographic images.
• GIF works for small animations, drawn logos, icons or images without any gradients. You can have a transparent background if needed.
• PNG is the best of both worlds. Great photo-level resolution that can be placed on a colored or transparent background if needed. Add styles such as drop shadows to text and PNG is the way to go.

4. Scale down or compress your images.

Photos/graphic file sizes are a huge factor in how fast your site loads. Having the highest quality images with the smallest file size should be your goal. You can experiment to find the format that offers the best looking image (JPG vs. PNG for example) with the smallest file size. Graphic programs allow you to set the level of resolution quality — which of course will increase or decrease the file size. You can also use only tools like CompressPNG or CompressJPEG to reduce your image sizes.

5. You don’t need print-resolution photographs on the web.

When using your digital camera to take photos for your website, set it at 1024×768 resolution. (If you don’t know how, check the manual.) In the majority of instances you do not need photos larger than 1024×768 for use on your site. Unless of course your WordPress theme specifically designates a larger size for a specific space.

Higher resolutions only make the file and physical size larger than needed slowing down your site. Not to mention file sizes in the thousands of pixels can cause the WordPress Media Upload process to choke.

6. When purchasing images, buy smaller image sizes.

The Web uses 72dpi, so you do not need to spend big money on high resolution photos for your website. Stock image websites sites offer low resolution photos, which are not good for print or off-line use, but they are exactly what you can use on your site.

Low resolution images are the least expensive as well. Paying big bucks for a high resolution photos to use on your site many times is not necessary. For page or post accent photos, graphics 300-600 pixels in width are all you really need. Only buy higher resolutions if you need a larger physically sized image or intend to also use off-line.

7. Never increase your image size.

When it comes to resizing photos you can always reduce an image size, but cannot increase in size from the original size without losing detail. So, you can go smaller — but not larger. Increasing from an image’s original size results in loss of resolution and a blurry photo. (Be aware that when it comes to photographs with every “save” the file quality will degrade.)

Once you know the size of the space the photo will display (WordPress theme setup instructions will always let you know specifics for image sizes), only use photos that you know will look good in that size. For example, if you have a slideshow or gallery that is set to display at 1000 pixels in width by 400 pixels in height you do not want to use a photo that is vertically oriented at 300 width x 800 pixels height.

When adding website images in WordPress always use the designated sizes and orientation used in your theme for the best results. (As a general rule horizontal orientation works best in most cases vs. vertical. Vertical images are best used when being inserted within page/post content.)

8. Make sure you have the legal right to use the photo.

Always make sure you have the right to use the photos you want. Just because you can right-click and save an image, doesn’t mean you can use any graphic you find online. Because you can view images in a search engine doesn’t mean they are yours to take and use. Big image houses now have teams of attorneys who do nothing but hunt down copyright infringers, file formal DMCA complaints and levy very large back-dated fines for illegal use of their images

Ignorance of copyright law will not be a valid excuse to avoid any penalties, so educate youtself and be careful when you are adding website images in WordPress!

If you find a graphic you would like to use on your site, you must ask the creator or site owner for permission first. If you do not get an answer — do not use the graphic. If you are unsure if the graphic or photo is free and clear for you to use — do not use it.

Now that you are aware of the above go and make your site visually stunning!

WordPress Hosting from GoDaddy includes access to thousands of beautiful free images for you to use on your site. Learn more about WordPress Hosting from GoDaddy. 

Already a WordPress Hosting? Sign in to work on your site. 

Image by: VisualHunt