• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

Free Resources for Your Website Graphics

Modified on: July 4, 2020

Table of contents

  1. 1. Free resources of amazing high-quality images
    1. 2. Free tools for graphics designers
      1. Gimp 2.0
        1. Canva.com
        2. 3. Mockdrop.io: Input web layouts into laptop, mobile, PC screens
          1. 4. TinyJPG: Compressing images
            1. 5. Conclusion

              There is one problem when designing a website: you need a lot of content. Even for testing purposes, your website still needs articles and high-quality photos to look nice and provide an excellent user experience.

              If you are a working in a web development company, you probably can turn to your boss to ask for a Shutterstock subscription for about 50 images downloadable a month for 160 euros.

              But, if you are a student, or an individual making websites as a hobby? Do you give your customers an empty website which is coded excellently but no articles or a pixelated header photo?

              No. Of course not. And this article will give you some free resources which will make life much easier.

              1. Free resources of amazing high-quality images

              There are several websites that offer copyright-free high-quality images for whatever purposes.

              Often, you are politely asked for a credit for each photo downloaded, but it is not mandatory. I suggest that in your web projects, you create a .txt file that lists all the resources you use. Or, it is always better to include the author credit in the photo’s caption.

              At this moment, I want to recommend these resources which I have always been using:

              • Unsplash.com: beautiful free HD images. When a photo is submitted to this site, it must be about 3MB. I also have an account on this site where I share photos of my trips: https://unsplash.com/@ongbogi. I am not paid anything to recommend this, but I would be very glad if you find any useful photos from my channel.
              • Stocksnap.io: similar to Unsplash, stocksnap.io offers a large database of free images of different topics. It has amazing images from artful to raw file that you can modify with any photo editing program.
              • Pexels.com
              free resources for website graphics
              Pexels.com is one among the sites that provide free HD images for both personal and commercial use.

              In my opinion, these sources are quite similar in a way that they provide users with free HD photos on various topics. The idea is that, if you don’t find the photo you need from one source, just switch to another.

              2. Free tools for graphics designers

              So, we always study at school how to use Adobe Products such as Photoshop and Illustrator. How about after school when we don’t have the license to use those expensive products? Well, there are alternative solutions.

              canva dashboard example free resources of graphics design
              A section of Canva Dashboard that offers different heading and body font combinations.

              Gimp 2.0

              This is a free software that offers powerful editing tool for simple use. No, it is not so simple as Paint.

              Gimp has a community which contributes often. It has all basic functions you would need, such as Selection Tool, Scale Tool, Crop, Clone Tool, Gradient Tool, etc.

              Also, there are various Filters and Color Manipulation possibilities. Although some features required being done in a different way than Photoshop (such as the Borders and Gradient), it worth the time of learning.

              Try it, and you will love it!

              Canva.com

              This is a web-based application perfectly for a start-up company, and for those who are not IT professionals.

              While Gimp requires a certain level of skills working with images, Canva offers various breathtaking and ready-made templates for brochures, flyers, CVs, and so on.

              Also, this provides excellent modern font combinations. So, it requires not so much creative work from users.

              As a developer, I don’t usually come up with the best idea of color combination or creative graphics design but Canva helps me a lot with this.

              3. Mockdrop.io: Input web layouts into laptop, mobile, PC screens

              If you ever want to make an image in which people is surfing your website with their PC, tablet or mobile devices, you will appreciate mockdrop.io for its easy to use and super time-saver.

              Mockdrop.io is a website that provides users with images of people using digital devices with a lot of different screen sizes.

              Additionally, you don’t need to use any graphical software to place your website screenshot neatly into the screen.

              All you need to do is to choose an image, click to upload your screenshot, and it will stays within the screen of the devices. All the process takes about several seconds!

              mockdrop web
              Mockdrop.io shows a lot of devices with different screen sizes

              This is an example when I placed a mobile UI into a mobile device screen using MockDrop:

              iphone floor plan smart home mockup

              4. TinyJPG: Compressing images

              Compressed images are important to the loading speed of the web. If your website show images of about 5MB each, it may load very slowly. That’s where tinyjpg.com comes into play as a help resource.

              You can upload JPG or PNG files and the site will compress it for free for you. And the results are appreciated.

              tinyjpg compress images
              Tinyjpg effectively helps you to compress web images.

              5. Conclusion

              You might find more free resources over the Internet, but what I recommend here are the tools I have been using on a regular basis and really love. If you have other sources, please leave a comment below.

              Also, you will notice that some topics are not easy to find related photos, for example, games or events. In another case, if you are running a content marketing campaign and need really specific impressive images, buying images from iStock or Shutterstock is also a good idea. It costs only 3-5 euros per image, as equal as you offer the photo author a cup of coffee.

              Filed Under: Built-in tools, Online tools, Utilities Tagged With: website graphics

              Recent posts

              [WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

              [WordPress] Create custom post type programmatically

              [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

              Reader Interactions

              You are here: Home / Utilities / Built-in tools / Free Resources for Your Website Graphics

              Comments

              1. yawer says

                August 7, 2018 at 9:11 am

                great free resources..thank you

                Reply
                • frino-ad says

                  August 8, 2018 at 9:45 am

                  Thank you Yawer!

                  Reply

              Leave a Reply Cancel reply

              Your email address will not be published. Required fields are marked *

              Primary Sidebar

              Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

              FOLLOW MY BLOG

              Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.