Direct Technology Group Blog

Direct Technology Group provides professional IT Support and Network Services for Businesses around Deerfield Beach. Computer Services, Tech Support, IT Solutions and more!

How to Work with Web-Based Images, Part 1: File Types

How to Work with Web-Based Images, Part 1: File Types

If you operate online at all, being able to properly manage your pictures is extraordinarily useful. This week, we’ve put together a guide that will hopefully give you the information to understand the basics about manipulating images for use online. 

Yes, Image Size Matters

Of course, there are many reasons that you may need to reduce the dimensions of an image. The obvious one is for storage. The larger an image is, the more disk size it will take up. Some platforms like social media and email won’t accept images that are too large. In fact, most hosted email services limit any attachments to around 10 MB or .01 GB. Some of the better ones like Gmail or Outlook will extend those capabilities, but most won’t go over 25 MB or .025 GB. That’s not exactly a massive amount of data. 

When creating images for a website, images that are larger will take longer to view, and can often have consequences to the formatting or the speed of your entire website. Additionally, if your visitors have a capped data plan, you aren’t doing them any favors with large image sizes. 

Be Sure to Keep Your Original!

So while we are about ready to talk about resizing your pictures to make them smaller, more manageable files, we would be remiss if we didn’t remind you to always keep your original image. Not only is this often the version with the highest quality, once you scale down, it’s extremely difficult to get that quality back. Here is a rhyme to help you remember:

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

This brings us to the next rule:

You Can’t Scale Up

This is extremely important to understand. If you have a large image and want to reduce its size, you won’t have much problem doing so; but, if you have a small image and want to blow it up, you are in for a rude awakening. Any image you try to make larger will lose resolution as you blow it up. Let’s take a look at an example. We start with a small image of a cafe:

It’s a good photo, but let’s say for the sake of argument it’s the only version we have and we want to blow it up to put it as our Facebook cover image or some other reason. The goal is to show people the menu and the text on the sign next to the cash register.

When we increase the size of the image, blam, it’s a nightmare. You can’t see anything and it just looks unprofessional in every sense of the word. 

Our image looked good at the small size, but now it’s a catastrophe. Sure, this was done for effect and most images won’t get distorted this quickly, but rest assured, they will be distorted, and will look unprofessional. A graphic designer can probably do a lot with this to make it passable, but you are just an average business owner and don’t need to incur huge design fees for a simple social media image or photo on your website.

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. It’s pretty straightforward, but digital doesn’t work that way. When you take a picture with a digital camera, whether it be on your phone or whatever, the image taken will be a large image with a solid resolution. 

It’s best to try and 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 (for the reasons outlined earlier)—you can sort of think of this format as the original film version of a photo.

It’s quite possible that unless you are the photographer, you won’t encounter RAW files very often, but we figured we’d mention it, nonetheless. 

“Working Image” Formats

So keep your original file, and that doesn’t always mean the original, original. Allow me to explain:

When you take a picture, the file size will be huge, so to get it to be manageable you’ll want to resize it (more on that later). When you first resize it to edit it in any fashion, that is called your “working image” and you will want to also keep a copy of that on file. Why? You’ll know when you mess up the alteration on the first image and then you have to go in and resize another copy to work on again. This process can get annoying, so keep your working image to keep from having to retrace your steps. Also, it allows you to add layers onto the file.

JPEG and PNG files, which are typically used as the end result, don’t allow you the ability to build layers. It effectively flattens the image. You won’t notice any difference, but in Photoshop (or any imaging platform) you won’t have the flexibility you will initially. 

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.

So, What Image Format Should I Use?

Let’s quickly go over the image file types you will likely encounter when altering images. 

  • JPEG - Also seen as .jpg, it 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

So what does transparency mean when dealing with online images? Below we have 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. Typically you will want to have transparency to an image when you purchase it from a stock image repository, but all capable graphic designers can make an image transparent for you. Here’s what our image looks like as a PNG:

Of course this means we have to pay attention to the color and brightness of the background behind the image. For example if our graphic was light grey and we put it on a white background, this is the result:

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.

We’ve given you a lot to digest, and it never hurts to get a professional in there to help you if you feel you need to. To summarize, most of the time you’ll use a JPEG, which does NOT support transparency, but when you need a transparent image, you’ll likely use a PNG.

Of course there are other formats out there. A WEBP image format has great potential, but as of now, it isn’t currently supported by all web browsers. 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.

Check back for part two of our image editing series later on this week. 

How to Work with Web-Based Images, Part 2: Resizin...
How Can the Zoombombing Issue be Solved?


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

Captcha Image

Tag Cloud

Tip of the Week Security Technology Best Practices Business Computing Privacy Cloud Efficiency Productivity Google Hackers Network Security Data Microsoft Malware Workplace Tips Software Communication User Tips Smartphones Hardware Business Innovation Email Miscellaneous Backup IT Support Mobile Devices Internet Hosted Solutions Small Business Android Collaboration communications Computer Users Mobile Device Smartphone Ransomware Cybersecurity Network VoIP Business Management Social Media Productivity Outsourced IT Managed IT Services Upgrade Windows Browser Windows 10 Passwords Managed Service Holiday Tech Term IT Services Microsoft Office Save Money Gadgets Bandwidth Automation Remote Business Continuity Covid-19 Cloud Computing Apps Windows 10 Employer-Employee Relationship Disaster Recovery Office Facebook Phishing Quick Tips Data Backup Internet of Things Managed IT Services Saving Money Marketing Data Recovery Chrome Mobile Device Management Wi-Fi Networking Server Wireless Apple Information Health Gmail IT Support Password Office 365 Router Alert Analytics Applications Hacking Virtualization Patch Management Business Intelligence App Mobility Office Tips Cybercrime Government VPN Remote Computing Settings Access Control Managed Service Provider Computers Data Breach WiFi Retail Application Battery Blockchain Going Green Remote Monitoring BDR Twitter Laptop Website Physical Security Operating System Recovery Excel Law Enforcement Remote Work Data Management iPhone BYOD Telephone Systems Big Data End of Support Biometrics Employee-Employer Relationship History Bring Your Own Device Compliance Virus Mouse Conferencing Social Engineering Word Voice over Internet Protocol Printer Google Drive Workers Safety Value VoIP Environment Humor Net Neutrality Mobile Computing Paperless Office Maintenance Information Technology Managed IT Service Politics Lithium-ion battery Entertainment Spam Mobile Office Artificial Intelligence Data storage Human Resources Cleaning Meetings DDoS Telephone System Current Events Robot Processor Hard Drives Tech Support Search IT solutions Dark Web Healthcare Company Culture Wireless Charging Hosted Solution Customer Relationship Management PowerPoint Shadow IT Education Risk Management Tip of the week Data Security G Suite Customer Service Employees Internet Exlporer Content Filtering Virtual Assistant Medical IT Streaming Media Data Protection Fax Server The Internet of Things Connectivity Remote Workers SharePoint How To Tech Terms Encryption HIPAA Two-factor Authentication Hybrid Cloud Batteries Printer Server Sports Cost Management eWaste Managing Stress Free Resource Business Technology Vulnerability Payment Cards User Error Images 101 Best Practice Cortana Virtual Reality YouTube Telephony Scam Windows 7 Tablet Smart Technology Vendor Shortcut Training Remote Monitoring and Management Social Network Files RAM Digital Regulations Compliance News Social Networking Chrome OS Analysis Updates Tablets Authorization Bluetooth Staff Threat Comparison Distribution Copy Computer Repair Insurance Chromecast Wearables Microsoft Teams Online Shopping Edge Access Innovations Monitor Internet exploMicrosoft Troubleshooting USB Websites Printing Specifications Fleet Management Paste Antivirus IT Service Techology Printers Tip of the Week/Security Distributed Denial of Service Reputation Electronic Health Records Advertising Display Memory Update Dongle Paper Google Maps Multi-Factor Authentication Budget Mobile HaaS Lead Generation Reporting Consultant IT budget Reviews Computer Accessories Remote Support Spotify Hiring/Firing Customer Private Cloud Benchmarks Outlook Ink Holidays Remote Control Personal Information Flexibility Programming E-Commerce Cables Best Available IT Management Gig Economy Cameras Cabling Staffing Solid State Drive Public Cloud Recycling Profitability Technology Tips User Tip Botnet Virtual Private Network Spam Blocking SaaS Legal Touchpad Payment WannaCry GDPR disposal Gifts File Sharing Hard Disk Drive Analyitcs Eliminating Downtime Backup and Disaster Recovery Downloads Telecommuting Managed IT Co-Managed IT Email Management Hard Drive Unified Threat Management instant Messaging WIndows 7 Storage Network Attached Storage Customer relationships Notifications User Security Windows XP Relocation Video Hacker PDF Bitcoin Wireless Internet SSD Trends Millennials Memes Windows Media Player Processors Management Licensing Video Games Vulnerabilities Amazon Error Server Management File Management Gadget OneNote Science Help Desk Inventory A.I. IT Spyware Remote Working Travel Black Market Cryptocurrency Plug-In Windows 8 Touchscreen Machine Learning Database Webcam Managed Services Provider Windows Server 2008 R2 Threats Certification Mobile Security Movies Hosted Desktop Phone System HP Worker Wearable Technology Live Streaming Alerts Social Proactive IT Microsoft Office 365 User Telecommute Tactics Broadband Sales Taskbar People Multi-Factor Security Scams Bloatware NarrowBand e-waste Unified Communications Voice over IP Firewall Document Management PCI DSS Running Cable WhatsApp Work/Life Balance Downtime Time Management Authentication Data loss Internet Explorer internet consultant Uninterrupted Power Supply Knowledge Avoiding Downtime National Security Profiles Project Management Entrepreneur Wireless Technology Security Cameras eCommerce Automobile

Mobile? Grab this Article!

QR-Code dieser Seite