facebook

Optimizing Images in WordPress to Improve Performance and SEO

Posted on Updated on

At 11:20am on 4/29/2018, I attended Optimizing Images in WordPress to Improve Performance and SEO, Presented by Steve Mortiboy of Pressable, at the 2018 Raleigh Wordcamp Convention in the Engineering Building I of North Carolina State University in Raleigh, NC.

Optimizing Images in WordPress to Improve Performance and SEO

This session is really aimed at beginners who want to understand how to leverage images to improve their website. I’m hoping we’ll take a hands-on look at things you should do when adding images and common mistakes to avoid that could negatively impact your site, especially with search engines.

Intended Audience:  Beginners

What we’re supposed to cover:

We need to think about performance, image optimazation, SEO, performance, etc.

Embedding Images

We’re doing this without proper sizes, etc. and we don’t really think about how it might affect performance, or adjust the layout.

Considerations

JPG, PNG, GIF. We cover this material, and its good content

File Size

this is the biggest problem. Taking an image from our phone or other device is huge, 10MB or more. High def is even worse. Before uploading into wordpress, we’ll want to adjust it. The smaller the better, with 100KB or smaller as ideal.

Dimensions

A 600px content area will not need 1000px width content. in Settings, Media you can adjust your content sizes. Your media may not convert to those sizes, even if supposed to. WordPresss does not know the content, it just crops the images as it feels the data tells it. Beware oversized images. Editing an image on the page allows you to set custom sizes

Image Resolution

DPI and PPI only apply to printing. It do affect image size in the file however. There is a myth of 72dpi. we don’t need to do that in our websites.

Images per page. The more images appear on a page, the more you need ot consider file sizes and page load times. Remember your mobile device users. Consider using a gallery or slideshow such as:

  • JetPack Tiles Galleries
  • JetPack Carousel

Do not load the image initially. Load only when requested.

Image Linking

Where should we link an image embedded? Should it load the media file. attachment page, custome URL, or nothing? LInking the media file should be reconsidered. That just loads the image in the browser. Google following that link only sees the file, no information, and the user must push the back button.

Consider instead an attachment page. This is an older forgotten page type. An attachment page is a wordpress page. You can add these theme pages with styles, links, back buttons, exit data, etc. It allows information such as MetaData to provide richer content to our customers in ways such as location and date. It allows us to add Meta tags, SEO, anything you’d like. You may not know you’re even on a page only for a photo. Google will index that page.

Custom URL is useful for custom button creators, etc.  Uploading a button linking to a particular page (such as contact us) allows you to create linkable, custom pages which can also be indexed.

An item with no reason to click on an image, you should just select none.

Image ownership

This is a big issue over the years. Big companies are seeking out smaller companies to Quash. Just because you found it doesn’t mean you can use it. There are different types of license. Consider using the Creative Commons Search Tools at: https://search.creativecommons.org

Stock Images

For the love of Pete, don’t do it. They’ve been done to death. Take your own photos, be real and be genuine. It brings nothing to the visitor to be seeing general images.

Optimization

Lossless compression reduces file size without losing quality. Lossy compression reduces file size with possible loss of quality. Your goal is to reduce a web image to 100KB or less. Granted, it always depends on the original image.

  1. Photoshop
  2. GIMP
  3. Imageoptim.com for mac
  4. tinyPNG at tinyPNG.com
  5. jpegmini at jpegmini.com
  6. EWWW image optimizer plugin

RETINA IMAGES

Retina schreens and displays are common.

Consider

  • using plugins, WPRetina 2x
  • using SVG
  • HTML method src=”image-800×600.jpg” width=”400″ height=”300″

Image SEO

1000+ line pages are boring. Images are sticky, they keep us there and easily tell us if we’re in the right place. Keep the visitor on the site, but also keep the visitor finding the site. Make your imagery search-engine friendly.

  1. Image Filename: DSC_005612987 doesn’t tell us anything. Rename your images to something which is helpful for search engines. You cannot rename the file once its uploaded because the images is posted in the server. If you’re using the same file on different pages, upload the same file with a different name. It may look the same, but it will be seen as different by search engines and computers which matter.
  2. Title attribute. Set the title and alt text to the content of the page, not the image. rather than describing the image, link it to the page and make it easier to find the page
  3. Alt text. Required for many governmental website.
  4. attachment page. Add the SEO title, the SEO description
  5. include images in your XML sitemap. AllInOneSEO automatically includes these items in the XML sitemap

Images for social media

Cathcing people’s information is really important, and a good high-quality image can really get you that click-through. Use a plugin to set that image. Create a custom image which is properly sized just for social media. Social media images can be shared and cached. It may only be for 7 days (facebook). Twitter and LinkedIn make it difficult to clear that cache.

Image sizes for social media

  • facebook images 1200px x 630px
  • twitter images 900px x 450px
  • pinterest images 236p x scaled height
  • instagram images 1080px x 1080px

Image Caching and CDN

  • JetPack Photon
  • WP Super Cache
  • W3 Total Cache
  • MaxCDN
  • Amazon CloudFront

Test using Google PageSpeed Insights:  https://developers.google.com/speed/pagespeed/insights

 

 


Steve Mortiboy

Steve Mortiboy is the COO and Service Delivery Manager for Semper Plugins. He leads the team that develops plugins such as All in One SEO Pack. He has been working with WordPress for over 8 years and devotes much of his time to helping people get the most from WordPress. He is also one of the co-organizers of WordCamp Raleigh and the Raleigh WordPress Meetup Group. When not hard at work he’s working on DIY projects at home or off traveling.

Advertisements

Using Social Media to Enhance your Teaching Learning and Practice

Video Posted on Updated on

On March 10th 2016, I attended the NCCIA presentation at 9:00pm with Andy McPhee, Senior Acquisitions Editor with F.A. Davis, in RM219 in the 600 building at Rowan Cabarrus Community College in Salisbury, NC.

Tyler Dockery working with social media masters
Materials can be found at: bit.ly/1QGs45o

Using Social Media to Enhance your Teaching Learning and Practice

We would like to focus more on teaching rather than personal use, because we’re mostly familiar with that.
1.2 Billion on facebook, 1 billion on youtube, 150m on snapchat, 70m on pinterest, 232m on twitter. Now those numbers were from 2013.

WHy use social media? Spread infomation, educate students, interact with teachers and business owners, bloggers and community. Gain info and group collaboration. Never lose sight of the fact that you are always open and vulnerable. Keep everything on or above board. By and Large, hackers aren’t interested in us. We are unchallenging, and that’s our best security.

facebook.com/stella.bellman is a resusitation dummy. She is the face of a nursing program. Its a way to interact with students on social media without compromising privacy. Students interact like she’s real.

Main types of social media: Social network, microblogging, etc.

FACEBOOK
It is difficult to do facebook just for business. As soon as you open an account, they require you to add school, etc. Contacts come out of the woodwork. Its so easy to respond to a comment from the wrong accounts. It becomes difficult to keep the two worlds separate. Classmates create a group – a secret group so no one can see – only friend students and then unfriend students at the end of the semester. The profile becomes the problem.

GOOGLE+
Since community is built and small you get some nice stuff.

TWITTER
Its a good source for up to the minute news source and information-giving device. Andy is mainly using IFTTT to flip facebook posts to twitter.

LINKEDIN
Trying to become facebook. Losing some of its mission. Its still a fine way to network and find work. JOBS is a great feature if posting. Its a job networking site and SPAMMERS are coming on to become a connection.

SOCIAL BOOKMARKING with DIGG, REDDIT, STUMBLEUPON
all collect URL and show based on your interests. It will populate with information that are shared or digged most.

MEDIA SHARING
vimeo, youtube, instagram, Vine
THere are a million of these. Periscope for example is new, and there will be millions within the next few years.

TRAINING
Student project: Watch one, Do one, Teach one. It engages students in the process, and builds a community. They know they’re being recorded and the know they want to do it right. How do you know a video is reliable? The info is out there, but is it right? do you know anything about the host? What are your parameters and understanding.

PINTEREST
Pinterest is an oddball. You’re sharing only images – they link in the background, but goes well for fashion, shoes, jewelry, and recipe. Its mostly pushing for women, but that isn’t the only audience. Andy uses it for books. He gets lots of re-pins. Does it help the business? it is unknown. How might it be used in the classroom? For graphic design and social media statistics, it makes a nice research site available for students.

BLOGS AND REVIEWS
Wordpress, Blogger, Goodreads. Ongoing copywriting, ideas, representation, explanation. Getting students started is more than half the job.

Seven Basic Learning Styles

Learners come in 7 basics styles: Visual, Aural, Verbal, Physical, Logical, Social, Solitary. Visual: items in space. Aural: sound and music. Verbal: speech and writing. Physical: using body, hands, sense of touch. Logical: logic, reasoning, systems. Social: learning in groups or with people. Solitary: Prefering to work alone or self-study.

Real interactivity should look to children’s e-book! Most publishing companiestake a book and retrofit to a digital platform. Consider starting with a chapters summary: what’s the final takeaway. Students should then be able to wind their way through the learning pattern to assemble the material. Test them on the summary. Retrofitting does not solve this issue. Children’s books do this, because content is so limited.

Areas of the brain are involved in this. look to Occipital Lobe for graphic designers. Parietal lobe, frontal lobe, temporal lobe, cerebellum. [see slide for more information above at bit.ly address] In addition to this, there are learning styles

Using Social Media to Enhance Your Teaching, Learning, and Practice

Visual Learners
I learn by seeing.
YouTube
Vimeo
Pinterest
Vine

Aural Learners
I listen and learn
podcast
audio backed PPT
Youtube
VImeo

Social Learners
I enjoy learning in groups.
Google Docs or other simultanous-editing apps
Google+
Facebook
Twitter
Chat rooms
Synchronous or asynchronous discussion boards
Vine

Physical Learners
I learn by doing
Difficult on social media
demonstrate for video outlet

Logical Learners
I’m thankful for technology
scripting for youtube video (sequencing)
blogs
pinterest (grouping)

Verbal Learners
I enjoy learning in groups
google docs or simultaneous editing apps
google+
facebook
twitter
chat rooms
synchronous or synchronus discussion baords
vine
blogs and wiki

SOlitary Learners
I learn best on my own
blog
facebook
google+
twitter
vine

Working with Social Media
Plan, Produce, Give Back. Plan from the very beginning. What do you want SM to do for you? You literally can’t be in everything. Choose your battles.

  • Communicate with colleagues
  • Stay current
  • Promote self in professional community

Choose your outlets, and get everyone on board. Build Follow/Friend lists. Do this slowly. Search for the content that you like. Follow them. Set your accounts to follow an RT of every follower. Check outlets regularly to increase lists. Build your community. You cannot set this up to run on its own.

Produce with Social Media
Write and Share your knowledge. You are teachers, provide the content, but don’t get into arguments. Communicate, Listen and respond. Experiment

Give Back
Don’t just read, post
Help, don’t push
Follow the “rules”

11 Rules of Social Media Etiquette

  • Give more than you receive
  • Don’t be an idle chatterbox
  • Add value
  • Don’t interfere with other’s efforts
  • Remember that cheaters never win
  • Build quality relationships
  • Stop being too aggressive
  • Respect the community
  • Listen to others
  • Be accountable for your actions
  • Be nice

Words to the Wise

Be Careful With YOur Personal Information. Would you want your boss to see whatever you’re posting? If not, don’t bother writing it. NEVER post or repost student information. Never, Ever post a negative piece about a student, in fact, just post positive materials. No swearing. No criticizing individuals by name or other descriptors. Always professional, courteous, helpful

Above all… Have Fun. Play with it. The more you engage, the more you’ll be able to

What questions do you have?

GDA Lecture: Dreamweaver, SEO and Social Media

Posted on Updated on

Tyler Dockery Talks on Dreamweaver, SEO & Social Media

Tyler Dockery speaks social media

Tyler Dockery came this month to talk with the GDA about the changing role of graphic and web designers.

Highlighting the workplace’s desire to understand each worker through their actions and feelings, we discussed how current employers can ask to have access to your facebook / twitter social media sites. While in many cases, this is under the guise of looking for gang-related materials or drug/alcohol use– it can also be used to monitor the language you use, the places you frequent, and what you say or have said about previous employers. Best bets: The internet will be around for a long, long time. Keep your social life clean, and ditch or remove any questionable material prior to any interviews.

We discussed seeking out followers and who to follow, as well as what to comment on in social media.

When discussing social media, we also noted that you should set some goals for yourself. Keep active with the big three: Facebook, Twitter, and LinkedIn. Use those channels for your business as well as your networking. Pinterest is making a big wave right now, but how much should a designer really take part in? Tyler states that you can’t spend all your time chasing down the newest social media site on the net and trying to get traction.

Pick a few sites and feel the vibe. Use those items to bolster your work and talk about your business. Social media and SEO go hand in hand, so use those keywords!

We also discussed blogging, and why blogs are so beloved by search engines. We discussed the top places SEO keywords can be used, the importance of link juice, and the real reason that content is truly king on the internet.

We also watched an educational video found below on the importance of twitter:

http://www.dockerydesign.com/video/twittersphere.html

Please watch at your own risk, and watch out for the Fail Whale!