• Jessica | web developer ( @thecodercoder ) Instagram Profile

    @thecodercoder

    9 January, 2019
  • JPG, PNG, GIF, SVG... What type of image do you need to use on your website? Here's a quick reference for what type file best suits different kinds of images. JPG: Best for photographic images, where there are lots of texture. Can't do transparency. PNG: Best for images that have more solid areas of color, or need transparency. GIF: Not really used nowadays, except for animated GIFs! SVG: Best for vector graphics. I love using SVGs intead of custom fonts for icons because they size up or down without losing quality. What types of image files do you like using? . 👉 Follow @thecodercoder for more tips for beginner web devs! 💻 Check out my highlights for what gear I use 💻 . . . . #webdev #webdeveloper #js #webdesign #programmer #css #html #javascript #websitedesign #programmers #learntocode #devlife #programmerlife #frontenddeveloper #webdevelopers #thedevlife #development  #web #dev #code #vscode #coding #coder #webdevelopment #computer #setup #geek
    JPG, PNG, GIF, SVG... What type of image do you need to use on your website? Here's a quick reference for what type file best suits different kinds of images.

JPG: Best for photographic images, where there are lots of texture. Can't do transparency.

PNG: Best for images that have more solid areas of color, or need transparency.

GIF: Not really used nowadays, except for animated GIFs!

SVG: Best for vector graphics. I love using SVGs intead of custom fonts for icons because they size up or down without losing quality.

What types of image files do you like using?
.
👉 Follow @thecodercoder for more tips for beginner web devs!
💻 Check out my highlights for what gear I use 💻
.
.
.
.
#webdev #webdeveloper #js #webdesign #programmer #css #html #javascript #websitedesign #programmers #learntocode #devlife #programmerlife #frontenddeveloper #webdevelopers #thedevlife #development  #web #dev #code #vscode #coding #coder #webdevelopment #computer #setup #geek

    JPG, PNG, GIF, SVG... What type of image do you need to use on your website? Here's a quick reference for what type file best suits different kinds of images.

    JPG: Best for photographic images, where there are lots of texture. Can't do transparency.

    PNG: Best for images that have more solid areas of color, or need transparency.

    GIF: Not really used nowadays, except for animated GIFs!

    SVG: Best for vector graphics. I love using SVGs intead of custom fonts for icons because they size up or down without losing quality.

    What types of image files do you like using?
    .
    👉 Follow @thecodercoder for more tips for beginner web devs!
    💻 Check out my highlights for what gear I use 💻
    .
    .
    .
    .
    #webdev #webdeveloper #js #webdesign #programmer #css #html #javascript #websitedesign #programmers #learntocode #devlife #programmerlife #frontenddeveloper #webdevelopers #thedevlife #development   #web #dev #code #vscode #coding #coder #webdevelopment #computer #setup #geek

  • 2,264 36
  • Save Image Other Pictures
@zacker.exe Instagram Profile 9 January, 2019

Thank you, I didn't know PNGs were optimal for images with solid colors. ✌🏻

@thecodercoder Instagram Profile 9 January, 2019

@nextwebstudio hm, I actually haven't used it yet! It sounds great as a PNG alternative, but it doesn't seem like it has support for older browsers

@adn.codez Instagram Profile 9 January, 2019

I share the same opinion, I really like SVG👌

@thecodercoder Instagram Profile 9 January, 2019

@adn.codez SVGs are so awesome!! Custom icon fonts were a great idea, but honestly I'll take an SVG any day over them.

@asfaan.codes Instagram Profile 9 January, 2019

I've used jpg and PNG quiet often. Never used SVG, I'm A beginner right now so never tried other stuff ,maybe in the future I might use whenever required. Ive used GIF in WordPress , I guess I've used it in some themes which include options to use gif files for small animated stuff but that's very rare.

@toddwritescode Instagram Profile 9 January, 2019

Excellent piece of info right there. Thanks a bunch 👍🏻

@viva.4.ever Instagram Profile 9 January, 2019

but in custom font, there are no quality losing.

@1337_lestrange Instagram Profile 10 January, 2019

I bounce between SVG and PNG... For the transparency and scalable options. Im lazy and my website is wordpress so i use SVG and just upload 😂

@thecodercoder Instagram Profile 10 January, 2019

@viva.4.ever True! However SVGs don't lose quality either. Custom fonts work, but I always felt it was a bit of a pain to load the font file, download the CSS file and have to set the character. SVG just seems quicker to me 😊

@1337_lestrange Instagram Profile 10 January, 2019

@thecodercoder ive been dabbling lightly in FEND Webdev for years but... Went WordPress for my own site 😂 does that make me a hypocrite? Hahaha

@pursh_codes Instagram Profile 10 January, 2019

I have never used SVG's before, if I have to start to I must learn it. Can anyone share a good resource to learn SVG tech?

@sasha.codes Instagram Profile 10 January, 2019

I’m trying to dive deep into SVG these days 😄

@mannycodes Instagram Profile 10 January, 2019

HEIC, the new Apple format for photos is missing.

@mannycodes Instagram Profile 10 January, 2019

@thecodercoder you know I haven’t fully tested that. I might check what the support is for the new image and video format.

@skyecoding Instagram Profile 11 January, 2019

I love it ur mousepad 😍 thanks for sharing!