How to prepare photos BEFORE uploading to your website. By Karl Taylor

Articles, Blog

How to prepare photos BEFORE uploading to your website. By Karl Taylor

How to prepare photos BEFORE uploading to your website. By Karl Taylor


Hi guys, I’m Karl Taylor today I’m going
to show you what I do to my images before I put them on my website just to
make sure that they look their best I’ve got a couple of little things I do I’m
going to show you the resizing process adding copyright logo and sharpening and
I’m also going to show you how I sometimes automate that process using an
action so that I can do a whole batch of images to speed things up and I’ll show
you a couple of other script batch processing things that will help your
workflow. So this is my website, it’s a Squarespace one – I think it’s the
Wells template and I really love this particular template for the way that it
can display the images and really high quality full-size or it can show me
thumbnails. It also has you know the fact that it
resizes to any device really quickly but there are some things that I want to
apply to make sure that my image is still look their best on here because
obviously this is this is what my clients are seeing or prospective
clients are seeing and you know I really want to make sure that the the images
look good so I’ve got a batch of images in this folder that need to be put on my
websites and new ones that I haven’t added to the website yet so I’m going to
show you what I would do to an image and then I’ll show you how I batch process
that as well so for example let’s take this first image this image of debra
jumping really liked this shot and it all looks great it’s all it’s you know
it’s been retouched and finished and everything else there but it’s a tiff
file it’s hugely big and I’ve got to reduce it and convert it to a JPEG add a
copyright logo for the website so the first thing that I need to do is
to get the image to the right size because
it’s a massive 118 Meg file at the moment and I need to add a copyright
logo so I’m gonna just show you how I would do that just manually and then I’m
going to show you how to do that in a batch process so the first thing is I
change my image size to 2500 pixels on the longest side now that might sound
quite large to a lot of you oops that wasn’t linked on there 2500 that might
sound quite large to some of you but when a lot of my clients are directors
you know designers they’re using 4k 5k monitors then I need the image to be a
decent size so it remains crisp on on their screen so this is the image now at
2500 pixels it’s still a tiff but I always find that I need to give the
images a little bit of sharpening so I go into filter sharpen unsharp mask and
I apply generally 100 percent at 0.5 and if we take her we take a quick look at
that and I flick it on and off you can see now this one is from a 35 mil format
camera I shoot a lot of medium format stuff so some of my medium format work
might not need sharpening some of it I might apply just because I like the
little boost in contrast that the sharp and gives for the web but this one looks
pretty good with a half a pixel sharpen so that’s what I would apply to that
image then I’ve got the issue that I want to put a copyright logo so I press
text T to get text and I make sure I’ve got white and I click alt G which gives
me the copyright symbol then type in my name I sure don’t want that font let me
just get to Helvetica instead. Alt G, space Karl Taylor and that’s all I
do for my copyright logo now I can move it around size it I generally just put
it in the bottom right hand corner shrink it right down scale and I don’t
have it too intrusive and then I just drop the opacity right down so it’s not
so noticeable so it’s almost invisible and that’s it and then I’ll save that
image as a JPEG but I need to convert it to sRGB
so I’ve edit convert the profile from Adobe RGB which is at the moment into an
sRGB profile say okay and then that’s done and now I could save it as a JPEG
now I’ve got two options in saving this JPEG I can just file save as a JPEG or I
can use the export for web legacy one which allows me to control the quality
and look at the artifacts so for example if I drop the quality down to there I
get a much smaller file size of 106 kilobytes there which will help it load
quicker on the website but now look at the deterioration the banding that I’m
getting that’s a quality 20 so I can mess around with this now until I get it
to a quality that I think is acceptable but the file size has jumped up to 3 to
5 there but if I pull it put it at full quality the file size is 1.8 Meg so it’s
kind of like you need to look at the image and the great thing with the safe
for web legacy is you can you can have a look at the image in detail and decide
what is an acceptable level I generally find that so 65 we’re okay there’s not
too much problems if the image is a really busy image with a lot of stuff
going on in it then you might need a slightly higher quality so we’re just
going to say 17 on this one and that gets me about half the file size that I
would have had and then I can say save and then the
image is ready then to upload to the website so there’s quite a few steps
involved there in doing that and I want to speed that process up so one of the
things I’m going to do is create an action and batch process all of those
images or I’m going to show you I mean a lot of times I do do it manually one at
a time because I want to control obviously where the copyright logo goes
the opacity of the logo looking at this sort of thing but if you have got a
batch of images want to do let me let me show you how we can do that so let me
just go back in the history so that we undo all the stuff that I’ve done there
get back to the start so we’re back where we were so what I want to do then
is I want to write an action and creating an action is very simple if you
go to your window get your actions palette open my actions one is actually
open there anyway now I’m set to button mode at the moment in actions but I
don’t want button mode I turn button mode off and then I can now see all
whoops I can now see all of my actions as a list
let me just extend that out a little bit and I’ve got my Carl speed up actions
that you can see here and I’ve got loads of different actions in there I’m just
going to record a new action so I go to here and then I just say new action and
I call it ready for web for example let’s just call it that for the moment I
say record and then it’s starting to record now it’s not actually recording
right now because not doing anything it’s only to worry if it’s not like a
tape recorder recording you know a long long thing you can leave it as long as
you want any records when you actually do something so you can see the little
record light is on there and now everything that I do will be recorded so
I now want to do an image resize but turn because I’ve got landscape images
and horizontal images doing an image resize isn’t the best way to do it
so I’m going to do it different way file Automate…
and it’s fit image and I’m going to choose that I want the images to fit
constrain within the dimensions that I put in here now because I’ve used these
dimensions previously they’re already in their 2500 pixels wide or 2500 pixels
high you can also check the box don’t enlarge in case you’ve got images
smaller than that which I haven’t in this folder so I say okay now it’s
shrunk the image to that size and it’s recorded that particular part of the
process the next part of the process I want to do is do the sharpening so I’m
going to say filter sharpen unsharp mask and I’m going to add half a pixel radius
sharpening 100% say okay let’s record it back in the action the action still
recording and then I can choose to add the copyright logo so now I’ll use the
text tool because the copyright logo position and opacity will be different
for each image I’m not really too fussed about where I put it at the moment I’m
just going to click here alt G space Carl Taylor and I’m going to leave it
there and I’m gonna sort that out afterwards and then I want to say file
save and then I want to close the file and then I stop recording the action and
that is my action now ready to run now I’ve already run it on that image so I’m
going to take that one out of the folder and if you’re a little bit worried about
doing this one thing I suggest is that you duplicate the folder of images which
I’ve already done because this is a copy of that folder so duplicating it just
means you’ve got a safety buffer there now this
batch TIFF images in this folder now I can simply run that action by going file
automate batch choose the action I just created it’s already there ready for web
because that’s the last one I created choose the folder of images choose I
suppress the file open options and the color profile warning so it doesn’t stop
the process of opening the images I don’t need to choose destination or save
and close here because I’ve already said save and close in the command and now I
just press ok and then the whole batch of images will be processed and saved
and as I said I have to go back in and adjust the opacity of the copyright logo
and the position but I would about to do that done that anyway because it’s it’s
different for every image but this is just showing you how you can speed up
your process by writing actions to solve problems and make things a little bit
quicker now we could have also included or week there so that’s done now but we
could also create an action to save for web or export for web at a given
parameter of quality as well as another batch action afterwards ok so now if I
open any of these images they have been sharpened and the copyright logo is
there but I want to move the copyright logo change its size for each image now
you could have done this as an action automated but you would have had to
separate your landscape images from your portrait shape images to get the thing
in the right position and you still have to adjust the opacity manually
afterwards because some images it needs less opacity if it’s on like a dark
background and other images it’s going to need a brighter opacity
or a brighter logo if it’s on a light background so there is still some level
of manual control needed now I’m also going to show you how we can create an
alternative copyright logo so let me just show you if I go back into text
let’s say you want something that’s a little bit more permanent a little bit
more difficult to remove I’m going to choose Arial black and I’m going to make that bigger so I’m
going to edit transform scale and then now I’m going to do a different
process I’m going to choose layer layer style bevel and emboss and I’m going to
choose my bevel emboss style it’s set to emboss at the moment just going to
change the size of that bevel and emboss there and I’m going to just say okay to
that now the trick here is to then take the fill layer and knock the fill or the
fill part to zero so now I’ve got the fill to zero plus I can now change the
opacity of the actual bevel and emboss part as well which gives me a sort of
transparent sort of invisible like a stamp if you like bevel and emboss stamp
but without the white text being there as well and then I can always go into
the bevel and emboss and then change the parameters slightly of the bevel and
emboss how harsh is the size of it that sort of thing so I’m making it a little
bit crisper here just looking at the depth of it there changing that saying
okay and now I’ve got quite a crisp copyright logo that’s transparent that’s
not interfering too much for the image but it’s more difficult for someone to
remove from your image now I’m not too worried about it I’ve got my normal
copyright logo in the corner that’s enough for me but that just shows you
the protection if you want a higher level of protection on your image that’s
in another way of doing it okay so now I’ve got to get all my images ready to
export as JPEGs and as I said you can do it the way where you where you save each
one at a particular quality so I could run and record another action using the
save for web legacy command or I can use the file image processor command so
scripts image processor and then you can choose here save as an RGB save the
quality level so I could set quality level seven there convert to srgb
profile I don’t need to resize to fit because I’ve already sized the images to
2500 I’ve got my copyright info that will be embedded into the image and then
I just choose the folder so I’m going to choose that folder and I say open run
and now it’s going to make all of those images at JPEGs at the seven quality
with the srgb profile which is important for using on the web and then I’ll be
able to load those images directly into my Squarespace site really quickly which
I’ll show you as well now I’m doing it at the moment without having done my
copyright logos in the right position yet because I don’t want to waste your
time watching me do that on all of them so we’ll cut this and come back to it
and do it again once I’ve done that so they’re all done and now they’re in
the new folder called JPEGs nice and simple
now I just need to log into my Squarespace website so that’s my actual
site but I want to get into the Squarespace login for my admin so I go
to login on Squarespace choose login choose my website then go to pages
choose the page that I want to add images to so let’s start with the people
shots so I go to the people page of my website there’s a load of images there
let’s just shrink this down a little bit so I can move that over let’s arrange
this a little bit better so now I’ll grab each of the images that relate to
my people category and I simply drag those images into that block and those
images will load in to Squarespace into my templates and they’re all there now
nice and quick now I can just rearrange them so if I want this image near the
top because then a more recent image so I might say right actually I like this
image to go here and now that image is there in my website if I go to my actual
website into the people section and that image is now on my website it’s been
sharpened it’s got the copyright logo everything that I needed on it so now I
just got to rearrange the images into the order I want on the Squarespace site
which is really simple and quick I can just pick up an image and drag it to the
position where I would like that image to be displayed so let’s just say for
example on this one I want to put that there and now that image has been added
into that position on the site and that’s how easy it is and that’s one of
the reasons I love using Squarespace website because they are so quick and
simple to update and maintain and the quality of the images looks really great
so if you guys want to check out my website – KarlTaylorPortfolio.com or you want to see our education website that’s KarlTaylorEducation.com. Also remember, if you want to get yourself a Squarespace
website you can get 10% off by using the offer code KARL – thanks very
much I hope you enjoyed that

26 thoughts on How to prepare photos BEFORE uploading to your website. By Karl Taylor

  1. Hi Karl

    I cant remember how i set it up as it was about 10 years ago but there used to be a method of detecting if the image was landscape or portrait. you can then call a 2nd action based on this to place the copyright logo accordingly.

    If you adjusting the opacity etc anyway it may not be as worth while but thought you may be interested?

    Grant

  2. I appreciate this so much karl…thank you…really love to see the proper way to treat our image,..worth a subs…

  3. If adding a logo, why not provide the full resolution image? Most modern mobile browsers will even load a 100 megapixel photo natively, thus you can upload images at the native resolution of the camera, and export at 100% jpeg quality, and be confident that it will load on just about any device.

  4. Thanks Karl, nice little tutorial for preparing images for websites.
    I have a question for you regarding logos/copyright statements. So you use a small subtle copyright statements. Is there a particular reason why you make it as unobtrusive as possible (besides for when you show the images to your clients)? Some people use obvious logos to prevent theft. How much of a concern is this to you? Also, could you see a scenario where a nice logo could possibly enhance the image's looks whilst at the same time provide copyright protection?

    By the way, loving the courses on your website!

  5. Love your stuff.

    For a lot of photographers though, myself included, filesizes around 400-500 kb are not an option.
    If you get customers via search engines, you should keep filesizes as low as possible, since Google will punish your website for loading slowly.

    I usually compromise a bit on the quality of the images and keeps them relatively small in return for better search engine rankings. That seems to work for me.

    But ofc it depends on what kind of work you do and who your customers are. 🙂 In your case, I would probably have done the same 🙂

  6. Great tips, thanks! BTW I export all jpegs 100%. I then use Jpeg mini pro which significantly reduces file size while not reducing quality. http://www.jpegmini.com/pro

  7. you can do all this in 20 seconds in lightroom export tab..
    add watermark, set file size and set sharpening.. LOL you are wasting so much time

  8. Completely unrelated to this video but I just saw your new ad and had to comment. First YouTube ad that genuinely made me chuckle…. off to check out your latest offers now

  9. HI
    Mr. Taylor, I would love to fly where u are to meet you in person & also sit in on one of your class!
    are we able to make this happen ?! I would love for you to see my photography work on my IG @_RH_photography

    Thnaks!

  10. Hi Karl do you do any seminars or classes in London? I'm always learning from your videos , so much knowledge! Thank you!

  11. Thanks for sharing this tutorial, I like to ask you one question, do we need to set the height or width for the images, like you set the height 2500 px for your images, but my question is that don't we need to set different height/width for portrait and landscape images, please advise on that in little details.
    Thanks for your help.

Leave a Reply

Your email address will not be published. Required fields are marked *