In this video, I'm going to run through the techniques,
software and free software that you can use to resize your images.
We'll look at my recommended sizes and settings for various social media
platforms and what i consider to be most
appropriate for your website.
After spending hours planning and styling your shot,
getting the lighting just right and adding the final touches in
post-production, the next step is to upload your images
to your online portfolio or social media. Part of this process is resizing your
images. As camera megapixel sizes steadily
increase with advancing technology, some images can be upwards of 600
megabytes on a flattened TIFF. So there is, of
course, a need to reduce file sizes for website display
or they would take many minutes to load one image.
The terms image size and file size are easily confused
but it's important to understand the difference. Image size refers to the
dimensions of the image, the width and the height
and is measured in pixels. File size refers to the amount of
space an image takes up as data on your computer,
hard drive, or memory card. This is measured in kilobytes,
megabytes, or gigabytes. The objective for images being displayed on your
website is for them to look good but to be low in file size for quicker
loading on a page. Regardless of what software
you're using to resize your images, there are a few key things you'll need
to adjust, to change the image and file size.
Here are the key points you need to consider when it comes to reducing the
file size of an image.
File format. The first is file format. Most websites and social media platforms
accept JPEG, PNG or GIF files,
though JPEG is the most common across the web
as it provides high quality and relative low
file sizes. A new format for web images is WEBP,
although this hasn't been adopted widely yet, but does
show promise for even smaller file sizes and quicker loading speeds in the future.
Image size. The recommended image size for web use is largely dependent on
where and how they are going to be displayed
and is often between a thousand and two thousand five hundred pixels on the
longest edge. While the recommended file size should
be no more than a few hundred kilobytes, keep in mind where the image will be
used and what size container it will be placed in.
That's the area that it will take up on the page
within its surrounding border. Adding images that are too large may negatively
impact the load speed of your website but adding images that are too small
will result in a fuzzy-looking mess. It's also worth
considering your target audience and the devices that they may be using
to view your images. For example, many art directors, graphic
designers, and ad agencies maybe using 30 inch, 4k monitors
and even some home users have 4k iMac screens. Even the top end iPads
are nearly 3K resolution. As my target audience
are likely to be viewing on these higher resolution screens
I opt for 2500 pixels wide or 2000 pixels high images for
uploading to my website. At that resolution I can maintain
reasonable data sizes but high enough visual
quality on 4K monitors. DPI and color profiles. DPI or PPI, which
means dots per inch and pixels per inch, often
add confusion for people resizing their images
but these do not influence the web display of an image.
They are only relevant when printing images as the printing devices read the
information of how many dots or pixels to put down
for every inch of paper with web-based images you only really need to concern
yourself with the total pixel dimensions. For color profiles, I recommend sticking
to the SRGB color space for using images online.
Resizing in Photoshop. So let's take a look at some options on
how to resize your images for web and social media.
For Photoshop it can be done in just a few simple steps.
1: Image size. To start you'll need to change the
image size. To do this go to image, image size, once you've changed the width,
height, resolution and re-sample settings, you can see the new image size at the
top of the dialog box, click ok. I explain
in detail the resampling options in the class on Karl Taylor Education but if
you prefer you can just change them to see the
results live. Next number 2: Export. Once you've
resized your images go to, File, Export and here you can choose
either Export As or Save for Web.
The Save for Web is the method many users may
already be familiar with, but Adobe also introduced the Export As feature in
Photoshop CC in 2015. For those unfamiliar with either
way, both allow you to do basically the same
thing, though the newer Export As option does have a few extra features.
Here I'll explain how to resize images using the Export As feature.
Start by selecting your format PNG, JPEG or GIF, next select the
image quality. The higher the quality, the larger the file size. Here you'll have to
decide whether you want to prioritize reduced file size or higher
image quality and find a balance between the two.
Remember, if you keep re-saving from a JPEG,
you can run into image quality problems so it's advisable to make your high
quality JPEG from a non-compressed image.If you
skipped step one, you can also change the dimensions of
your image and the resample settings here as well.
Export As, also allows you to adjust the canvas
size of your images, this is something you can't do with the
Save for Web option. Next, you can choose whether to embed the
metadata of the image and what color space you'd like once
you've changed the relevant settings. All that's left to do is click Export,
select where you'd like to save the image to,
and click Save. Remember you can use the preview
window to see how each adjustment influences the
overall image, this can be particularly useful when adjusting the quality.
You can also see the image size on the left hand side of the dialog box,
along with the file type, and image dimensions.
This updates as you make changes and is very useful
if you're aiming to get your images down to a particular file size.
It's also worth noting that this process could be automated using Actions
so that you can batch process lots of images.
We cover creating actions on Karl Taylor Education.
Resizing in Lightroom. Once you've made the necessary adjustments to the image
that you want to upload, go to File, Export.
This will open your images in the export window
where you'll see custom options down the right-hand side of the window,
each of which cover similar processes to those you would have gone through
using Photoshop. Previously exporting images in Lightroom
opened a new dialog box where you could specify a number of customizations
including: export location, file naming, file settings, image sizing, output
sharpening, metadata, watermarking, and post
processing. In the newer versions of Lightroom the
export function is much simpler to export your image. Go to - File,
Export, this will open up a new window where you can select the file type,
dimensions, and quality. You can also choose from further options which
include the metadata, file naming, output, sharpening, and color space. Once you've
made the desired changes, click Export Photo, choose the file
destination, where you want to save the image and
click Export. If you're resizing images to a certain
size, you can see the file output size at the bottom left of
the window. Resizing using other software and free
software. Luminar is a popular editing tool for
photographers and unlike Adobe software it is
available for a one-off fee. Developed by Skylum, Luminar is a bit of
a mix between Photoshop and Lightroom, allowing you to work with layers and
masks while also offering a number of filters and preset
adjustments. To resize images, go to - File, Export.
This will open a dialog box where you can name your image
and select the file destination. You can then select
low, medium, or high sharpening, or none. To resize the image, select which option
you would like to change from the resize drop down menu and enter
the new dimensions accordingly. Then select the color space, format and
quality you want, once done click Save. GIMP is a free photo open source editing
software considered by many to be a good alternative to Photoshop or
Lightroom for those wanting to make adjustments to
their images. Although it doesn't offer nearly as many
features as Photoshop, it does offer an impressive range of
tools, though it does come with a steep learning curve.
To start go to - Image, Image Scale. This is where you would change the width
and height of the image, once done click Scale. Next, go to File,
Export As, this brings up the export image dialog
box. Here you can set what you want the file name to be
and where you want to save it. You can also choose the file format
by clicking Select File Type then clicking
Export, this will bring up another dialog box
where depending on what your file format is you are able to make the adjustments
such as the quality of your image and what metadata you want to include. To
finish click Export. These are just a few of the
softwares you can use to prepare your images for
web. Of course you can also use your camera
editing software too. Most camera manufacturers offer a free
photo editing software which will offer basic features for this.
Regardless of which one you use, the key thing to remember is finding the right
balance between the file size and the quality of the image. If you're
looking to resize your images for print you can find the techniques that i use
to enhance reproduction quality in this video here on
KarlTaylorEducation.com. Resizing for social media.
So what about social media. Many photographers use
Facebook, Instagram, and other platforms to promote themselves
and they all have recommended pixel dimensions.
For Facebook it's 2049 pixels on the longest edge,
on instagram it's a poultry 1200 pixels but here's a little secret. I don't
resize my images for these platforms and they look perfectly fine. I simply
use the same 2500 pixel wide images that I created
for my website and then I upload these directly to
Instagram or Facebook. Why? Well time is the main criteria and
to be honest, I haven't noticed any difference when I've tested using the
specified sizes compared to my own. These platforms will
automatically downsize the images and compress them regardless of whether
you use the recommended sizes or not. In next week's video I'll be looking at
how to make your images pop for Instagram. Thanks for watching! Get my
completely FREE photography course with no sign-up required...
you can also access our free 90-page e-book.
Just click the link or go to
KarlTaylorEducation.com/FREE