By now you know the importance of using images in your content. Content with images is shared a lot more than content without images. You also know that you never, ever, ever just take an image from Google. Doing so puts you at risk for being sued by either the photographer or the stock photo company. If you think they won’t catch you, you’re wrong. You may get away with it 99 times out of 100, but that one time will cost you so dearly you’ll wish you could pay the fines and get images in return.
Today, I want to touch on why it’s important to watermark the images you use in your content. You’ve probably noticed that a lot of professional photographers watermark their photos, and largely, they do it to protect their work (as well as branding their business).
Why is it important?
Quite simply, the main reason you should watermark your images is for branding. I watermark ALL of my images. When people share things, they should offer attribution and credit, but 75% of the time they don’t. Or perhaps they do, but the person who shares it from them may not. If your images are watermarked, then you’ll at least get some recognition that the work is yours even if no one tags you or mentions you.
It Doesn't have To Be Fancy
Even if all you do is put your url on there, it’s better than nothing. If you don’t have access to Photoshop or other editing software, it’s super easy to do using Picmonkey. Simply go to Picmonkey, upload your image and select “text.” Then just type in your URL, size it down, and move it to one of the bottom corners! If you want to really brand it, select the “overlay” tool in the tool box, and at the top, choose “use your own.” Then, you’ll simply upload a .png version of your logo (that’s important because .png is transparent—no background), size it down, and drag it to the corner. I take it one step further and add our URL under the image.
In just those few steps, you’ve branded your images! It may take a little getting used to, but believe me, the extra effort is worth it! Want to know how to create your own watermark and use it? I have a free video that shows you step by step on how to create and use a watermark in Photoshop. You can find it here:
Resizing Your Images For The Web. Why and How !
Website speed is really important and a slow site can cost you visitors. It affects how long people stay on your site, it can cause high bounce rates, it affects where your site is placed in the search results, and Google is even testing a red ‘slow’ label for search results that will warn potential visitors before they click over to a site.
Earlier this year I ran some speed tests on my website because I had noticed that some of the pages were taking very long to load. My test site was loading in just under 2 seconds, so that ruled out any web hosting issues.
Images were one of the culprits causing slow load times.
There were about 4GB worth of images total, and after I went through and re-optimized them, that dropped to about 1.5GB.
That’s a pretty significant difference.
Sizing images for the web can be tricky, especially with high-resolution Retina displays. Every image that is added to a web page has to be downloaded by site visitors – which increases loading times.
It also increases bandwidth which can put a strain on web servers, especially shared ones – and that can drive up hosting costs.
There is no way to get around having a lot of images on a photography site, and photographers understandably choose quality over size.
So, how can you balance the need for a fast website and not sacrifice image quality? How can you load images to social media and not sacrifice quality on those platforms?
Size images before uploading them.
It will save you more time and it gives you more control.
File formats: JPEG or PNGWhen to use JPEG
JPG’s are best for photos. JPEG’s are “lossy” which means some data is discarded from the image to reduce the file size.
When to use PNG
PNG’s are best for graphics, like logo’s, background patterns and anything with a transparent background. PNG’s are “lossless” which means all the color information is retained. This also means a bigger file size but also the BEST FOR SOCIAL MEDIA.
RGB ModeBefore you save an image, make sure your Image Mode is set to RGB. Adobe 1998 and CMYK do not display well on the web. You can check by going to the Image Menu in Photoshop: Image > Mode
What IS The Best Image Size?
The size for the image will depend on what it’s being used for. You’ll want to use images that are sized appropriately for the content area or space where they’ll be displayed.
For example, the blog content area for Seniors Ignite is 650 pixels wide. We want to create an image that is sized for that space, and that is sized large enough for Retina displays.
For non-retina displays, the image doesn’t need to be any bigger than 650 pixels wide. For Retina devices however, it will need to be twice as big, or 1300 pixels wide in order for it too look good.
How To Save Images For The Web?
!Photoshop Save for Web
Photoshop has a Save for Web option that is much better for web optimization than just resizing and using the ‘Save As’ command. Here’s how to use the Save for Web feature.
First Resize the image to the size you need
Go to Image > Image Size
Then in the File menu, go to File > Export > Save For Web
Choose PNG 24, convert to SRGB, Then Save
I have included a complete resizing action which does all the work for you, in my watermark tutorial, which can be found below. I use this action daily and it is a GIANT time saver. Simply play the action, then save your image a PNG 24 > Export > save for web ! Thats it !