23 minutes | Sep 15th 2017

Episode #21: Locating and handling graphics and photos for your Social Media and Blogs

Jim O’Reilley & Birgit Pauli-Haack discuss the value of visual content for social media and blog post. They provide solutions to the challenges content creators face locating and handling graphics and photos, from licensing and proper attribution to free images. They also talk about image quality, image weight and load speed of a website as a Google ranking factor. And lastly, Birgit & Jim go over the aspects of how a photo on the blog also becomes the eye-catcher on the social networks to drive traffic to your website. Birgit also goes off on a tangent about the creation of the Unsplash.com site as well as how long a Facebook Video should be.

Thank you to all the #nptech folks, who inquired about our #HurricaneIrma experience on Facebook, Twitter, email, Slack etc. It has been quite heartwarming and we are very grateful for everyone who reached out. Jim and I and our families are ok, our houses intact. Some screen damage and lots of yard/ landscaping damages, though.  — Birgit

Links and Resources on Handling graphics and photos

Next Episode: Episode 22

Subscribe to our podcast on your most favorite network:

Previous Episode: Episode #20: Donor Data Privacy

Transcript: Locating and handling graphics and photos for your Social Media and Blogs

Jim O’Reilley: Hey everybody, welcome to NPTechProjects, episode number 21 in our podcast series. My name is Jim O’Reilley and I’m here with Birgit Pauli-Haack. And today we’re going to be discussing graphics … Locating and handling graphics and photos for your social media and blogs. And by the way, I should make sure that you understand that this is not the teleprompter version, instead this is the non-teleprompter version, where hopefully we’ll laugh and have a little more fun with you.

The reason why this subject is important, locating and handling graphics, is that it not only attracts more readers to your website and making them stay longer, but there are legal restrictions about it and you ought to be aware of those. And we have some best sources that we’d like to share with you. And in addition to that, we’d like to talk to you a little bit about the speed of loading a graphic and how important that is to you. And I’m gonna turn it over to Birgit now, to do her introduction as to where we are.

Birgit Pauli-Haack: Well, hi everybody. Welcome back. And this has been quite a journey on the podcast for the first 21 … Our 20th episode. And we learned quite a bit. In terms of graphics, yeah, I struggle with that since the beginning of time or the web. But it’s always interesting to see what other people do with graphics and I like it. So why the topic? Eye-tracking studies show internet readers pay close attention to information carrying images. In fact, when the images are relevant, readers spend more time looking at the images than they do reading the text on the page. That’s quoted from HubSpot’s 42 Marketing Statistics for 2017.

Where can you find good photos and graphics to use?

What of places where you can find good photos? I think the most favorite place for everybody is Google and the image search on Google. And the other one is the … I think it’s the mother of all photo sharing apps, which is Flickr. And it’s still around and a lot of photos is there. Those systems have been talking about legal restrictions, so you cannot just because you find it on Google use the image on your website. The photographer or the person that posted it on their website has definitely still the rights, unless they give it up.

But Google has a … Under tools, on the top of your search is section Usage Rights is the sub header there. And there you have multiple options. So, you can use that to find the ones that you can re-use, either by modification or, you know, without attribution. And on Flickr, there is a similar way to determine the license under which the photographer has published the images. So, you can drill down on the search results as well, looking for the license, either it’s all creative commons or commercial use allowed or US government works. So, that’s how you can find photos on the internet for re-use.

There’s another site out there, it’s called Unsplash.com, which has the slogan, “Beautiful and free photos. Gifted by the world’s most generous community of photographers.” And they’re free high resolution photos. Also, you can search them and download them and then re-use for whatever you wanna do. It gives you a little snippet actually how you can attribute that on your blog post, when you say photos by and found at … That’s certainly always appreciated, but Unsplash doesn’t need you to do that. Flickr and Google, it kinda says with attribution or not. So, adhere to that.

Unsplash, interestingly enough, was actually a side project by a company called Crew, and they match up projects with developers and designers and they just wanted to get more traffic to the other website, so they created that as a side project. And I was listening to a podcast on how they built it and you will find the link in the show notes, talking with one of the founders of Unsplash on how Unsplashed.com grew so much that their first full time employee actually was for the side project and not for the other one, for the enterprise project, but that’s besides the point. And this is what you get live on podcast, I go on a tangent.

So, bringing it back. So you can … And there’s another site out there called Pexel. It gives you a overview of all available stock photos and some of them are free, some of them you can pay for. And most of them, if you use them on the web exclusively, you only … The prices are very low, they are under $10 mostly. They get higher when you use them for higher print quality, like in your newsletter or your high coffee books, coffee table books or magazines or something like that. Then they get really expensive.

But the most impact your photos will have are when they’re from your own organization. So, create an easy way for how you can store photos from all kind of places, from your volunteers, from your leadership, from other supporters. So you can collect them all and then also re-use on your blogs. That is actually my suggestion that you try to get from your events, from your … You know, just with real people in it. Stock photos always have a little bit … When you have people there, they’re a little bit distant, they’re a little bit out of context kind of thing. So, the closer it is to your story line, then the better the photo will be.

Optimized images speed up your website

Jim O’Reilley: What we wanna talk about now is a couple of things, but the first one is speed of loading and what do we mean by that? You’ve all had the experience when you’re going through Facebook or you’re going through a search on Google, where you get to a website that has an image and it just sort of freezes. And it takes time before that image actually loads, so that you can appreciate it. So, the speed of loading is very important to you and it’s very important to the people who gave to visit your site, so we wanna talk about that a little bit. And then we also wanna talk about the quality of the image, because the image that you are having someone look at strikes them in a number of different ways. It strikes them at a real psychological level, if you will, that will help attract them to wanna stay with you, to stay with your site for a little bit longer. Birgit can help us a little bit with the speed of loading and the quality of the image.

Analyze your Site Performance with Developer Tools at Google

Birgit Pauli-Haack: Sure. Load times for websites, in general, are becoming more and more important, just because Google, the big brother decided that loading speed is part of their ranking algorithm. So, Google has developed tools where you actually can measure the load times for your desktop version, as well as for your mobile version. And when you do that, you will see that, you might see and we see it quite often, that the biggest hurdle for faster loading is very large pictures that need to be downloaded to display on the website. The direct impact of those slow loading images is felt right there in your Google ranking as well.

I have always had trouble explaining a difference between the viewing size of an image that you see on your website and the actual file size of that image, because html you can kind of have an image that is as big as a picture on the wall reduced to the size of your screen size and also then reduced again to the mobile version of your website, where the image is even smaller. What you don’t see is that the file size could actually be the same, just the display part of it is smaller. And that’s kind of a disconnect that is very hard to manage for content creators that are not programmers or graphic specialists. And the content management system that runs your website helps you with that part of it.

Adjust the images file size according to need

So, first when you upload a image in the biggest size that comes from your camera, and even the photos from your mobile phones are four, five thousand pixel wide, when you look at the file size or the dimensions of the original. So what the content management system’s like word press does is on upload it also creates copies of that image in smaller sizes, so you can say, okay, the large size is 1000 pixels wide and 600, yeah, and then the next one is 600 wide and then the next one is 300 wide. And then you have a thumbnail that’s 150 wide, pixel wide. So, and those different sizes will be available for you depending on the context in which you use that image. Is it that you wrap around the text or it’s only half the size of the blog post or do you just wanna have it as a thumbnail in a group of other pictures. So, depending on the context, your content management system helps you very well, very much with that.

It’s still recommended that you, before you upload that image, you actually don’t upload the 5000 pixel wide, but only resize it to maybe 2400, half the size or even 1600, so you don’t waste so much time uploading it. So, another way your content management system helps you is the web designer actually adjusts the image size, depending on screen size with the cascading slide sheets and with code that it actually resizes the image on the file when rendering from the website. And so that’s … Your developer would do this, you are not gonna have to bother with that, but ask your developer about it, what happens with the images.

WordPress Plugins for Image compression

And then for WordPress, there are two plugins out there that help you with the compression rate. So, an image has a level of detail and when you cannot take pixels out because you wanna resize it to a smaller size, you pick pretty much pixels out which means you remove detail and then and the plugins help you with that to get to a compression rate, where it is a minimal loss of detail, limited loss of quality, with a maximum of compression. The plugin, one plugin is called Smush.it from WPMU DEV and the other one is called Imagify from WP Media out of Europe. And we will have all the links of course on the show notes, not only for those two plugins, but also for how you can test the load speed of your website.

Now, Jim you want to ask about a quality of the images. I think you mentioned that it touches the viewer on an emotional level and allows the viewer to connect, so that’s more the composition or the topic of an image. I think that would be just another podcast, we could have topic of photography. Yeah, it’s definitely a composition kind of point of view. To lead people into the image and then out of it or yeah, kind of through the image, to connect with the people in there, people connect with people, so unless it’s an environmentalist organization or a landscape kind of that wants to preserve nature, of course nature is also very appealing, but most people connect with faces in images. So, it would be good to have actually your heroes from the organization in a picture. What else were you thinking of?

Make your supporters  your heroes also in your photos

Jim O’Reilley: Well, now that pretty much answers where I was trying to go with it. You have a choice really between a very professional image that you have taken from another source that we’ve already talked about or you have the image that’s taken from your organization. As you take your donors, volunteers and staff members and make them into heroes, that is a very powerful image for the reader, because the reader or the viewer all of sudden sees people who are intimately connected with this mission and strategy of your organization, so that’s where I was trying to go before when I was talking about quality of images.

Let’s return, for just a second, to the importance of images as a whole. And I think there’s two ways to approach this, one is to talk about why viewers prefer images and what percentages are we talking from a data point of view. And then, just finally, how do we efficiently get images to social media? ‘Cause it’s one thing, as we’ve talked about, bringing it into your CMS and getting it onto your website and your blog, but then you also wanna get that image to other media. Other social media.

Why a Featured Image for every blog post is essential for social media engagement

Birgit Pauli-Haack: Yeah. So when people come to your website, you would use images, like a featured image, that the image attracts more than a headline. When people skim through, scroll through your front page, it’s almost like the social media newsfeed trains us to scroll first and then stop and see what grabs our attention. And images are so much more powerful than any text that you could put in there. Although, Facebook is actually experiment quite nicely with background of text. But HubSpot, which is a very large marketing organization, content marketing company, learned through their studies that Facebook posts that include images receive nearly three times more engagement than plain text content.

If you follow our podcast or go back and binge listen to some of our podcasts. I learned it’s a thing now that you binge listen to podcasts. And we have 20 other episodes for you. You will hear us say that your website is actually your central hub, where you post your content because you’re in control, you’re not on rented land.  Publish once and then use some of the automation or some the tools that are on your website, like a sharing button, or a publicize plugin to push your content to the social webs. And your content management system has some scripting in the background of it that identifies the particular image that belongs to your blog post and pushes that to the social media as the big image next to your sharing comments for that particular link.

OpenGraph meta tags help with Facebook and Twitter displays of your posts

The same happens when you share something on Twitter. It also shows that image on the Twitter feed. It’s very important, because everybody scrolls and if there’s an image that they like, then they stop and actually start reading the text that’s on the post. Instagram is really big now, after Instagram stole a few features from Snapchat. There is however not a easy way to publish something from your website to Instagram, because it’s a different platform and that has been our experience now that … Although you post a lot on your website, your blog post, but in between you wanna make sure that you post the relevant content suitable to the platform where you post it.

So, it might be something different because Instagram is a whole social network by and in itself and it’s actually a photo sharing site.  So although a lot of people read the comments and there is some interaction there, any link that you put in an Instagram post is not live. So, people cannot come back to your website. That’s more kind of to entice and to, okay, there is more to see and they need to go to your profile to get to that link, while they’re looking at an ad. But that’s the only two pieces where you actually have links that go to the website. But, nevertheless, the interaction and that’s another trend now is that you can certainly automate a lot of social media, but to have real impact and to connect with your followers, you need to actually be present.

And the social networks make you do this some way or other. Instagram you cannot push somebody back to your website. If you wanna interact with them, you need to be on Instagram.

Facebook prioritizes Facebook Live

Facebook does the same thing with helping you with Facebook Live. Yeah, so you need to interact with the people while they’re there, while you’re on a live video entertainment. You do a Facebook Live broadcast for 15 minutes or 20 minutes and Facebook will prioritize that kind of content, so the algorithms build so that interaction actually happens on the social network with your audience for one single reason, those social networks wanna sell the advertising and then need the eyeballs and those are your audiences as well. So, there’s that kind of few things that are not necessarily built for community building, they’re more built to make that business worthwhile, that’s the thing right now and if you wanna reach 1.5 billion people at once in some way or fashion. And if it’s only the few thousands that are connected through your website, they need to play by their rules.

So, you have the two things, both things, two birds with one stone. Put the feature image into your blog post, so it performs well on the social media and then be present on the social media, so you can connect with your audience there.

Jim O’Reilley: Thank you. That, I think sums it up pretty well. It’s … We have to remember always why we’re doing something and the significance of where we’re going and why we’re going there is what makes this kind of thing important and hopefully we’ve conveyed that to you today in a non-tele-prompted fashion as opposed to sometimes, before I get carried away the day before we gonna present a podcast and I script out a whole thing and then we throw it away and we come back with a different kind of script entirely. So, hopefully you’ve enjoyed it. For us, I think it’s a little more pleasurable and I think we get a little bit deeper into subjects that you might be interested in at the time. So, for now that’s all from me for today. We look forward to next time. And the links of virtually everything we’ve talked about today will of course be on the show notes. Bye for now.

Birgit Pauli-Haack: Yes, and if you enjoyed our podcast, leave us a review or send us an email. Yeah, we’re always happy to hear from you, the email is podcast@NPTechProjects.org. The show notes are on https://NPTechProjects.org/podcast. And this is episode number 21. Until the next time, good bye.

Jim O’Reilley: Thanks everybody.