Today we are continuing to discuss using images for web design. This is part two. There are some tools which are easy to use and available online for editing images. Keep in mind that the internet displays images at a web-friendly size, most commonly at 72 dpi (dots per inch).
Always prepare the image before placing the image on the site. First, using image editing software, optimize the image to the correct size and resolution. Once this is done, the image will not be pixilated or have a “blurry” appearance and will load quickly.
Choosing Image editing software:
Choosing the correct image editing software is important as we learn to prepare images for the site. As web developers, we do prefer Photoshop but this can be expensive for small companies. There are other choices online which are more affordable and will do the job such as Snappa.
Finding the right balance is important. On the internet, a very large image can slow down the load time of your site and this is not what you want to do. If your site is a slow loading site, the visitors will be frustrated waiting for the site to load and you will lose traffic (especially mobile traffic). Much larger images are needed for print than those that are needed for a website. Some image editing software like Photoshop is a more advanced system and will automatically save images at a lower resolution. Be careful to read all the options that are included in the software you choose.
Optimizing larger images:
You will find there are situations where you would want to have a very large image on the site. This might be a header image on the home page or background images. Depend upon your web developer to add these larger images to the site. Trying to use low-quality images and enlarge them will cause them to appear fuzzy. He or she will understand how to use their programming skills to optimize the larger images without slowing down the site speed. We suggest that you stick to adding smaller images (an example would be when you add new images to blog articles). Keep them at around 300 pixels in width for fast loading. Follow the instructions already discussed.
Images sizes suggested for different web projects:
- Larger images should be no more than 1MB (megabytes)
- Small images or graphics should be around 300 KB (kilobytes) or less
- For large header images, we suggest at least 2,000 pixels in width
Image resolution:
If you are wondering what image resolution you need for website images we suggest that you always look for the option called “save for web.” This will offer a web-friendly setting. It is usually ok to crop a larger image to a smaller size. However, it is not ok to make a smaller image larger. This will cause the image to be fuzzy and pixilated. It is always a safe bet to prepare larger images. Stock images should be chosen at larger sizes to be safe.
Be consistent when adding images to the site:
As you add images to your website it is best to stay consistent in size and style throughout the site pages. This will give a more uniformed appearance and make the site look more professional. This is also recommended when you add images to the blog section of the site. Once the photos are sized and look wonderful it is time to pay attention to optimizing the images for search engines.
Optimizing images for search engines:
Make sure you rename an image (before loading the image to the site). This will not only make it easier to manage the stock photos, but it will also serve to optimize the image for search engine listings. Adding file names is especially important for product pages in the site. Stick with lower case letters when naming the images. Avoid using punctuation or spaces in the new image name. An example might be people-swimming.jpeg. Anytime you take the time to add the captions and alternative text (alt tag) you are boosting your SEO value.
Stay away from bad SEO practices:
Avoid keyword stuffing and be sure to accurately describe the images. Those site owners that add repetitive or irrelevant keywords can be penalized so stay away from this practice. Keep in mind that the target audience does read image titles and image captions. They actually pay more attention to this than the copy attached so keep this in mind. It is an important part of optimizing for search engines.
New Client website launch:
Congrats to Karen on her new website for Demetree Real Estate School. Your new site should serve you well. Thanks for choosing OWD for your project.
Thanks for stopping by today and please hurry back for more from the Design Wizards and SEO Professionals of Inside Design Orlando.
