As I promised in my previous post, here are some tips on optimizing your images for websites so that they load faster and still look good. Let’s face it, you can’t have a website with all copy and no images. Most creatives need to showcase their work on their websites, and this means online portfolios. It would be great if we could all upload high resolution images so that they show up really clear and crisp, but the downside is that this will slow down loading speed. Let’s not assume that site visitors will all have the patience to wait for several seconds for your images to load while they browse your site. Most of them won’t even bother. Your bounce rates will be high, and your SEO will also be negatively affected.
So what do we do?
Here are a few tips that have worked for me:
- Use jpegs as much as possible. They are perfect for photographs, and you can vary the image quality and file size.
- Use PNGs only if you require transparency and high image quality. (Like your logo, for example.)
- If you need to show several huge images (like full width banners and sliders) and want to speed up loading time, run jpeg images through an image compression service, like compress jpeg.
- Save the image in the right dimensions. If your website needs an image to be 1280px wide and 800px tall, save it at that exact size.
- Save for web. This is a great function on Photoshop. Open the image and click save for web, choose the correct dimensions, and save it at the lowest file size possible without sacrificing image quality too much. 72dpi or 60dpi will usually work nicely. For best results, try to get the file size to not exceed 1mb. If the image is really important to you, you can increase the file size a bit.
- For images that are already on your website, you can run them through image optimization plugins, like EWWW Image Optimizer. The plugin can also optimize new ones you upload.
Do you have any other tips on optimizing images? Or have any questions? Do share in the comments!
