Lets talk about images for you blog and website. Taking great photos, or finding them, is only part of the process. You also need to prep the images before you upload them to your blog or website.
About half of my clients at some point tell me that their current blog or site is soooooo slow. Like any good business owner with some web savvy, they realize that slow sites don’t often convert to sales or please customers. Many list this as a main reason that they need a site refresh and a new look. I’m all about refreshing current branding, but I strongly believe that a new child theme probably won’t solve the slowness of your site.
9 times out of 10 I check out their backend and find a myriad of simple reasons their site is slow (these to come in another post) but the biggest issue is usually the inconsistency in images – often images that are too large and not only take up a lot of space but time to load as well.
So how do you forego the site slowness issue and just keep cranking out quality content? Start sizing your images correctly for the web. Here’s what you need to know:
SIZE
When it comes to the web, the size of an image does matter. Uploading an image to your media library at full size is a definite no no. Even if you crop and resize the image in the admin part of your blog, you’re still storing the full-sized image. And too many full-sized images is the reason your site loads slowly.
Know the image sizes you need.
Every child theme and blog template is different, so there isn’t really a standard size for images. However, you can find the sizes that your specific template or child theme requires. Often when you first set up your site, you’ll have demo images that are part of the package – my favorite template designers, save the size right there in the file name, so all you have to do is find the right image, and then you’ve got the exact dimensions for the image you’re creating. This filing naming process isn’t standard though, so you can use this easy enough trick to find out the right sizes for your blog or site.
- Find an image on your site, or go back to the theme demo for your child theme or template, and select the image you’re looking to replace.
- Right click the image and choose “Save as”.
- Open the image in Photoshop, PicMonkey or your favorite photo editing software and check the size. In Photoshop – Open the image, go to Image>Image Size (make sure your measurement is in pixels). In PicMonkey – Select Edit, upload your image, choose Crop, drag crop markers to the edges of your image and make sure to note the size displayed in the left hand crop section.
RESOLUTION
Resolution is the other factor that effects slow loading time. The resolution of an image dictates how much detail and information is saved into the image. Higher resolutions mean larger files, which converts to more space used and slower loading times. High-res images are usually at 300dpi – a typical setting for images used in print projects. Images for web use can be must lower in resolution – 72dpi is the preferred setting.
Keep in mind that once you change the resolution on an image and save it, you can’t convert it back. Always keep the original image if you’re changing resolution settings.
To change resolution in Photoshop:
- Open the image you want to change resolution on.
- Select Image>Image Size
- Change resolution to 72
- If the dimensions change, then enter in the width needed and save as a .jpg
OR
Once you’ve made all the additions, tweaks, and adjustments that you want to your image – simply go to File>Save For Web>and save either as a PNG24 or .jpg.
To change resolution in PicMonkey:
- Upload your image and make all adjustments, tweaks, and additions.
- Select Save
- In the new window you’ll have 3 options “Rodger” (low res), “Pierce” (medium res), “Sean” (high res). Select Rodger for web images and Save.
OR
When the new window opens simply choose .png and this will automatically save your image in a web-optimized format.
What other software programs do you use to edit photos? Do you have tricks and tips you use to resize images for your site that save you time? I’d love to hear.
Want more great tips and tricks on photography for your blog? You’ve come to the right place. I’m currently working on a Photography for Bloggers class that will be releasing soon. You can sign up to be the first to know when it’s released as well as get a “early bird discount” by signing up below.
[wysija_form id=”4″]