Welcome to Part 3 of LOLSMG's ongoing Website Basics series!  In this post we will be discussing images.  No matter the type of site you have images will play an important roll so it's important to make sure you have the right images for the job.

A great website has great images. Not all images are created equally when it comes to use on a website, however.  Websites present a great problem when it comes to images. On one hand, you want to have high quality, large images, on the other hand you want your website to load quickly on all internet connections & devices. So how do you get the best of both worlds?

Start Big

If you have worked with a designer or developer they probably asked you for the largest image you have.  The reason for this is very simple, it's very hard to make a smaller image larger.  It's quite simple to make an image smaller, but when you make an image larger it gets pixelated, blurred and fuzzy.

 

Know Your Format

Beyond size there are various image file formats that you can use. The most commonly used online are .png, .jpg, and .gif.

  • Graphics Interchange Format (.gif) files are most commonly used to show animations.
  • Portable Networks Graphics (.png) they were created to replace .gifs.  PNGs allow for transparent backgrounds in images, which can be very useful in website design. They also use lossless data compression, which means allows the exact original to be extracted after compression. This means no data is lost when you are opening and closing an image which maintains a high quality image through infinite revisions.
  • Standardized by the Joint Photographic Experts Group,(JPG or JPEG) is a very common image format.  Unlike PNGs they are a lossy image format. That means every time a JPG is opened and closed it looses a tiny bit of data. This can degrade the image quality over time. It is commonly used on websites as it allows for a great amount of compression which can sacrifice image quality for faster loading images that use less bandwidth and let your site load quickly.

 

Compress & Optimize

To achieve a large, high quality image, that also loads quickly the designer must find a balance between the compression of the file, file format, and image quality. Generally images on the internet were restricted to 72 dpi (dots per inch) compared to 300 dpi or more for print photos.  Now, with better displays like the iPad's Retina display that can support higher resolutions, higher quality images can be displayed in their full glory.  Faster internet speeds, also have contributed to modern websites using larger, higher quality images. A slow dial-up modem will take a longer time to download an image than a fast cable internet connection.

Don't Forget SEO

Images inherently are not the best for SEO but that doesn't mean you should ignore them! Search engines prefer text but your images can help your site's overall SEO with just a little effort.

  • Name your file. Make sure your image has a name relevant to what the image is.
  • Use images with care. If you can replace it with text do so. This is especially true with page headings. That pretty font done in Photoshop is nice, but you could help your site's SEO by doing it with css instead.
  • Image size, bigger (within reason) is better, especially with the rise of sites like Pinterest. Make sure those images look good as pins.
  • Check your load time. Images must be optimized for a quick load time. It's not just better for your viewers but for search engines as well.
  • Alt tags!  Don't forget the alt tags. They will help SEO, and make your site more accessible to viewers who may use text or screen readers. Make sure your alt tags are descriptive.
  • Use descriptive anchor text. "link" or "here" doesn't cut it for link text anymore.  Make sure to use descriptive keywords to describe your image.

Images play an important roll in website design, function and search engine optimization.  They are one of the building blocks of a great website and can either hurt or help your site.  Knowing how to use them properly will help your site and your business.  Stay tuned for the next installment of the LOLSMG Website Basics series coming soon!