BNMC Blog

Internet Images, Part 1: Image Formats

Internet Images, Part 1: Image Formats

They say a picture is worth 1,000 words. If that is true (or even close to true), images can do a lot for what you are trying to accomplish online. We thought it would be useful to put together a little tutorial about the use of images online and provide some useful information about the types of images you’ll encounter there. 

Image Size and Why It Matters

The larger the image, the larger the file’s size, right? Images with an immense file size can potentially make your images unusable for practical purposes as most platforms will only give users a 10-to-25 MB allowance for file attachments. Large images will easily exceed this figure. 

When uploaded to a website, it can be an even bigger problem. Large image files can slow down a website substantially and really wreak havoc on people that have limited data plans. That’s why we’ve put together these blogs: to teach people what they need to know about working with images online. 

Always Keep the Original Image

Whenever you aim to resize an image, we have to stress how important it is to keep the original. Scaling an image down is no sweat, but scaling it back up is nearly impossible. Make sure you retain a master copy just in case you need to take a step or two back.

You Can Scale Down, But Not Up

Again, it is really hard to scale an image up. People with years of design experience can’t (and won’t) do it, so you probably can’t either. Any image you make larger won’t have any detail added to it. Rather, it will just become blurry. Check out this image of a florist’s boutique:

It’s a nice picture, but if you try to scale it up, it looks like this:

Not great. Pixelated and distorted. The larger you get, the worse it gets. So, you will want to save the master, which should be large enough to do whatever you need to do with it. 

“Working” Image Formats

In addition to your master image, it’s also wise to keep some “working” images. This means keeping an image saved in multiple formats. You’ll likely only work with JPEG or PNG, but you should save it as a PSD (if you are working with it in Photoshop), so you don’t have problems if you want to edit the layers of an image before you publish or upload it. 

Which Image Format Should I Choose?

Part 2 of this blog will be about resizing the image, but to wrap up this part, we thought it would be a good idea to talk a little bit about the types of images the average person will encounter (or work with). There are really only three that you should know at the top. They are JPEG, PNG, and GIF. Let’s dive in:

JPEG

An acronym for Joint Photographic Experts Group, a JPEG is any image tagged with .jpg or .jpeg. It is probably the most popular image format found on the Internet. This format was created to condense massive images into smaller file sizes, with their print size equaling 218 inches. They are also supported by almost every piece of editing and design software there is. Their major benefit is that they allow you to balance your file size to your image quality.

PNG

Mostly used in design, the PNG (Portable Network Graphics) provides the ability to support transparency without large file sizes. The PNG makes it a great option for logos or other images that need to be superimposed over a background image or color. A lot of superior illustrations are also a good fit for the PNG format, assuming you don’t mind trading a smaller file size for image quality.

GIF

GIFs are for lower image quality and ultra-small file sizes. They have limited color palettes, and are ideal for small photos and icons. They work great for animation and are widely shared in this format. When editing images, you probably won’t use GIF files very often.

Image Transparency

Let’s finish up with transparency. Transparency is the ability of an image to be layered on top of another image. JPEGs, by design, are not transparent at all. When placing a JPEG over another image, you will see the entire image. LIke this:

Using a PNG, however, allows for more transparency and the box goes away. It leaves you with a more pleasing image:

Doing this adds variables, however. Let’s say the background shares colors with the outline of the flower above. You get this:

Not all that pleasing to the eye. You also need to consider this if the graphic is to be superimposed over another image. In these cases, the less “busy” your background, the better everything will translate.

We hope this helps you understand working with images a little better. While we didn’t get into more advanced file types like WEBP or SVG, we think that by understanding JPEG and PNGs a little better that you can have a better experience when trying to build online images or altering your pictures.

Check back soon to see part two of this tutorial as we show you how to properly scale your images.

 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Tuesday, April 20 2021

Captcha Image

By accepting you will be accessing a service provided by a third-party external to https://www.bnmc.net/

Subscribe to Our Blog!

Mobile? Grab this Article!

Qr Code

Tag Cloud

Tip of the Week Security Best Practices Technology Productivity Business Computing Cloud User Tips Email Software Privacy Network Security Microsoft Hackers Workplace Tips Efficiency Business Google Hardware Data Computer Hosted Solutions Malware IT Services Internet Communication IT Support Mobile Device Mobile Devices Smartphone Small Business Android Innovation Cloud Computing Phishing Users Ransomware Backup Tech Term Data Recovery Managed IT Services Windows Smartphones Saving Money Quick Tips Outsourced IT VoIP Cybersecurity Information Network Disaster Recovery Passwords Miscellaneous Upgrade Browser Social Media Windows 10 Microsoft Office Business Management Data Backup Facebook communications Office 365 Business Continuity Collaboration Server Managed IT Services COVID-19 Productivity Managed Service Internet of Things Windows 10 Data Management Apps Gadgets App Infrastructure Remote Work Information Technology Mobile Office Word Vulnerability Save Money Remote Monitoring Analytics Gmail Artificial Intelligence Government Money Spam WiFi Encryption Conferencing Chrome Managed Service Provider Router Remote Workers Paperless Office Company Culture IT Support Website Holiday BYOD Display Tip of the week Google Drive Settings Applications Networking Employer-Employee Relationship VPN Access Control Data Security Virtual Reality Hacker YouTube Data storage Virtual Private Network Risk Management Wi-Fi Computers Virtualization Operating System Unified Threat Management Office Tips Development Avoiding Downtime Antivirus Firewall Bandwidth HIPAA Maintenance Content Filtering Big Data BDR Document Management Robot Managed Services Employee-Employer Relationship Education Apple Wireless Automation Storage End of Support Compliance IT Management Business Technology Software as a Service Regulations IT Touchscreen SaaS Managed IT Social Network Free Resource Tablet Augmented Reality How To MSP Outlook Blockchain Vendor Computing Managing Stress Data loss Bring Your Own Device Images 101 Telephone Systems Retail Social Alert LiFi Budget Humor iOS desktop Hosted Solution Laptop Two-factor Authentication Best Practice Managed IT Service Administration The Internet of Things Customer Relationship Management Scam Mouse Monitors Cryptocurrency Remote Vendor Management Downtime Chromebook Mobile Security Break Fix Cybercrime Going Green Search Marketing Solid State Drive Identity Theft Printing Business Intelligence OneNote Password Data Breach Training Remote Computing Windows 7 Hard Disk Drive Server Management Onboarding GDPR Network Congestion Language Value RMM Microsoft Excel Managed Services Provider Dell SharePoint IoT Policy Smart Technology Print Toner Myths Cabling Mobile Device Management Mirgation Recycling Techology Slack Hard Disk Drives WannaCry Deep Learning Statistics Content Huawei Google Maps Writing K-12 Schools Employees Lenovo Messaging Scary Stories Cookies Digital Signage Data Warehouse Alt Codes Computing Infrastructure Professional Services Banking Mail Merge Entertainment Running Cable Social Networking Holidays Downloads Dark Data Buisness Update Star Wars Procedure Shortcut Distributed Denial of Service Shortcuts Mobile Management Chatbots eWaste Distribution VoIP Unified Threat Management Monitoring Solid State Drives Bluetooth Comparison Streaming Processor Virtual Desktop Wearable Technology Network upgrade Gig Economy Firefox Superfish Employee-Employer Relationships Sports Nanotechnology Troubleshooting Business Analysis Digital Payment Typing Alerts USB Reviews Address Permissions Hybrid Cloud Politics Motherboard Cables Payment Card Digital Customer Service Fraud Cost Management PCI DSS Patch Management Security Cameras Profiles Meetings Disaster Current Events Work/Life Balance Identity Continuity Logistics User Error Spying National Security Charging Specifications Human Error Memory Office Samsung Smart Office FBI Analysis Students Health Private Cloud Screen Reader Virus Licensing Dongle Scalability Tech Support Wires Inventory Heating/Cooling Multi-Factor Security Spyware Google Docs Assessment Battery Utility Computing Uninterrupted Power Supply IT solutions Solar Asset Management Time Management Printer Updates Smart Tech Peripheral Black Friday Device Reducing Cost File Sharing Social Engineering Hacks Work K-12 Education Mixed Reality Computer Care IBM LED Threats Bitcoin Twitter Cooperation Service Level Agreement user treats Emergency Migration Consulting Google Wallet Websites Voice over Internet Protocol Shadow IT Servers Google Calendar Business Growth Hotspot Internet Exlporer Files Dark Web Laptops Memes Network Management PowerPoint Connectivity Management Cyber Monday Mobility Batteries Safety IT Technicians Optimization Instant Messaging Corporate Profile Legal Legislation Co-Managed IT Automobile Windows 8 Staff Leominster Shopping G Suite Unified Communications Halloween Drones Modem FinTech Gamification Supercomputer CrashOverride Cortana 3D Printing Motion Sickness Staffing Administrator Processors Taxes Machine Learning IT Budget Web Server what was your? Unsupported Software Mobile Computing GPS IT Consultant Computer Repair Relocation Cameras Mobile Data Tracking Recovery How To Cleaning Printers Black Market CCTV Webcam Law Enforcement Regulation Notifications Electronic Medical Records Error Physical Security Emoji Point of Sale Ben McDonald shares Upgrades Gadget Travel Crowdsourcing Financial Personal Information Botnet

What Our Clients Say

  • BNMC has provided us with nothing less than outstanding service and results for all of our IT needs for the past few years. Every member of their staff is professional, knowledgeable, friendly and eager to solve any problem...
  • 1
  • 2
  • 3