Get Started Today!  (415) 295-4898

croom new

415 IT Blog

Working with Images on the Web, Part 1 - Image File Formats

Working with Images on the Web, Part 1 - Image File Formats

Whether you are sharing them online, emailing them to a colleague, or putting them on your own website, it’s important to understand a few basics when it comes to image files and sizes. This guide will hopefully save you a lot of hassle when trying to email large images, update your website, and use social media, whether it be for your own personal use or for your business.

Why Does Image Size Matter?

There are a lot of reasons why you may need to reduce the size of an image. First and foremost is file size. If you are sharing images via email, or putting them on your website, you’ll want the image to not take up a lot of space. Most email services limit attachments to 10MB, which these days, isn’t a lot. Some modern email clients, like Gmail for example, give you 25MB, but that’s still small potatoes when it comes to sending and receiving a lot of images.

Your website is even more important. Large files take longer for users to download and view, and can slow down the speed of your website. Plus, if your visitors are on capped data plans, you are forcing them to chew through their data just to download images that are unnecessarily large.

The First Rule of Digital Images and Photos: Keep Your Original!

We’re about to talk about resizing images to make them smaller files, but it’s important to remember that you should always keep a copy of the original image—once you scale down an image, you can’t easily go back. If you purchase a stock photo, or take an image off of a digital camera, save a master version in case you need to backtrack. 

Once you make it small, there’s no going back at all.

This brings us to the next rule:

The Second Rule of Digital Images and Photos: You Can Only Scale Down!

This is super important to remember. If you have a photo, it’s generally pretty easy to reduce the size. It’s much more difficult, and even fair to say nearly impossible, to blow an image up. 

If you have a photo (or any image—for the sake of this guide, we’re mostly going to use the term photo and image interchangeably), making it larger won’t add more detail to the image. Instead, it will make your image look blurry.

Here’s an example. Let’s say we’re starting with a small image of a cafe:

It’s a nice photo, but let’s assume this is the only version we have, and we want to use it as our Facebook cover image, or a large banner on our website. We want people to be able to see the menu items and the text on the sign next to the cash register!

If we make any attempt to increase the size of the image, we don’t gain any of that detail:

Our image looked good at the small size, but it’s really hard on the eyes once we make it larger.

This was a pretty extreme case—you can sometimes get by increasing the size of an image a little bit but as a general rule, you shouldn’t. Just like whittling, you should start big, and work your way down.

Sure, there are some tricks to get a little more detail out of a blurry image, but at that point, you are paying a graphics person to attempt that kind of work for you. I once had someone explain it to me like this—digital imagery isn’t like film. With film, the tiny negative on the film holds all of the details, and as long as you have the original film, you can blow the image up.

In actuality, it is still very similar to how old film cameras work. If you have the original image that was taken with the digital camera, you likely have a massive, fully-detailed image. If the version of the file you have was already resized, however, you can’t scale it back up.

Make sense? 

In short, try to hold on to the largest version of an image, since that’s almost certainly going to have the most detail and give you the most flexibility. For some photographers, this would be called the RAW format—a format that most high-end digital cameras use. RAW images are massive, and usually not used on the web or for sharing—you can sort of think of this format as the original film version of a photo.

You probably won’t run into RAW files very often unless you dabble in digital photography, but we figured it was worth mentioning, and it segues nicely into our next topic.

“Working Image” Formats

Remember how we said that you should always keep your original file? That also includes the “Working” formats.

What do we mean by working formats? 

If you are building a graphic in Photoshop with multiple layers, you may decide you want to go back and edit your work at a later time. If you only save your image as a JPEG or PNG file, you’ll lose the ability to edit the separate layers. This flattens the image. You won’t notice a change visually, but when opening the file back up in Photoshop your work will all be on a single layer and much more difficult to edit.

Most graphic designers have this hammered into their heads pretty early on, but it’s always worth mentioning. If you are working in Photoshop, save your work as a PSD before you worry about saving any other image format.

What Image Format Should I Use?

We’re going to get deeper into image resizing in a moment, but it helps to understand what image formats work best depending on the situation. There are quite a few formats, but there are really only three that you’ll run into the most.

JPEG - Also seen as .jpg, this is the most common type of image file. It’s short for Joint Photographic Experts Group, and was developed to be a small, portable file size while still preserving overall image quality. A JPEG file can hold massively large images—they max out at about 218 square inches at print resolutions. JPEG files tend to have a small file size compared to most other formats, and most image editing software gives you the ability to determine the tradeoff of image detail and quality over file size. More likely than not, you’ll be working with JPEGs.

PNG - This image format is often used for graphics and illustrations, as opposed to photographs. PNG stands for Portable Network Graphics. They can have a fairly conservative file size, but they don’t lose much data or details when you save and compress them. This means their file size tends to be a little larger. One big advantage of a PNG is that it has the ability to have transparency. This is important for logos and other graphics that you might put over a background. PNGs are also really good for high-end illustration, if you are willing to sacrifice a smaller file size for quality and sharpness.

GIF - You might pronounce it like the first three letters of the word “gift,” or like the popular peanut butter brand that choosy moms choose. Either way, the GIF format is designed to be one of the smallest file sizes, but it has some major limitations, and an infamous feature. GIFs are perfect for low-quality, small images. They base their file size on the number of colors in the image—a simple illustration with only a small handful of colors is ideal. GIFs are most effective when you are working with small icons and illustrations, but they aren’t efficient for photos. They support transparency, but not as well as PNG. GIFs really shine because they can be animated. They don’t tend to look as good as an actual video file, and they can’t provide audio, but this feature is pretty unique to the GIF. Unless you are sharing an animated GIF, however, you probably won’t use this format very often.

Image Transparency

What do we mean by transparency? Here’s an example of a simple graphic. If we save it as a JPEG and put it over a tan background, it puts a white box around the image.

If we save it as a PNG, that white box goes away and it lays the graphic over the background color. This works if your original image has a transparent background. Often when you purchase graphics from stock photo sites, this can be the case. A graphic artist could also edit an image to make the background transparent for you. Here’s what our image looks like as a PNG:

This does mean we have to be cognizant of the color and brightness of the background—if our graphic is light grey and we are putting it on a white background, it will be hard to see. Here’s an example:

If we’re putting the same light grey image over a high contrast background (for example, maybe the area on our website we want to place the graphic is dark green), it’s going to look pretty good.

The same sort of thing has to be considered if you are placing the graphic over top of another image - will it be legible? In this case, you’ll want to make sure your background isn’t too busy.

This leaves you with a lot to consider—it never hurts to consult with a graphic designer once you start diving into this sort of thing.

In short, most of the time, you’ll use a JPEG, which does NOT support transparency, and when you need transparency, you’ll use a PNG.

There are newer formats out there, too. The WEBP image format has great potential, but as of writing this, it isn’t widely supported by all web browsers, so it’s a little early to start using it a lot. A new competitor to the PNG is the SVG, which is a scaling image for simple graphics and icons. It’s possible that in a few years, we’ll be seeing more use cases for these formats, but right now, your best bet for 99 percent of your image work will be JPEG, followed by PNG.

In our next blog post, we’re going to go through all of the steps to properly take a large image and resize it and optimize it for the web.

Working with Images on the Web, Part 2 - Resizing ...
What Will the Workplace Look Like After COVID-19?
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Sunday, March 07 2021

Captcha Image

By accepting you will be accessing a service provided by a third-party external to https://web.415it.com/

Mobile? Grab this Article

QR Code

Tag Cloud

Security Tip of the Week Technology Productivity Best Practices Business Computing Data IT Support Data Backup Network Security Privacy Hosted Solutions Cloud Internet IT Services Software Email Efficiency Data Recovery Managed IT Services Business Mobile Device User Tips Google Innovation Phishing Small Business Malware Collaboration Hackers Outsourced IT Cybersecurity Hardware Workplace Tips Upgrade Business Management Cloud Computing Computer Smartphone Tech Term Microsoft Communication Mobile Devices Android Managed Service VoIp Business Continuity Backup Windows 10 Quick Tips Smartphones Covid-19 Disaster Recovery Ransomware Managed Service Provider Communications Paperless Office Remote Work Passwords Network Encryption Browser Artificial Intelligence Wi-Fi Data Management Office 365 Business Technology Server Users Saving Money Internet of Things Help Desk Remote Monitoring Managed IT BDR Social Media Save Money Holiday Healthcare Government Document Management Vulnerability Compliance Windows 7 Microsoft Office Windows Managed IT services Data Security Chrome Miscellaneous Laptops Scam Automation Applications Blockchain Facebook Remote Machine Learning Processor Tip of the week Office Analytics Project Management Vendor Management Bandwidth Gadgets Two-factor Authentication Avoiding Downtime Redundancy Antivirus Wireless Information Mobile Office Infrastructure Virtualization Health Employer-Employee Relationship Mobility Website WiFi Company Culture Employee-Employer Relationship Data Loss IT Management Information Technology Customer Relationship Management Maintenance Regulations Apps BYOD IoT VPN Training OneDrive Managed Services Networking Hard Drive RMM Router Proactive Software as a Service Net Neutrality Storage Files Access Control Meetings Virtual Private Network Remote Worker Password Tablet Unified Threat Management Dark Web Augmented Reality Remote Monitoring and Management Internet Exlporer Remote Computing Financial Word Operating System Smart Technology Patch Management Data Breach Computing Employees File Management Recycling Server Management Electronic Health Records Instant Messaging Free Resource Consulting Downtime Voice over Internet Protocol Payment Cards Alert Data Storage Flexibility Assessment Mobile Security Display Customer Service Images 101 Unified Communications Managed Services Provider Network Management Social Network Remote Workers Professional Services Consultation Management Gmail File Sharing The Internet of Things Spam Search Risk Management Cooperation Money Vendor Time Management Holidays Bring Your Own Device Co-Managed IT HIPAA Utility Computing Monitoring Big Data Wasting Time Current Events Samsung Microsoft Excel Screen Reader OneNote Permission Smart Devices Outsourcing IT Consulting Computing Infrastructure Identity Statistics Modem High-Speed Internet Authorization CIO applications IT Servers Features Peripheral SharePoint G Suite Politics Windows Server Optimization Superfish CES Google Calendar Fraud Tech Support Employer/Employee Relationships Apple Mail Merge Laptop User Error Private Cloud Database Banking Smart Tech Recovery How To Test Hard Disk Drives Sensors Video Conferencing Alerts Mobile Bluetooth PCI DSS Downloads Virtual Reality Development WPA3 Business Telephone Travel Procurement Notes Motherboard Chromebook User Management Virtual Machines IT Technicians Cost Management Proactive Maintenance Solid State Drive Address Remote Working Firewall Bookmarks ROI Projects Reviews Connectivity Solid State Drives Biometric Comparison Licensing Data Warehousing Cookies Cables Fleet Tracking Zero-Day Threat Value of Managed Services IT Assessment Techology Technology Tips Migration eWaste Websites Cyberattacks Social PowerPoint Distributed Denial of Service Vulnerabilities Teamwork Credit Cards Legislation Mobile Device Management Cybercrime Cyber security Budget Managing Stress Favorites Return on Investment End of Support Options Telephone Gamification Technology Laws Specifications Emergency CRM Multi-Factor Security Operations Nanotechnology Wires Asset Tracking Backup and Disaster Recovery Outlook Digitize Disaster Resistance Digital Payment Hotspot Chatbots SaaS Read Only Security Cameras Managed IT Service Mobile Computing MSP Finance Shared resources Going Green Computers Customer Relationships Mirgation Point of Sale Tech Terms Database Management Printer Touchscreen Enterprise Content Management Hacking Conferencing Settings Personal Information Windows Server 2008 Gifts Wearable Technology Star Wars 5G Mobile VoIP Unified Threat Management Black Friday Virtual Assistant Bitcoin Content Filtering App Human Error Manufacturing Shortcut Shadow IT Proactive IT Mouse Language Identity Theft Enterprise Resource Planning Printing Break Fix Geography Authentication Batteries Cache Heating/Cooling E-Commerce Theft GDPR Social Networking Trending Transportation Active Directory Lenovo Hacker Permissions Electronic Medical Records Wireless Internet Outsource IT Cyber Monday Staff Education CEO Regulation Students Marketing Daniel Stevens Twitter Printers

Latest Blog

A lot of business is being conducted over the Internet right now, in terms of communication and transactions alike, which makes a business’ capability to remain connected to its clientele even more important. Now is not the time to wonder if your business is as connected as ...

Latest News

We are proud to announce that 415 IT and our CEO, Daniel Stevens, were recently featured by CIO Applications. We discussed how and why we serve our clients, as well as some sneak peeks for our future. Read our interview by visiting:  https:...