Let us help you remove obstacles to getting great images onto your site.
Have you ever felt "stuck" on what to do with images for your website? Maybe you struggled mightily with writing the content and then it suddenly occurred to you, "Shoot. What do I do for pictures now?"
Maybe you weren't sure where to get images or how to credit them. Maybe you uploaded a picture and suddenly nothing seemed to work at all. Maybe you just don't know what you don't know!
Let us help by identifying a few best-practices that will help you include images on your website with less headache and without slowing your site down to a crawl.
Here’s what’s covered in this article on using images for your website:
- Why do I want to optimize the photos for my website and what does it mean to optimize photos?
- What file type should I use for my website?
- What are the tricks to squeeze my photo file size down (or tricks to optimize your photos)?
- Where are places to optimize and edit photos online?
- How do I check my image file size before uploading images to my website?
- What file size do I need for my web pages?
- What are some free online resources for stock photos if I don’t have my own photos to use?
- What about other images from the Internet? Can I use them? How do I credit them?
1. Why do I want to optimize the photos for my website and what does it mean to optimize photos?
You want your website to be fast. When your website is fast, it makes for a better user experience. Since it makes for a better user experience, Google rewards that website with better search engine ranking.
One of the (many) ways to keep your website moving fast is to optimize your photos before you upload them. Optimize is really just a fancy way to say: make the file size smaller.
The best thing to do is optimize your photos as you go so that your site stays light.
2. What file type should I use for my website?
I like the way Janine Warner, from Digital Family breaks it down:
“The simple answer is use JPEGs for photos and other images with millions of colors, use PNG for everything else.”
That’s a great rule of thumb. If you use a png for highly colorful photos, you’ll end up with huge file sizes. This isn’t great for the speed of your website.
Knowing this is a good start and you’ll be well on your way. Below are even more tricks to lowering that file size. Choose one to try or try them all.
3. What are the tricks to squeeze my photo file size down?
This website is incredibly user-friendly. Drop your jpeg or png file (or files) onto the homepage of tinypng.com and it immediately makes the file smaller. Then, click download.
Voila. Your smaller sized file is ready to go.
Blur your Photo
Adding a blur to a photo will take the file size of your image down — and it’s a cool look. If you have a photo editor like Photoshop, you’ll want to use the Gaussian Blur. Other image editors will allow you to do a similar effect. Check out some image editor options below if you don't have a go-to.
Use an overlay on your photo
We'll make our images monochrome by adding an overlay. Plus this allows for text over the image to the main focal point. In fact, we’ll do a slight gaussian blur and add the overlay for an even smaller file size.
Go black and white with your photos
The most notable of the monochrome photos: black and white. The benefit of going black and white with your photos is that less color equals a smaller file size, and it's a cool look.
Blur only the background of the photo
You’ve seen this, where there is an image in the forefront in focus and there’s a blur in the background. Not only does this make for a nice image with a clear focal point, but, yes, it lessons the file size of your photo. Blurring the background of a photo is an option on most photo editing tools.
4. Where are places to optimize and edit photos online?
If you don’t have Photoshop or some other photo editor on your computer, there are other online tools that are user-friendly. Not all of the online photo editors are free. However, paying a few bucks can make the difference between using a tool that is intuitive and easy or using one that is "clunky."
BeFunky is a nice, easy-to-use photo editing tool that does come with a small price. Their basic version is under $3/mo if billed yearly. It’s worth the cost to have a tool that works well!
You can use any of the photo techniques I mentioned above using this service. The cost is small, if you’re working with a lot of photos, but don’t quite need all the functionality of Photoshop, this tool gives you everything you need without headaches.
Canva is a free photo editor that is most known for building social media photos. However, you can use it to try some of the optimization techniques above.
Since their service is built for social media usage, their default file sizes are for social media sharing. However, you can also start with a custom file size, upload your image, and begin editing. Shown below:
Pixlr is a free tool that can be used online. It has more functionality than canva.com but a steeper learning curve. This option is best if you have a beginner’s understanding of photoshop type tools.
5. How do I check my image file size before uploading images to my website?
Have you ever wondered how to check the file size of your photo? Depending on whether or not you have a Mac or a PC, you have a couple different options, but I’m going to give you the option I use most on Mac and PC:
Checking the file size of an image from your Mac:
Right-click on the photo you’re interested in learning about and click, “Get Info.” A dialogue box will pop up that will give you all the information about the graphic.
Checking the file size of an image from your PC:
Right-click on the photo and click, “Properties.” Then, click the “Details” tab. In the file section, you can view the image file size.
6. What file size do I need for my web pages?
It’s hard to give an exact number for file size. The general rule of thumb we use at Magnified Web is to keep all of the photos for one web page under 150kb. (This is not always possible depending on the visual content we want on our page. We are able to maintain this for the majority of our blog posts)
Lisa Garner, co-owner and web architect for Magnified Web had this to say about file sizes for a page:
Visual quality is my first priority when I plan a page with images. It’s a good idea to think about one general area that will be the graphical focal point of the page.
The focal point of the page is where I need the graphic to be of highest visual quality, thus a larger file size. On other areas of the page, I can afford to use smaller file sizes. Once you have developed the page layout, planning the file sizes of the images is much easier.
Once the image is on the website, I may still need help to reach the 150kb goal for a page. I use a plugin called ShortPixel Image Optimiser. The brief video embedded in this link will give you insight to what this powerful plugin will do. My favorite feature is that if I don't like the optimized image quality, I can easily, with a click of a button, restore it to its original version.
ShortPixel is VERY intuitive and easy to use out of the box with default settings and it's free for up to 100 images a month. Just install and activate! Easy peasy!
Check out the example below of an image before and after optmization. You can use the slider to get a better view of each image..
- Before ShortPixel: 55kb
- After ShortPixel: 33kb
7. What are some free online resources for stock photos if I don’t have my own photos to use?
The resources below are free and have a CC0 license. A CC0 license (Creative Commons Zero) means you have free reign to do what you like with the photos. They are a gift from the artist.
(See the Creative Commons website for a full list of licenses and your requirements for using the work under each license.)
8. What about other images from the Internet? Can I use them? How do I credit them?
An artist may tell you how they have licensed their work under creative commons which allows you to use the work following specified parameters. For example, the artist may provide an attribution license which means others can use, display, and create derivative works as long as correct attribution is given to the artist. Check out a brief overview of these licenses on Flickr, or head to the Creative Commons website for an in-depth understanding.
When no license is given:
If you see an image on another website that you'd like to use and there's no information about how the work is licensed, but you know who created the image, you should contact the creator and ask for their permission to use it.
If you don't know who created the image, you can try using tinyeye.com to do a reverse image lookup.
If you come up short on the above: Don't use the image. It's better than the alternative scenario where you get a nice little letter from a lawyer.
Let us know if you have more questions about using images on your website. We love answering questions that make you more successful!
Join the community and receive insightful tips.