News
Images Make the World Go Round
Don’t Get Caught up in Large Image File Sizes!
Nothing makes a website page pop more than that perfectly placed image. When it is just that right one it really does speak a thousand words.
Not only do large file sizes slow down your user’s page loading experience, but they can also cost them data if they are mobile browsing. And that is just plain mean.
Whenever I am developing a size and have to place images, whether for icons, backgrounds, content photos, or large banners I strive to get the smallest file size possible while still maintaining acceptable image quality. Sizing a big file to a smaller size is not worth it if your resultant image looks terrible!
As a general rule of thumb, we typically aim for:
Always keep in mind how many other images are on the page and if you have a carousel on your pages remember to factor in a number of slides you have. With carousels, testing has shown that users generally don’t get past the first slide. Try to limit a carousel to three images, as it is unlikely that the later ones will be seen or acted on.
Preach Best Practices
Remember your site should be efficient and optimized to provide optimal page performance. When it is time to turn things over to the client they need to be informed on best practices of using images with their content (if they are going to be the ones to add and edit content).
It’s easy to not be aware of the toll large files take on website traffic! It’s also possible that you want to optimize your large files but just don’t have tools available to do so.
One of the biggest mistakes is uploading a full resolution image (e.g. photo at 2400px x 1800px) and then placing it on a page and resizing it to 240px x 180px. While it appears to be resized, the browser still downloads that 2400×1800 size image file and then displays it at 240×180. That original file can easily be 2MB when an optimized image would be 50KB or better yet 20KB. That is 40 times smaller, and even with today’s fast internet speeds, there is a noticeable page load delay for those images and data usage on mobile devices.
Making a good impression on a potential client’s visiting your website is imperative. You know what they say “you only get one chance to make a first impression.” With the plethora of options available on the internet if your site is taking too long to load a user will just bounce to the next search result.
Time is Potential Money
Having a dedicated person to optimize images for your site is great. They will have the tools necessary to optimize an image and size it just right. Unfortunately, that is not always an option for website owners.
Here are just a few quick tips for optimizing images if you are a DIYer:
- Firstly crop and resize your image to the size you need it on the website. You may need to try a few times before you are familiar with how big you need to make it in terms of pixels, but it is well worth the effort and soon enough you will recognize you need 250×250 or 120×80 on your site instead of uploading the full 1200×1200 image.
- After you have your image set to the correct resolution size you’ll want to save it as optimized for the web. I primarily use Photoshop and they have a great built-in feature for this. I’m sure other programs have it too. You may have to look in the File drop-down menu for something like “save for web” or “export to web” and then play with any options they have in there for quality and file type until you have one that is acceptable.
- Save as the best file type. The three main types are JPEG, GIF, and PNG. There is also SVG making a rise, but that is a different animal altogether.
- JPEGs are typically best for photos
- GIFs do well for things like with limited colors and less variation, like logos or solid color blocks
- PNGs are the go to when you need to have a transparent background, just be mindful of the file size as it can creep up
As with everything, there are exceptions to these rules so play around and see which is best for your specific image!
Helpful Tools:
- Two online compression tools that I have had success with are TinyJPG and TinyPNG. They are particularly useful if you have a larger image that you really need to get smaller but Photoshop just isn’t cutting it.
So make the world happy and use optimized images!