In: Web Design

Saving Images for Web: Beginner’s Tips

Sep 23, 2015

There are few things that bother me in this world: the feeling of velvet, cold climates, and poor quality images online. In my line of work, the latter is by far the most concerning and common (especially since I’ve moved to LA and kissed New England winters goodbye!). But besides bothering me personally, it can affect what your users and customers think of your business and website. A low-quality image is not commanding and does not create a sense of professionalism.


No matter what your product or services may be, in today’s digital world customers expect their companies to be knowledgeable and well established in the online sector. If a company is uploading poorly saved images for their website, they are not showing their cliental that they are industry leaders or Internet savvy.


Here are my three basic tips for explaining how a business can better save their images for the web.


1) Know the differences between PNG and JPG


In the most basic way I can explain the difference, a JPG/JPEG file should be used for photography and a PNG file should be used for graphics.


The complicated reason behind this is because a PNG file format supports “lossless data compression,” meaning that a PNG can almost perfectly reconstruct the data with no visual changes. This is perfect for graphics and text, because it keeps their lines crisp and clean. Check out the examples below to better understand what I mean.


This is an “R” saved as a .PNG file:   R_   While this is the same “R” saved as a .JPG file:   R_  

See a difference? The JPG file compresses the image and blurs the edges of the graphic, making the "R" look indistinct.


Helpful Tip:Need to make something transparent? Use a .PNG file format!

Now, after seeing the differences above and understanding that a PNG will create a basically perfect compression of an image, you may be asking yourself 'Why don't I just always save for web as a PNG file?' and the reason for that is because a JPG file has its strengths too. JPEGs were designed for photography, and therefor support more color information. Yet another key reason why people use JPEGs is because they better allow the degree of compression to be adjusted to suit file size, which I explain in my next point.


2) Optimize the image load time


If you want to build a successful website to attract customers and gain leads, then you need to monitor your website's load time. If it's loading too slow, it can deter customers from engaging with your site and will increase your site's bounce rate. One way to make sure you’re site is running as fast as it can be is to be conscious of image file loading time. When you save an image for web in Photoshop, double check how much time the image will take to load. With JPEG file formats, you have the ability to adjust the quality of the image in relation to load time.


To check the load time, make sure you have your Download Time settings configured. To do this, click “Save For Web” (or use the shortcut for Mac users: Shift + Option + Command + S), and the save for web screen will pop up. In the bottom left, there is an option to choose what type of download connection to test for. Today, most people have 1 Mbps Cable.


Once you’ve set the download connection to correctly estimate the amount of time it will take an image to load, play with the quality of the image as well as the image size until you can get your photo to load in around 3 seconds or so.


In the example below, by resizing my image I was able to reach a load time of 2 seconds at 1 Mbps, which is perfect!



And here’s the photo! (I took this at Manhattan Beach with my iPhone — pretty nice, huh?)


3) Always resize first, then upload

No social media platform, email marketing platform, automated marketing system, or what-have-you will resize an image as well as you can in Photoshop. And that’s because with Photoshop, you can play with the image settings and see the affects in real time to ensure that the image is at its best quality before saving it and uploading. To save on load time, every site has its own measures of compressions they put on your photos, so if you try to upload a photo that isn’t the correct size, then when they compress the image, you can pretty much guarantee it’s not going to look good.


Luckily, today there are lots of great resources about social media image sizes, and for the very best quality image and logo, I recommend building to the specific size needed versus ever trying to resize them. That way, you’re ensuring the highest quality image possible.


Here’s an awesome graphic Constant Contact put together about Social Media Image Size. I am constantly referencing this, and you should too:


With these three tips for saving images for the web, you’ll make sure to make the most out of your images and improve your brand presence. Stick to my suggestions, and you’ll have quicker load times and better quality photos that will have your customers always coming back for more.

atak interactive - left arrow back to blog