12 Common Image Formatting Mistakes To Avoid On Your Website

Size: px

Start display at page:

Download "12 Common Image Formatting Mistakes To Avoid On Your Website"

Barry Johns
5 years ago
Views:

1 12 Common Image Formatting Mistakes To Avoid On Your Website It s been said that a picture is worth a thousand words but, as it turns out, it may also translate to more money and exposure for you or your business. Although keeping up a personal or business website is no small job, putting some extra effort into adding visual content to your site pays off in more ways than one. Not only is it one of the best ways to keep visitors coming and interested, but, according to statistics compiled by Tech.Co and NewsCred, it also: Makes for more effective communication: People remember 80% of what they see (as opposed to 20% of what they read and 10% of what they hear). Attracts viewers: Articles that include images receive 94% more views than those without. Boosts businesses reputations: 67% of consumers prefer businesses that provide clear, detailed images of their products (and say images are more important than product descriptions). Impacts purchase decisions: 93% of people rate visual imagery as the most important factor influencing whether or not they purchase an item online. But it will be hard to reap any of these benefits if your images aren t displaying correctly. So follow our guide below to avoid the common mistakes that many people run into when trying to format images for their websites. 01. Problem: You uploaded images without optimizing them for the web, and now your website is slow. Solution: Find your happy medium image size. Image size has a big impact on your website s performance. To clarify, we re talking mainly about file size in megabytes (mb), kilobytes (kb), etc. not the actual dimensions of the image (such as 800 x 600 pixels), though the two are often correlated. If your file sizes are too big, your pages take a long time to load, and you risk losing visitors who don t have the patience to wait. Too small, and you compromise the visual quality of your images. You ll need to find the right compromise between actual size and quality (resolution), which combine to determine overall file size.

Dribbble/Jonathan Ogden Pro Tip: You can test how various image sizes affect your page loading speeds with free tools such as this one. 02. Problem: Your image doesn t look right on screen.

2 Dribbble/Jonathan Ogden Pro Tip: You can test how various image sizes affect your page loading speeds with free tools such as this one. 02. Problem: Your image doesn t look right on screen. Solution: Understand image resolution. Resolution is what determines how good your image looks on screen. In simple terms, it has to do with the number of pixels displayed in a certain amount of screen space (pixels per inch, or PPI; sometimes pixels per centimeter). However, because screens on devices we use today have pre-determined resolutions, we have limited control over how our images will appear anyway. But that s ok, because it simplifies the image-saving process. A resolution of 72 PPI is considered the general standard for acceptable-quality web images, but a resolution of between 72 PPI as a minimum and 120 PPI as a maximum will suffice for the vast majority of screens. According to Google designer Sebastien Gabriel, keeping the PPI within this range ensures your work is going to be roughly the same size ratio everywhere. It also helps keep the file size manageable. More importantly, as long as you save your images at the correct dimensions (in pixels) for its intended destination, you should avoid any pixelation. Pixelation (blurriness, distortion, loss of quality) occurs when a digital image is displayed online at a size larger than its original dimensions (e.g. trying to stretch a 50 x 50 px photo to fit a 500 x 500 px space). Pro Tip: If you re trying to set the PPI of your image file and only see an option for DPI, don t panic. The terms are often (though incorrectly) used interchangeably. In fact, many people and programs use DPI as a blanket term to refer to image resolution. 03. Understand Image Resolution, Part 2: Compression Compressing an image in a photo-editing program is one way to adjust the resolution and file size. For example, when using the Save For Web & Devices option to save JPG images in Photoshop, you can choose preset quality settings (Low, Medium, High, Very High, and Maximum), or fine-tune the quality with the corresponding sliding bar that you can adjust

between 0 (Low) and 100 (Maximum). This will reduce (or compress) the file size (good for page loading times), but also reduce the visual quality (potentially bad, depending how low you go).

3 between 0 (Low) and 100 (Maximum). This will reduce (or compress) the file size (good for page loading times), but also reduce the visual quality (potentially bad, depending how low you go). Pro Tip: In the Save For Web & Devices dialog box, you can preview and compare multiple versions of your image (with different file types, settings, etc.). You can even view estimated download times or preview your image in any web browser you have installed on your system. Read more about those options here. 04. Problem: The focal point of your photo isn t obvious. Solution: Crop wisely. Cropping your images can be a very important step in the formatting process, particularly for photographs. You don t want to crop out anything important, but feel free to crop to improve the focus or mood of the image. On the other hand, you don t want to crop in so close that your photo becomes distorted (the more pixels you remove, the lower the resolution); if you want to do this, you need to start out with a fairly high-resolution photo. Dribbble/Nikola Milasinovic Pro Tip: If you re planning to post your image on a social media site, you can save yourself some grief by cropping to the appropriate dimensions ahead of time (Check out our infographic guide to image sizes for all the most popular social media sites.) That way, you know exactly how your photo will look when it s posted and won t be surprised by anything getting cut off or stretched out of proportion.

4 05. Problem: Your image is composed poorly. Solution: Frame for maximum impact. Closely related to cropping, framing should ideally happen when you re taking a photograph or creating an image (rather than after the fact). It has a lot to do with the traditional rules of composition that painters, photographers, designers, and other artists consider. Some of these include: the Rule of Thirds (which is about achieving balance and focus) arranging items in groups of three repetition (highlighting visually interesting elements like lines and patterns) making good use of positive and negative space leading lines (which direct the viewer s attention to the focal point) and more All of which boil down to creating an image that is eye-catching, engaging, and visually appealing exactly what you want for images featured on your website. Pro Tip: Many cameras, even smartphone cameras, have a Rule of Thirds grid that you can overlay on the display as you re taking your picture (or use for cropping after the fact). Just align the most important parts of your image along one of the four places where the lines intersect, and you ll be on your way to a better composition. HTC/Eric Krebs

06. Frame for Maximum Impact, Part 2: Workarounds If you re creating images to post on your website, then you have complete control over things like framing and cropping.

5 06. Frame for Maximum Impact, Part 2: Workarounds If you re creating images to post on your website, then you have complete control over things like framing and cropping. But if you re curating images perhaps to post on your blog or share on social media then you might have to get a little creative to achieve the results you re looking for. If the framing of the photo you ve chosen leaves something to be desired, then you may be able to fix it with cropping. Or, instead of taking away part of the image by cropping, you could add something. A photo with extra space can be filled with a quotation or inspirational saying a great option for sharing on social media. Dribbble/Chase Kettl You can also experiment with image orientation, perhaps (if the composition of the image allows) switching or cropping from a vertical to a horizontal layout (or vice versa); rotating the image for a different perspective; or cropping the image to a circle or other shape. Having images in a variety of shapes and sizes will add visual interest to your website. Don t stick to the same old image formatting process all the time; be creative!

100+ free fonts), and voilà! you re done. 07. Problem: Your image looks distorted. Solution: Scale proportionally.

6 Dribbble/Brent Jackson Pro Tip: Canva makes creating social media images like quotes a snap. Just open up a pre-sized template for whichever site you re using, choose from our wide selection of free or $1 photos (or upload your own), add some text (we have 100+ free fonts), and voilà! you re done. 07. Problem: Your image looks distorted. Solution: Scale proportionally. The most common cause of images looking distorted on websites is that they ve been stretched out of proportion to fill a certain space. The easiest way to avoid this is to keep the original proportions of the image when scaling it up or down, rather than stretching the length or width to fit.

7 Some platforms that you post images to may automatically scale your photo to fit their own requirements. So if you re posting images to a website other than your own, make sure to look up the recommended upload size and format your image to those specifications beforehand. Pro Tip: Most photo editing programs and applications have tools that you can use to make sure you re scaling your images proportionally. In the dialog box where you re scaling or adjusting the image size, there will often be a little lock icon that you can click that will lock in the original proportions, or a box you can check that says something like scale proportionally or constrain proportions. Do that, and you ll be good to go. 08. Problem: You saved your image in the wrong file format. Solution: Learn the differences between file types. All those acronyms can be confusing What s the difference between a JPG and a PNG? Does it matter? Do some file formats work better online than others? The short answer is that not all file formats are created equally. Each has its specific uses, with its own set of pros and cons. We ll do a quick overview here of file types that are suitable for web use, which should give you enough information to ensure that your images look their best on your website. JPG (or JPEG): primarily for photos (or highly detailed/colorful illustrations and graphics); accurate and wide-spectrum color representation; not good for images with text PNG: high image quality and good color representation; supports transparency/opacity; produces sharp lines and edges, so works well for things like graphics, logos, charts, etc.; displays text and solid blocks of color without pixelation (unlike JPGs, because it does not lose quality when compressed) GIF: only file type that supports animation; suitable for simple graphics (low file size doesn t negatively impact page loading speeds); color capabilities not as good as JPGs (256 colors or less, so not appropriate for photos) SVG: vector format that is resolution- and zoom-independent (i.e., it will remain sharp and clear no matter what device you view it on, how high-resolution the screen is, or how much you zoom in) PDF: preserves the original content and appearance of a file regardless of where or how it is viewed; best for displaying whole documents online, such as a pamphlet/guide/manual, e-book, etc. And one to avoid TIFF: high image quality, but very large file size, so unsuitable for web use; commonly used for handing over documents to be printed Pro Tip: For images that can be used for either print or web projects (such as JPGs and PDFs), you need to make sure that you create or convert them to the correct color space for web use, which is RGB. If you save in CMYK instead (which is used only for printing), the colors of your image will look very strange when you upload it to your website. If you re using Canva to format your image, this process is simplified: Just click Download, where you ll choose either As an image (a RGB file for web use) or High quality PDF (a CMYK file for printing).

09. Problem: You bought some stock photos for your website, but see them everywhere. Solution: Avoid stock photos, or spend some extra time searching for unique ones.

8 09. Problem: You bought some stock photos for your website, but see them everywhere. Solution: Avoid stock photos, or spend some extra time searching for unique ones. If you don t have the time or resources to create your own images, stock photos can be a convenient option. However, there are also a lot of cliché and overused stock photos out there and by using any stock photo, your risk seeing it in other places, perhaps even on a competitor s website. The obvious solution would be not to use stock photos at all and create your own original images instead, but if that s not an option, you can at least spend some time going past the first page of search results to find something that s a little different, and, more importantly, that is a really good match for your brand or purpose. Pro Tip: More and more resources for free stock photos have been popping up in recent years, which (despite being free) are still not used as often as paid sites. Plus, they often feature options that are more artistic and less run-of-the-mill, if you re willing to spend a little time digging. Check out our article, Free Stock Photos: 74 Best Sites to Find Awesome Free Images, for a rated list of recommended resources. Free stock photos from Unsplash.

9 10. Problem: You re not sure how to add information to your images. Solution: Make use of metadata options. Metadata is just a fancy word for the extra information that is embedded in your image file OR that you can add externally (like a caption or description). Some of this information is created automatically, such as the technical information that a camera records about a digital photo. Other pieces of textual information image names and descriptions, keywords, captions are optional or able to be edited. So why spend the extra time plugging in that information? For one, including some background information about your images often makes for a better user experience; but adding this type of data may also help your images show up more often in related search results. And more website traffic is always a good thing. Pro Tip: Different blogging and web hosting platforms will provide different options for adding metadata like captions and keywords to your images and you should take advantage of any opportunity to add value that your platform offers. Alt text (short for alternative text, sometimes called alt tag or alt attribute ) is one of the most common options. It s a field where you can type in a word or phrase that describes what your image represents. This is important because: 1) It plays a part in improving the SEO (search engine optimization) of your website; 2) If your image isn t displaying for some reason, the alt text will pop up to say what should be there; and 3) Alt text is used by blind and visually impaired users who use audiobased browsers to explore web pages. Every image should have its own unique, relevant alt text; and brief is better. But don t abuse the tool loading the alt text field with search terms you think are popular (known as alt spam or keyword stuffing ) won t help you, and may actually lower your website s search ranking.

Image metadata options in WordPress (Title, Caption, Alt Text, and Description). 11. Problem: You think your photo could use some editing, but you don t want to overdo it.

10 Image metadata options in WordPress (Title, Caption, Alt Text, and Description). 11. Problem: You think your photo could use some editing, but you don t want to overdo it. Solution: Keep it basic and don t go crazy with special effects. There is good photo editing, and then there is bad photo editing. Sometimes, when working with an image, you ll want to improve it a little: adjust the contrast or brightness, boost the saturation, sharpen it up a little. No problem.

11 Flickr/Severin Sadjina However, most photo editing programs even very basic ones can do a lot more than that. And it can be easy to get caught up in trying dramatic effects and filters; there s a fine line between tasteful and tacky editing. A good rule of thumb is to try to keep your editing purposeful. In other words, if you find yourself choosing an effect for no other reason than because it looks fun/weird/different, you maybe be better off just keeping the image in its original form. Pro Tip: Editing programs auto adjustment options (auto color, auto contrast, etc.) don t always achieve the best results. If you think something looks off, trust your own judgment rather than a machine s and make manual adjustments instead. 12. Problem: Colors never look quite right on your computer screen. Solution: Calibrate your monitor. If you re working with digital images, it s important that colors are displaying correctly. As you make color or editing choices, you ll want to see your images as they ll appear online, and you won t be able to do that if your screen or monitor is displaying colors inaccurately. Simon Prais at DigitalArts offers this tip: Calibrate your monitor, ensuring the brightness is set between 90 and 120 cd/m 2. Although this will limit the contrast of your display, it s likely to be more representative of what the intended audience will experience on a range of monitors of various ages and qualities. Pro Tip: Both Windows and Mac operating systems have built-in calibration tools. You can find step-by-step instructions on how to use them here.

Image Optimization for Print and Web

Image Optimization for Print and Web There are two distinct types of computer graphics: vector images and raster images. Vector Images Vector images are graphics that are rendered through a series of mathematical equations. These graphics