How to Optimize, Scale, and Save Images for Web
Image Optimization 101
Awesome visuals are a critical part of an awesome web experience. It’s no secret that images amplify your content and engage users in ways that words simply can’t compete with.
However, if not properly sized and scaled, images can take the greatest toll on your website. Large file sizes will bog down your site, slowing load times and increasing the likelyhood that people will click off a page that doesn’t load quickly enough. Keeping in mind that the point of these images is to improve user experience, we better do everything in our power to make sure our sites aren’t slow.
Why?
- Because people don’t want to wait around for a page to load. If your web page takes longer than a second or two to load, they’ll probably close the page and move on to a faster site.
- Because images take up disc space on the server that powers your site, and there’s typically a bandwidth limit per plan. Your images could quickly take over that space if not saved properly.
- Because search engines consider load speed when ranking your site , and a slow load could directly harm your impressions and traffic.
How to make my site faster?
Optimize your images! There are a lot of small steps you can take that, when combined, not only improve user experience but also your on-site SEO. By following these steps you’ll have fast-loading images optimized for SEO, performance, and users.
But wait, what is image optimization?
Images come in many sizes, shapes, and resolutions. Typically, images saved for web are much smaller and lower quality than images saved for print. Most images on stock photography sites, or taken with mirrorless or DSLR cameras, start at 300 DPI (dots per inch) and come in giant resolutions. An image saved for print is 300 DPI, but images saved for web only need to be 72 DPI. You’d know if you tried to print a 72 DPI image because it would be fuzzy and pixelated. Luckily, we’re not printing our images. Our screens can handle the 72 DPI, so what we’re focusing on is resizing a 72 DPI image to its ideal scaled size, without sacrificing quality.
Let’s talk about pixels.
In order to understand optimization, we need to know average screen sizes. Resolution is how many pixels a monitor displays, which helps us decide what size our images will be. Both monitors I’m using are 1920×1080 pixels, and as a standard rule-of-thumb this is the size I base my images on. And if I’m ever not sure, I’ll right click on a specific image to view its source code. This tells me the size that is responsively showing, so I can scale my images to that ideal size.
Let’s talk about file types.
The most common image files for the web are JPEGs, PNGs, and GIFs. Each is ideal for specific situations, but JPEG is going to be the top choice for the most part. PNGs are great for logos or small images that need a transparent background. GIFs are great for light animation.
Ok, now we’re ready to resize.
The goal here is to compress file size small enough to allow fast download, but large enough to not sacrifice colors or details. I’m just going to tell you now, my favorite tool for resizing images is Save for Web in Photoshop. Now, I understand most people don’t use Adobe software so here’s a free tool that you can use at home called TinyPNG.
The advantage of Photoshop is, not only can I set my pixel size precisely, but when I save for web I can modify the quality from 0-100% to get that sweet spot size of under/around 100K. I can also compress images to remove hidden data like metadata or extra color profiles, which just deletes unneccessary information and provides a quick & easy way to reduce file size without sacrificing any image quality.
What's a good rule of thumb for sizing?
- For hero or banner images that span the entire width, 2000 pixels wide with a file size under 150K is ideal.
- For smaller images, just break that 2000 pixel in half, or quarters, or thirds, depending on how many rows your content is divided into.
- For icons, small graphics, or logos, these can be tiny. Most should be fine within 50-250 pixels wide.
If your image is fuzzy or pixelated, bump up the size and quality. You don’t want to sacrifice and provide crappy visuals for better speed.
Bonus SEO optimization!
This is going to sound like a “duh” moment, but saving your images using keywords specific to your industry is a huge bonus. Digital cameras save files with generic names like IMG_0001.jpg or DSC42.jpg. Instead, as you maneuver through these scaling and optimizing tips, saving your final image with a specific, relevant name will improve your SEO and increase the chances of your graphic being found in an image search. Then once your image is loaded to your site, add alternative text to describe the image, and a caption and description if relevant.
That’s it!
I understand if you’re a little overwhelmed. If you’d rather leave it to the experts, contact Eyecon to team up with an image optimization expert to get your site up to speed!
LET'S BUILD SOMETHING AWESOME TOGETHER.
Do you think we might be the right guides for your next venture? Let’s connect.
Tell us all about the journey. We’d love to hear about your new mission.
Tell us all about the journey. We’d love to hear about your new mission.
