October 2, 2020
4 min read
Optimize the images in your website with this 6 step tutorial where I also supply you with tips and tricks to help the process go smoothly.
We all want beautiful, detailed, and crisp images throughout our website. You don’t want to sacrifice your website traffic by having your audience “bounce” before the pages even load. If your website’s bounce rates are high, it could be due to your pages’ load times being too slow. Did you know large, high resolution images can slow down your load times? Not only will this post help you reduce bounce rates, it will also help you improve your website’s SEO and add accessibility aids for your viewers.
So let’s jump in…
Getting Started with Image Web Optimization
1. Always start with high quality images
First, I will always recommend getting high-quality, high-resolution, large dimension images to optimize. You can request this from your photographer or take the photos yourself. Your average iPhone photo is around 3 MB where a DSLR photo can average from 15 to 50 MB. The higher the better when starting out (as long as it doesn’t crash Photoshop lol).
2. Image Web Optimization Format Types
There are three types of formats used in web imagery. The first is the most common, JPG. JPG, standing for Joint Photographic Group, is most popular because it is flexible regarding quality and data size. You don’t need to know all the specifics but the JPG format will typically be your go-to.
Another format is PNG, or Portable Network Graphics. The way PNG differs from JPG is that a PNG can have a transparent background which comes in handy for more creative website assets and designs.
The last format used is GIF. You probably use GIFs all the time in emails or on Instagram but these can also be implemented into your website as well. Standing for Graphics Interchange Format, GIFs can be used as still images but I prefer them for short and simple animations.
Quick Tip
When to choose PNG over JPG
JPG will nine times out of ten have a smaller file size due to better compression.
I recommend saving images as PNGs only when you need a transparent background. There are many cases where this is needed but optimizing your image as a JPG will cut down on file size and reduce the amount of memory used on your website.
Time to Optimize your Images
3. Export for Web in Photoshop
Pull your images into Photoshop (if they aren’t already) when your images are edited to perfection. Your best friend throughout this process will be the Save for Web option.
Click File > Export > Save for Web. A Save for Web Options window should pop up. Here you can play around with the different sizing options.
Here are some tips that might help when choosing your settings:
- If my image is LARGE: full-width, full-screen, hero area, or generally large section, I set the preset setting to JPG High.
- If my image is LARGE: full-width, full-screen, hero area, etc, then I set the length dimension to 2000px or 1920px.
- If my image is MEDIUM-sized or anywhere from 2/3 to 1/5 of the screen size, I choose JPG Medium and use the Preview button in the bottom left corner to tailor the size of the image to what appropriately works best.
- If my image is SMALL – this could be logos, iconography, or thumbnail images, I use JPG Low and choose any size under 450 px.
This is not an exact science and sometimes I’ll even save my largest images as JPG Low. Use your best discretion with this or customize your settings to fit your needs. You can always preview how the image will look when optimized in your web browser with the “Preview” button in the bottom left corner of the Save for Web window.
4. Check Dimensions, DPI, and File Size
The dimensions of your image should only be what is necessary for its area on your web page. If your picture is a supporting photo like the photo here, then it doesn’t need to be any larger than 720px. Hero and full-width images should be at a max of 2000px though I optimize mine to 1920px to save a little extra memory.
Try to keep your images’ DPI (Dots Per Inch) or in this case PPI (Pixels Per Inch) below 200. The higher the resolution, the more memory it will take up. 72 dpi for large, medium, and smaller images should suffice for your website. In some cases, larger images can be 150 and under if you must increase the PPI.
Lastly, by this time in the process, your file size should be at a reasonable state. I find keeping image size to 150KB or below will keep your pages’ load speed faster and the memory on your backend abundant.
5. Name your File for SEO
To help your image and website gain favor with Google, give your image descriptive names. To make things quicker on your workload, you would probably name this image of my dog “Coco-01.jpg”. Spend the extra few minutes to do your keyword research and add popular, relevant keywords in your image’s name. A better name for the image would be something like “Dog-beach-Texas-01.jpg.” Give your images some extra love and attention and Google will reward your efforts.
6. Lastly, add ALT text
Adding ALT text is the final step to optimize your images. The Alt Tags not only give Google useful information regarding your images. They also aid individuals who are unable to see the images themselves. The Alt text gives the users a description of what your image is. An example for the above image of my dog would be “Dog playing on the beach in Texas”.
A trick I use when filling out Alt text is to imagine how I would describe the image to a person who cannot see it.
That sums up my image optimization process for websites. Leave a comment if you learned any tips from this tutorial or let me know if you have any additional tips and tricks to add to the list! Thanks for reading!
Stay Rad,
Katie
Related Articles
Hack #3 to Level Up Your Creative: Convert Users with Creative
4 min read Facebook has 2.89 billion monthly active users worldwide. Instagram has 1 billion monthly active users worldwide. TikTok has 1 billion monthly active users worldwide. Pinterest has 454 million monthly active users worldwide. YouTube has 2.1 billion...
Hack #1 to Level Up Your Creative: DIY Your Brand Identity
4 min read If you’re in the first few years of owning your small business, it can be tough to know when to invest money in professional services and when to DIY. An essential aspect of any company is its brand identity. However, going all-out and hiring a professional...
How to Build a Website in 24 Hours
4 min read If you don't know How to Build your Website but need one fast, here is a detailed guide on how to get your website from lacking to live! I respect your hustle. Prep for your Website Estimated Time: 10 Hours First things first, we need to do some...