How To Create The Perfect Size Transparent Image For Website?
In mid-2016, as a graphic designer, the majority of finished client projects were in digital format — graphics for the website, PDFs for download, social graphics, data sheets, and brochures – rather than being submitted to a printer. These files must be clear, correctly sized, and, most importantly, compact (as measured by kilobytes, not pixels). This post will walk you through the process of optimising photos for the web in both JPG and PNG formats.
Preparing files for print is much different from preparing them for online access. Print files need high-resolution pictures (usually 300 dpi, or dots per inch), highlighted writing, bleeds for edge-to-edge colour, uncompressed images, transparency settings, and other wacky requirements.
Print file sizes may end up being rather huge (I’ve previously sent a 120MB multi-page catalogue file to a printer). If you believe anybody will download a 120MB file from your site (unless it’s a massive software bundle), I have some terrible news for you: they won’t.
After watching too many websites load a 3.0 MB full width background picture, I wanted to take a minute to discuss preparing digital assets, especially images (PNG, JPG, GIF), for the web.
File types available in online image format banner
Image file formats include PNG, JPG, GIF, and PDF.
When you save an online picture to your computer, it is normally saved as FILENAME.JPG, FILENAME.PNG, or FILENAME.GIF. When you download a brochure file, you will most likely see FILENAME.PDF. Although PDFs are not picture files, they are often utilised as digital asset downloads.
Do you ever print a logo only to realise it is choppy or “pixelated”? Or have you ever taken a photo with your phone and attempted to print it but it simply doesn’t come out clear? It was most likely a low-resolution picture that wasn’t meant to be printed. When capturing photographs or photos, it is important to consider where the image will be used: on the web or in print. If you wish to print your images, you may also need to tweak your phone’s camera settings to ensure that they are configured to shoot higher-resolution photos. (I’m referring to you, Mom…)
When should you save it as a JPG/JPEG?
When working with your own image, save it as a.JPG file if it is a photograph, a picture with a lot of colours (more than 256), or a picture with gradients.
When should you save it as a PNG?
PNG files are ideal for logos, vector artwork, solid coloured forms, and any other picture that requires transparency.
When exporting a file for web from Photoshop, you have two PNG formation options: PNG-8 and PNG-24. PNG-8 has a decreased file size but a maximum of 256 colours and a dubious transparency option (PNG-8 transparent images usually display jagged, ugly edges).
PNG-24 pictures are a lifesaver since they can preserve complicated images with a transparent backdrop in JPG-like quality. So why not put them to use for everything? Their file sizes may be enormous (but we’ll cover ways to compress them later).
When should you save it as a GIF?
GIFs and PNG-8 formats have a lot of similarities. GIFs are unique in that they are the only format that allows for animation (GIPHY, anyone?). If you’re attempting to determine whether to save a file as a PNG or a GIF, test both to see which provides your picture greater clarity and a lesser file size, and then choose the format that produces the best results.
When should you save it as a PDF?
Any design that is structured like a page, rather than simply a single picture — a trifold brochure, a one- or two-sided sales flyer, a poster, a menu, a case study, an eBook, or a white paper, for example.
When you save a file as a PDF, the page layout and design are preserved for anybody who downloads the file. It also provides for simple, clean reading since the text in a PDF is scaled and retained, and it is searchable with Ctrl + F. (really useful for long, text-heavy documents).
We won’t go into PDF compression in this tutorial since it’s complicated enough that it deserves its own article, but we wanted to mention it to cover the most typical digital documents you’ll encounter that need some web optimization.
How Many Kilobytes (KB) Should Your Image Have?
This is a matter of personal choice, and it will vary depending on the trade-off you’re attempting to achieve between lightning-fast site load time and sharp, gorgeous graphics.
We attempt to keep photos on our website under 75 KB (kilobytes) – the smaller the better – and as tiny as feasible without compromising image quality. Some really big header-type/banner pictures that are full screen and tall may squeak by at 150KB, but we strongly advise limiting images that are 100KB or larger to a bare minimum (use only when absolutely required).
Consider if you truly need a large banner picture on that page. Will it provide value to your visitors and boost conversion rates? Otherwise, skip it.
Adding a 100 KB picture to a page on your website might increase load time by several seconds. That 100 KB might be the difference between a purchase and closing your site’s tab for mobile consumers.
What size image should you use (width x height)?
There’s no need to include a large picture file on your website and then expect WordPress to scale it down for you. The site is still loading the original, massive picture file (unless you’ve used WordPress to choose a thumbnail or scaled-down size), wasting valuable KB in load time.
Do you want to know how to master W x H optimization? Save your picture in the EXACT SIZE that you need – no bigger, no smaller.
What if your picture is too large for your website?
If you have a high-quality digital camera, you may be shooting photographs that are several gigabytes in size—far more than what you want for your website. Stock pictures from high-quality sources often have huge file sizes as well. If your picture is larger than 1 MB, you have a few options:
Learn graphic design through Blue Sky Graphics online graphic design course.
Image resizing If your picture is 5000 pixels big, downsize it to 2000 pixels wide, 1200 pixels wide, or even lower depending on how you want to utilise it on your website. The file size will be greatly reduced as a result of this. Keep the dimensions of your picture in mind while resizing to avoid distorting it.
Lower the resolution. Most picture editing software will automatically reduce the resolution of your image to a “web-friendly” level (72dpi and 92dpi, respectively). You can accomplish the same thing in Photoshop by selecting the’save for web’ option. Many picture applications allow you to “Save As” and then alter the quality level from there.
