BEST WAY TO OPTIMIZE IMAGES FOR WEB DOWNLOAD

BEST WAY TO OPTIMIZE IMAGES FOR WEB DOWNLOAD

Scaling down in the browser using those attributes will force your page to download a file size larger than it needs, slowing down your page. ItвЂ™s considered smart to upload images at the actual pixel dimensions needed, rather than scale the image down in the browser using the вЂњheightвЂќ and вЂњwidthвЂќ attributes. The standard for images on the web is widely accepted to be 72 PPI, though whatвЂ™s really important are the dimensions of the image. Image resolution is the density of an image, often discussed as DPI or PPI (dots per inch or pixels per inch) вЂ“ depending on whether that image is meant for print or the web. Related to your imageвЂ™s file size is its resolution. For example, if your image is a photograph and you do not require transparency, then a JPG will provide you with the smallest file size without sacrificing clarity. Choosing the proper image format will also affect your file size. Look for the happy medium between small files and image clarity.

DonвЂ™t forget about file quality when reducing your file size. Try to keep images under 100kb if possible, but definitely under 1mb. When used on the web, your image file size should be as small as possible. Anything too large will bog down a page and increase loading times вЂ“ which also increases the likelihood of lost visitors. Images should be small when used on the web. Unless transparency is needed, saving photographs as PNG is not recommended and will create a file that is unnecessarily large.

PNG also utilizes lossless compression, meaning that data is not lost when the file is compressed. This format was designed for transferring images on the Internet and also supports transparent backgrounds, something the JPG format is not capable of. PNG (pronounced ping): The PNG format is used mostly for images that contain text or illustrations without gradients or textures. Photographs is ideal for the JPG format because of their many complex colors. For that reason, itвЂ™s important to pay close attention to file quality by looking out for blurry or pixelated images when compressing your JPG for the web. They are compressible to very small file sizes, however JPGs use вЂњlossyвЂќ compression, which means a certain amount of file quality will be lost that wonвЂ™t be recoverable. JPG (pronounced jay-peg): Typically used for photographs and images with many colors and textures, the JPG format allows for high quality images with reasonable file sizes. When choosing your format keep in mind the type of image youвЂ™re dealing with, how that image will be treated on the web, and the size you need it to be. Each option has its own pros and cons and is best used for specific scenarios. The most popular formats for images on the web include: JPG, PNG, SVG, and GIF. It is now used informally in Slack and messengers. GIF (pronounced jif): The GIF has fallen out of popularity for basic web images, due to the rise of the PNG format within the web design community. SVG handles compression well and allows for small file sizes, but is limited to simpler images that do not require many colors and textures. Other formats, like PNG and JPG, are вЂњrasterвЂќ images made up of pixels that will see loss of quality when scaled. Vector images use math to create shapes that can scale up or down without any loss of image quality (great for responsive design). SVG (pronounced as letters): The SVG format is quickly being adopted by designers for use on the web because these images are vector graphics. A few of the factors to pay attention to when it comes to images on your website are format, size, resolution, and file naming practices.

ItвЂ™s important to make sure youвЂ™re properly formatting and optimizing images for the web to prevent them from drastically slowing down your site. Unoptimized images can quickly bog down your site, causing it to load slowly and making visitors click away. However, if used improperly your images could be having negative effects on your bottom line. For most websites these days including images is a given.

Best way to optimize images for web